Adicionando chartjs no grafico 1 de convenios

sigi/apps/convenios/models.py

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

sigi/context_processors.py

@@ -8,6 +8,7 @@ from sigi.apps.servicos.models import TipoServico
 from sigi.apps.diagnosticos.models import Diagnostico
 from sigi.apps.metas.models import Meta
 
+
 def charts_data(request):
     """
     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_equipadas_proj = convenios_com_aceite.filter(projeto=projeto)
 
-
         cabecalho_topo.append(projeto.sigla)
         lista_total.append(camaras.filter(convenio__projeto=projeto).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()
 
-    lista_projetos = [(projeto.nome,
+    lista_projetos = [(projeto.sigla,
                        convenios.filter(projeto=projeto).count(),
                        colors.next(),
                        highlights.next())

sigiStatic/css/style.css

@@ -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;
+}

templates/index.html

@@ -5,6 +5,8 @@
 
 {% block extrahead %}
     {{ 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/jquery.min.js"></script>
     <script type="text/javascript" src="{{ STATIC_URL }}admin/js/jquery.init.js"></script>
@@ -52,21 +54,38 @@
         {% for num, dados in dados_graficos_convenio_projeto %}
             var pieData{{ num }} = [
                 {% for label, value, color, highlight in dados %}
-                    {#                {% if not forloop.first %}#}
                     {
                         label: "{{ label }}",
                         value: {{ value }},
                         color:"{{ color }}",
                         highlight: "{{ highlight }}"
                     },
-                    {#                {% endif %}#}
                 {% endfor %}
             ]
             window.onload = function(){
+                var canvas = document.getElementById("canvas-holder");
                 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");
-                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 %}
     </script>

templates/snippets/modules/charts-convenios.html

@@ -28,10 +28,19 @@
 
 <div class="module " style="height: 300px;">
     <h2>Convênios</h2>
-    <div id="canvas-holder" class="align-center" style="margin-top: 55px">
-        <canvas id="chart-area-1" width="220" height="220" />
+    <div id="canvas-holder">
+        <canvas id="chart-area-1" width="120" height="120" />
     </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 class="module" style="height: 300px;">