employeehours report

public/js/lib/services/chartService.js

@@ -7,7 +7,10 @@
 
 dbo.charts = {
 
-    monthLabels : ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
+    pieColors  : ['#ffcf30', '#06b2dc', '#048a44', '#a63305', '#a0c03b', '#ffcb22', '#89c540', '#f77c01', '#1094f6', '#6733ba'],
+    barColor   : ['#f3a921', '#f2770c', '#72221a', '#04843b', '#d63f2e', '#fec220'],
+    monthLabels: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
+    charts     : [],
 
     drawHoursVsBudget: function ( hours, budget, element ) {
         var ctx = document.getElementById( element ).getContext( '2d' );
@@ -54,9 +57,7 @@ dbo.charts = {
                 labels  : ["offerte", "facturen", "betaald"],
                 datasets: [{
                     data           : [offer, invoice, payed],
-                    backgroundColor: [
-                        '#f3a921', '#f2770c', '#72221a'
-                    ]
+                    backgroundColor: dbo.charts.barColor
                 }]
             },
             options: {
@@ -81,8 +82,7 @@ dbo.charts = {
         } );
     },
 
-    drawHoursChart: function (element, chartData, labels, title, colors) {
-        console.log( chartData );
+    drawHoursChart: function ( element, chartData, labels, title, colors ) {
         var ctx = document.getElementById( element ).getContext( '2d' );
 
         var myChart = new Chart( ctx, {
@@ -104,7 +104,7 @@ dbo.charts = {
                     }]
                 },
                 legend             : {
-                    display: false,
+                    display  : false,
                     fontColor: '#ffffff',
                 },
                 title              : {
@@ -114,8 +114,43 @@ dbo.charts = {
                     fontColor: '#ffffff'
                 }
             }
-
         } );
+    },
+
+    drawPie: function ( element, data, chartLabels, title ) {
+        var ctx = document.getElementById( element ).getContext( '2d' );
+        dbo.charts.charts[element] = new Chart( ctx, {
+            type   : 'doughnut',
+            data   : {
+                datasets: [{
+                    data           : data,
+                    backgroundColor: dbo.charts.pieColors,
+                    borderColor    : dbo.charts.pieColors,
+                    label          : chartLabels
+                }],
+                labels  : chartLabels
+            },
+            options: {
+                title         : {
+                    display  : true,
+                    text     : title,
+                    fontSize : 16,
+                    fontColor: '#ffffff'
+                },
+                legend        : {
+                    display: false
+                },
+                legendCallback: function ( chart ) {
+                    var text = '';
+                    _.each( chart.data.labels, function ( p, i ) {
+                        text += '<div><div style="float:left;width:15px;height:15px;border-radius:50%;background-color:' + dbo.charts.pieColors[i] + '"></div><div style="margin-left:10px;float:left;color:#ffffff;">' + p + '</div></div><br />'
+                    } );
+
+                    return text;
+                }
+            }
+        } );
+        document.getElementById( element + '-legends' ).innerHTML = dbo.charts.charts[element].generateLegend();
     }
 
 }