Adicionando chartjs no grafico 2 de convenios

sigi/context_processors.py

@@ -128,7 +128,6 @@ def grafico_convenio_projeto(convenios):
                    '#8d4653',
                    '#91e8e1', ])
 
-    # colors = cycle(base_colors)
     highlights = cycle(['#B0D3F4',
                         '#8E8E91',
                         '#BCF4B1',
@@ -147,6 +146,9 @@ def grafico_convenio_projeto(convenios):
                        colors.next(),
                        highlights.next())
                       for projeto in projetos]
+    # remove projetos sem convenio
+    lista_projetos = [x for x in lista_projetos if x[1] > 0]
+
     # print lista_projetos
     # total_convenios = "Total: " + str(convenios.count())
     # lista_projetos.insert(0, total_convenios)

sigiStatic/css/style.css

@@ -1,13 +1,14 @@
-#canvas-holder {
+#canvas-holder-1, #canvas-holder-2 {
     padding: 20px 20px 20px 20px;
     min-height: 180px;
     position: relative;
-    margin-top: 110px;
+    margin-top: 47px;
+    margin-left: 20px;
 }
 .pie-legend {
     list-style: none;
     position: absolute;
-    right: 8px;
+    right: 50px;
     top: 18px;
 }
 .pie-legend li span {

templates/index.html

@@ -63,29 +63,21 @@
                 {% endfor %}
             ]
             window.onload = function(){
-                var canvas = document.getElementById("canvas-holder");
+                var canvas1 = document.getElementById("canvas-holder-1");
                 var ctx = document.getElementById("chart-area-1").getContext("2d");
-                window.myPie = new Chart(ctx).Pie(pieData1);
+                window.myPie = new Chart(ctx).Pie(pieData1).generateLegend();
-                var ctx = document.getElementById("chart-area-2").getContext("2d");
-                window.myPie = new Chart(ctx).Pie(pieData2);
 
                 var legendHolder = document.createElement('div');
-                legendHolder.innerHTML = myPie.generateLegend();
+                legendHolder.innerHTML = myPie;
-                // Include a html legend template after the module doughnut itself
+                canvas1.appendChild(legendHolder.firstChild);
-{#                var helpers = Chart.helpers;#}
+
-{#                helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){#}
+                var canvas2 = document.getElementById("canvas-holder-2");
-{#                    helpers.addEvent(legendNode, 'mouseover', function(){#}
+                var ctx2 = document.getElementById("chart-area-2").getContext("2d");
-{#                        var activeSegment = myPie.segments[index];#}
+                window.myPie2 = new Chart(ctx2).Pie(pieData2);
-{#                        activeSegment.save();#}
+
-{#                        activeSegment.fillColor = activeSegment.highlightColor;#}
+                var legendHolder2 = document.createElement('div');
-{#                        myPie.showTooltip([activeSegment]);#}
+                legendHolder2.innerHTML = myPie2.generateLegend();
-{#                        activeSegment.restore();#}
+                canvas2.appendChild(legendHolder2.firstChild);
-{#                    });#}
-{#                });#}
-{#                helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){#}
-{#                    myPie.draw();#}
-{#                });#}
-                canvas.appendChild(legendHolder.firstChild);
             };
         {% endfor %}
     </script>

templates/snippets/modules/charts-convenios.html

@@ -28,19 +28,10 @@
 
 <div class="module " style="height: 300px;">
     <h2>Convênios</h2>
-    <div id="canvas-holder">
+    <h3>Convênios assinados por projeto</h3>
-        <canvas id="chart-area-1" width="120" height="120" />
+    <div id="canvas-holder-1">
+        <canvas id="chart-area-1" width="150" height="150" />
     </div>
-{#    <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 class="module" style="height: 300px;">
@@ -94,8 +85,9 @@
 
 <div class="module" style="height: 300px;">
     <h2>Convênios</h2>
-    <div id="canvas-holder" class="align-center" style="margin-top: 55px">
+    <h3>Processos de convênios por projeto</h3>
-        <canvas id="chart-area-2" width="220" height="220" />
+    <div id="canvas-holder-2" style="margin-top: 55px">
+        <canvas id="chart-area-2" width="150" height="150" />
     </div>
 </div>
 
@@ -105,45 +97,5 @@
     <div class="align-center">
         <a href="/dashboard/mapa/"> <img src="{{ STATIC_URL }}img/mapicon-large.png" style="width: 60%;"/> </a>
     </div>
-    {% comment %}
-	<h2>Metas BID</h2>
-	<h3>Estado das metas do contrato BID</h3>
-	<table style="margin: auto;">
-	{% for meta in metas %}
-	  	<tr>
-	  		<td><strong>{{ meta.titulo }}</strong></td>
-	  		<td>
-	  			<img src="//chart.googleapis.com/chart?chf=c,s,CDCDCD&chbh=a&chs=250x18&cht=bhs&chco={{ meta.saude }}&chd=t:{{ meta.percentual_concluido|stringformat:'d' }}&chm=r,00000034,0,{{ meta.percentual_desejado_low|stringformat:'f' }},{{ meta.percentual_desejado_high|stringformat:'f' }},1"
-	  				width="100%" alt="" />
-	  		</td>
-	  		<td style="text-align: center;"><font color="{{ meta.saude }}">{{ meta.percentual_concluido }}%</font></td>
-	  	</tr>
-	  {% endfor %}
-	</table>
-	<div class="legend">
-		<span><div style="background-color: #E74A69;">&nbsp;</div>Ruim</span>
-		<span><div style="background-color: #FFDB6E;">&nbsp;</div>Preocupante</span>
-		<span><div style="background-color: #89D7AF;">&nbsp;</div>Bom</span>
-		<span><div style="background-color: #A2BBED;">&nbsp;</div>Atingido</span>
-	</div>
-{% endcomment %}
 </div>
-{% comment %}
-<div class="module" style="height: 300px;">
-    <h2>Diagnósticos</h2>
-    <h3>Resumo dos diagnósticos</h3>
-    
-    <table style="display: block; float: left;">            
-	{% for data in tabela_resumo_diagnostico %}
-		<tr>
-			<th>{{ data.title }}</th>
-			<td style="text-align: right;">{{ data.count }}</td>
-		</tr>
-	{% endfor %}
-      <tr><td colspan="2"><a href="/diagnosticos/mapa/">Ver mapa ampliado</a></td></tr>
-	</table>
 
-	<div id="map_canvas" style="float: left;  height: 80%; width: 300px;">
-	</div>
-</div>
-{% endcomment %}