Migrando os graficos Pie da app diagnosticos para Chartjs

sigi/apps/diagnosticos/templates/diagnosticos/graficos.html

@@ -3,66 +3,74 @@
 {% block content_title %}<h1>Graficos dos Diagnósticos</h1>{% endblock %}
 
 {% block extrahead %}
-<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
-<script  type="text/javascript" src="{{ STATIC_URL }}js/Chart.min.js"></script>
-<script src="http://code.highcharts.com/highcharts.js"></script>
-<script language=javascript>
-jQuery(document).ready(function () {
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
+    <script  type="text/javascript" src="{{ STATIC_URL }}js/Chart.min.js"></script>
+    <script src="http://code.highcharts.com/highcharts.js"></script>
+    <script language=javascript>
+        jQuery(document).ready(function () {
 
-  jQuery("form#categoria select").change(function () {
-    jQuery("form#categoria").submit()
-  });
+            jQuery("form#categoria select").change(function () {
+                jQuery("form#categoria").submit()
+            });
 
-  jQuery("#perguntas a").click(function(event){
-    event.preventDefault();
+            jQuery("#perguntas a").click(function(event){
+                event.preventDefault();
 
-    var id = jQuery(this).attr('id')
-    var output_id = 'output_'+id
-    jQuery.ajax({
-      url: jQuery(this).attr('href'),
-      success: function(data) {
-          var ctx = document.getElementById(output_id).getContext("2d");
-          var myNewChart = new Chart(ctx).Pie(data);
+                var id = jQuery(this).attr('id')
+                var output_id = 'output_'+id
+                jQuery.ajax({
+                    url: jQuery(this).attr('href'),
+                    success: function(data) {
+                        var ctx = document.getElementById(output_id).getContext("2d");
+                        var myNewChart = new Chart(ctx).Pie(data);
 
-          $('#canvas_' + id).toggle();
-      },
+                        var canvas = $("#canvas_" + id);
+                        if (canvas.has('.pie-legend').length == 0) {
+                            var legendHolder = document.createElement('div');
+                            legendHolder.innerHTML = myNewChart.generateLegend();
+                            canvas.append(legendHolder.firstChild);
+                        }
 
-      error: function(errorSender, errorMsg) {
-          jQuery(output_id).html(errorSender + ' ' + errorMsg);
-      }
-    });
+                        $('#canvas_' + id).toggle();
+                    },
 
-    return false
-  });
-});
-</script>
+                    error: function(errorSender, errorMsg) {
+                        jQuery(output_id).html(errorSender + ' ' + errorMsg);
+                    }
+                });
+
+                return false
+            });
+        });
+    </script>
 {% endblock %}
 
 {% block content %}
-<div id="content-main">
-  <form id="categoria" action="." method="POST">
-    {% csrf_token %}
-      <select name="categoria">
-        {% for categoria in categorias %}
-        <option value="{{ categoria.id }}" {% if categoria.id == sel_categoria %}selected="selected"{% endif %}>{{ categoria.nome }}</option>
-        {% endfor %}
-      </select>
-  </form>
-  <div id="perguntas">
-    <ul>
-      {% for pergunta in perguntas %}
-        <li style="list-style: none">
-          {% if pergunta.datatype == 'many' or pergunta.datatype == 'one' %}
-          <a id="{{ pergunta.name }}" href="/diagnosticos/api/?id={{ pergunta.name }}"><p>{{ pergunta.title }}</p></a>
-          <div id="canvas_{{ pergunta.name }}" style="display: none">
-              <canvas id="output_{{ pergunta.name }}" width="220" height="220"></canvas>
-          </div>
-          {% else %}
-          <p>{{ pergunta.title }}</p>
-          {% endif %}
-        </li>
-      {% endfor %}
-    </ul>
-  </div>
-</div>
+    <div id="content-main">
+        <form id="categoria" action="." method="POST">
+            {% csrf_token %}
+            <select name="categoria">
+                {% for categoria in categorias %}
+                    <option value="{{ categoria.id }}" {% if categoria.id == sel_categoria %}selected="selected"{% endif %}>{{ categoria.nome }}</option>
+                {% endfor %}
+            </select>
+        </form>
+        <div id="perguntas">
+            <ul>
+                {% for pergunta in perguntas %}
+                    <li style="list-style: none">
+                        {% if pergunta.datatype == 'many' or pergunta.datatype == 'one' %}
+                            <a id="{{ pergunta.name }}" href="/diagnosticos/api/?id={{ pergunta.name }}"><p>{{ pergunta.title }}</p></a>
+                            <div id="canvas_{{ pergunta.name }}" style="display: none">
+                                <canvas id="output_{{ pergunta.name }}" width="220" height="220"></canvas>
+                            </div>
+                        {% else %}
+                            <p>{{ pergunta.title }}</p>
+                        {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
 {% endblock %}

sigiStatic/css/style.css

@@ -1,4 +1,4 @@
-#canvas-holder-1, #canvas-holder-2 {
+div[id^=canvas] {
     padding: 20px 20px 20px 20px;
     min-height: 180px;
     position: relative;