Migrando os graficos Pie da app diagnosticos para Chartjs

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

@@ -3,6 +3,7 @@
 {% block content_title %}<h1>Graficos dos Diagnósticos</h1>{% endblock %}
 
 {% block extrahead %}
+    <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>
@@ -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();
                     },
 

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;