Migrando os graficos Pie da app diagnosticos para Chartjs

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

@@ -3,11 +3,12 @@
 {% 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>
+    <link rel="stylesheet" href="{{ STATIC_URL }}css/style.css">
-<script  type="text/javascript" src="{{ STATIC_URL }}js/Chart.min.js"></script>
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
-<script src="http://code.highcharts.com/highcharts.js"></script>
+    <script  type="text/javascript" src="{{ STATIC_URL }}js/Chart.min.js"></script>
-<script language=javascript>
+    <script src="http://code.highcharts.com/highcharts.js"></script>
-jQuery(document).ready(function () {
+    <script language=javascript>
+        jQuery(document).ready(function () {
 
             jQuery("form#categoria select").change(function () {
                 jQuery("form#categoria").submit()
@@ -24,6 +25,13 @@ jQuery(document).ready(function () {
                         var ctx = document.getElementById(output_id).getContext("2d");
                         var myNewChart = new Chart(ctx).Pie(data);
 
+                        var canvas = $("#canvas_" + id);
+                        if (canvas.has('.pie-legend').length == 0) {
+                            var legendHolder = document.createElement('div');
+                            legendHolder.innerHTML = myNewChart.generateLegend();
+                            canvas.append(legendHolder.firstChild);
+                        }
+
                         $('#canvas_' + id).toggle();
                     },
 
@@ -34,12 +42,12 @@ jQuery(document).ready(function () {
 
                 return false
             });
-});
+        });
-</script>
+    </script>
 {% endblock %}
 
 {% block content %}
-<div id="content-main">
+    <div id="content-main">
         <form id="categoria" action="." method="POST">
             {% csrf_token %}
             <select name="categoria">
@@ -64,5 +72,5 @@ jQuery(document).ready(function () {
                 {% endfor %}
             </ul>
         </div>
-</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;