ILB
/
sigi
mirror of https://github.com/interlegis/sigi.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adicionando chartjs no grafico 1 de convenios

producao
Breno Teixeira 11 years ago
parent
a632686e38
commit
5395004671
5 changed files with 159 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      sigi/apps/convenios/models.py
  2. 4
      sigi/context_processors.py
  3. 35
      sigiStatic/css/style.css
  4. 197
      templates/index.html
  5. 17
      templates/snippets/modules/charts-convenios.html

2
sigi/apps/convenios/models.py
View File

@ -1,4 +1,4 @@
# -*- coding: utf-8 -*- #style="list-style-type: noneo -*- coding: utf-8 -*-
from datetime import datetime from datetime import datetime
from django.db import models from django.db import models
from django.contrib.contenttypes import generic from django.contrib.contenttypes import generic

4
sigi/context_processors.py
View File

@ -8,6 +8,7 @@ from sigi.apps.servicos.models import TipoServico
from sigi.apps.diagnosticos.models import Diagnostico from sigi.apps.diagnosticos.models import Diagnostico
from sigi.apps.metas.models import Meta from sigi.apps.metas.models import Meta
def charts_data(request): def charts_data(request):
""" """
Busca informacoes para a criacao dos graficos e resumos Busca informacoes para a criacao dos graficos e resumos
@ -66,7 +67,6 @@ def busca_informacoes_camara():
conv_em_andamento_proj = convenios_em_andamento.filter(projeto=projeto) conv_em_andamento_proj = convenios_em_andamento.filter(projeto=projeto)
conv_equipadas_proj = convenios_com_aceite.filter(projeto=projeto) conv_equipadas_proj = convenios_com_aceite.filter(projeto=projeto)
cabecalho_topo.append(projeto.sigla) cabecalho_topo.append(projeto.sigla)
lista_total.append(camaras.filter(convenio__projeto=projeto).count()) lista_total.append(camaras.filter(convenio__projeto=projeto).count())
lista_nao_aderidas.append(camaras.filter(convenio__in=conv_sem_adesao_proj).count() ) lista_nao_aderidas.append(camaras.filter(convenio__in=conv_sem_adesao_proj).count() )
@ -142,7 +142,7 @@ def grafico_convenio_projeto(convenios):
projetos = Projeto.objects.all() projetos = Projeto.objects.all()
lista_projetos = [(projeto.nome, lista_projetos = [(projeto.sigla,
convenios.filter(projeto=projeto).count(), convenios.filter(projeto=projeto).count(),
colors.next(), colors.next(),
highlights.next()) highlights.next())

35
sigiStatic/css/style.css
View File

@ -0,0 +1,35 @@
#canvas-holder {
padding: 20px 20px 20px 20px;
min-height: 180px;
position: relative;
margin-top: 110px;
}
.pie-legend {
list-style: none;
position: absolute;
right: 8px;
top: 18px;
}
.pie-legend li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 100%;
border-radius: 5px;
}
.pie-legend li {
display: block;
padding-left: 30px;
position: relative;
margin-bottom: 4px;
border-radius: 5px;
padding: 2px 8px 2px 28px;
font-size: 14px;
cursor: default;
-webkit-transition: background-color 200ms ease-in-out;
-moz-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
}

197
templates/index.html
View File

@ -5,6 +5,8 @@
{% block extrahead %} {% block extrahead %}
{{ block.super }} {{ block.super }}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/style.css">
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}admin/js/core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.min.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script> <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
@ -34,9 +36,9 @@
var mark = new google.maps.Marker(markData); var mark = new google.maps.Marker(markData);
var infoWin = new google.maps.InfoWindow({content: var infoWin = new google.maps.InfoWindow({content:
'<strong>' + municipio.nome + '</strong><br/>' + '<strong>' + municipio.nome + '</strong><br/>' +
'<strong>Início da visita:</strong><br/>' + municipio.inicio + '<br/>' + '<strong>Início da visita:</strong><br/>' + municipio.inicio + '<br/>' +
'<strong>Término da visita:</strong><br/>' + municipio.fim + '<br/>' + '<strong>Término da visita:</strong><br/>' + municipio.fim + '<br/>' +
'<strong>Equipe:</trong><br/>' + municipio.equipe }); '<strong>Equipe:</trong><br/>' + municipio.equipe });
linkMarkMessage(mark, infoWin, map); linkMarkMessage(mark, infoWin, map);
} }
}); });
@ -52,107 +54,124 @@
{% for num, dados in dados_graficos_convenio_projeto %} {% for num, dados in dados_graficos_convenio_projeto %}
var pieData{{ num }} = [ var pieData{{ num }} = [
{% for label, value, color, highlight in dados %} {% for label, value, color, highlight in dados %}
{# {% if not forloop.first %}#}
{ {
label: "{{ label }}", label: "{{ label }}",
value: {{ value }}, value: {{ value }},
color:"{{ color }}", color:"{{ color }}",
highlight: "{{ highlight }}" highlight: "{{ highlight }}"
}, },
{# {% endif %}#}
{% endfor %} {% endfor %}
] ]
window.onload = function(){ window.onload = function(){
var canvas = document.getElementById("canvas-holder");
var ctx = document.getElementById("chart-area-1").getContext("2d"); var ctx = document.getElementById("chart-area-1").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData1).generateLegend(); window.myPie = new Chart(ctx).Pie(pieData1);
var ctx = document.getElementById("chart-area-2").getContext("2d"); var ctx = document.getElementById("chart-area-2").getContext("2d");
window.myPie = new Chart(ctx).Pie(pieData2).generateLegend(); window.myPie = new Chart(ctx).Pie(pieData2);
var legendHolder = document.createElement('div');
legendHolder.innerHTML = myPie.generateLegend();
// Include a html legend template after the module doughnut itself
{# var helpers = Chart.helpers;#}
{# helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){#}
{# helpers.addEvent(legendNode, 'mouseover', function(){#}
{# var activeSegment = myPie.segments[index];#}
{# activeSegment.save();#}
{# activeSegment.fillColor = activeSegment.highlightColor;#}
{# myPie.showTooltip([activeSegment]);#}
{# activeSegment.restore();#}
{# });#}
{# });#}
{# helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){#}
{# myPie.draw();#}
{# });#}
canvas.appendChild(legendHolder.firstChild);
}; };
{% endfor %} {% endfor %}
</script> </script>
{# Highcharts scripts #} {# Highcharts scripts #}
{# <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>#} {# <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>#}
{# <script src="http://code.highcharts.com/highcharts.js"></script>#} {# <script src="http://code.highcharts.com/highcharts.js"></script>#}
{##} {##}
{# <script type="text/javascript">#} {# <script type="text/javascript">#}
{# $(function () {#} {# $(function () {#}
{# var chart;#} {# var chart;#}
{##} {##}
{# $(document).ready(function () {#} {# $(document).ready(function () {#}
{##} {##}
{# // Build the chart#} {# // Build the chart#}
{# $('#processos_conv').highcharts({#} {# $('#processos_conv').highcharts({#}
{# chart: {#} {# chart: {#}
{# plotBackgroundColor: null,#} {# plotBackgroundColor: null,#}
{# plotBorderWidth: null,#} {# plotBorderWidth: null,#}
{# plotShadow: false#} {# plotShadow: false#}
{# },#} {# },#}
{# title: {#} {# title: {#}
{# text: 'Processos de convênios por projeto <br/> {{ g_conv_proj.0 }}'#} {# text: 'Processos de convênios por projeto <br/> {{ g_conv_proj.0 }}'#}
{# },#} {# },#}
{# tooltip: {#} {# tooltip: {#}
{# pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#} {# pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#}
{# },#} {# },#}
{# plotOptions: {#} {# plotOptions: {#}
{# pie: {#} {# pie: {#}
{# allowPointSelect: true,#} {# allowPointSelect: true,#}
{# cursor: 'pointer',#} {# cursor: 'pointer',#}
{# dataLabels: {#} {# dataLabels: {#}
{# enabled: false#} {# enabled: false#}
{# },#} {# },#}
{# showInLegend: true#} {# showInLegend: true#}
{# }#} {# }#}
{# },#} {# },#}
{# series: [{#} {# series: [{#}
{# type: 'pie',#} {# type: 'pie',#}
{# name: 'Browser share',#} {# name: 'Browser share',#}
{# data: [#} {# data: [#}
{# {% for k, v in g_conv_proj %}#} {# {% for k, v in g_conv_proj %}#}
{# {% if not forloop.first %}#} {# {% if not forloop.first %}#}
{# ['{{ k }}', {{ v }}],#} {# ['{{ k }}', {{ v }}],#}
{# {% endif %}#} {# {% endif %}#}
{# {% endfor %}#} {# {% endfor %}#}
{# ]#} {# ]#}
{# }]#} {# }]#}
{# });#} {# });#}
{# $('#processos_conv_ass').highcharts({#} {# $('#processos_conv_ass').highcharts({#}
{# chart: {#} {# chart: {#}
{# plotBackgroundColor: null,#} {# plotBackgroundColor: null,#}
{# plotBorderWidth: null,#} {# plotBorderWidth: null,#}
{# plotShadow: false#} {# plotShadow: false#}
{# },#} {# },#}
{# title: {#} {# title: {#}
{# text: 'Convênios assinados por projeto <br/> {{ g_convassinado_proj.0 }}'#} {# text: 'Convênios assinados por projeto <br/> {{ g_convassinado_proj.0 }}'#}
{# },#} {# },#}
{# tooltip: {#} {# tooltip: {#}
{# pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#} {# pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'#}
{# },#} {# },#}
{# plotOptions: {#} {# plotOptions: {#}
{# pie: {#} {# pie: {#}
{# allowPointSelect: true,#} {# allowPointSelect: true,#}
{# cursor: 'pointer',#} {# cursor: 'pointer',#}
{# dataLabels: {#} {# dataLabels: {#}
{# enabled: false#} {# enabled: false#}
{# },#} {# },#}
{# showInLegend: true#} {# showInLegend: true#}
{# }#} {# }#}
{# },#} {# },#}
{# series: [{#} {# series: [{#}
{# type: 'pie',#} {# type: 'pie',#}
{# name: 'Browser share',#} {# name: 'Browser share',#}
{# data: [#} {# data: [#}
{# {% for k, v in g_convassinado_proj %}#} {# {% for k, v in g_convassinado_proj %}#}
{# {% if not forloop.first %}#} {# {% if not forloop.first %}#}
{# ['{{ k }}', {{ v }}],#} {# ['{{ k }}', {{ v }}],#}
{# {% endif %}#} {# {% endif %}#}
{# {% endfor %}#} {# {% endfor %}#}
{# ]#} {# ]#}
{# }]#} {# }]#}
{# });#} {# });#}
{# });#} {# });#}
{##} {##}
{# });#} {# });#}
{# </script>#} {# </script>#}
{# end highcharts scripts #} {# end highcharts scripts #}
{% endblock %} {% endblock %}

17
templates/snippets/modules/charts-convenios.html
View File

@ -26,12 +26,21 @@
</ul> </ul>
</div> </div>
<div class="module" style="height: 300px;"> <div class="module " style="height: 300px;">
<h2>Convênios</h2> <h2>Convênios</h2>
<div id="canvas-holder" class="align-center" style="margin-top: 55px"> <div id="canvas-holder">
<canvas id="chart-area-1" width="220" height="220" /> <canvas id="chart-area-1" width="120" height="120" />
</div> </div>
<ul class="pie-legend"></ul> {# <div style="float: left">#}
{# <ul>#}
{# {% for num, dados in dados_graficos_convenio_projeto %}#}
{# {% for label, value, color in dados %}#}
{# <li style="list-style-type: none"><span style="background-color: {{ color }}; border-radius: 3px;">&nbsp&nbsp&nbsp</span> {{ label }}</li>#}
{# {% endfor %}#}
{# {% endfor %}#}
{# </ul>#}
{# </div>#}
{# <ul class="pie-legend"></ul>#}
</div> </div>
<div class="module" style="height: 300px;"> <div class="module" style="height: 300px;">

Write Preview
Loading…
Cancel
Save