Switching charts to use Chart.js instead of Google Charts

PHPCI/View/layout.phtml

@@ -9,8 +9,6 @@
     <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
     <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
     <link href="//cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
-    <link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" type="text/css" />
-    <link href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
 
     <link href="<?php print PHPCI_URL; ?>assets/plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
     <link href="<?php print PHPCI_URL; ?>assets/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
@@ -37,7 +35,6 @@
     <script src="<?php print PHPCI_URL; ?>assets/js/sprintf.js"></script>
     <script src="<?php print PHPCI_URL; ?>assets/js/moment.min.js"></script>
     <script src="<?php print PHPCI_URL; ?>assets/js/phpci.js" type="text/javascript"></script>
-    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
 
     <!--[if lt IE 9]>
     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -304,12 +301,8 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" type="text/javascript"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js" type="text/javascript"></script>
-
-<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/jquery.dataTables.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.10.9/js/dataTables.bootstrap.min.js"></script>
-
 
+<script src="<?php print PHPCI_URL; ?>assets/plugins/chartjs/Chart.min.js" type="text/javascript"></script>
 <script src="<?php print PHPCI_URL; ?>assets/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
 <script src="<?php print PHPCI_URL; ?>assets/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
 <?php if (file_exists(PHPCI_DIR . 'assets/plugins/datepicker/locales/bootstrap-datepicker.' . Lang::getLanguage() . '.js')) :?>

public/assets/js/build-plugins/loc.js

@@ -5,6 +5,7 @@ var locPlugin = ActiveBuild.UiPlugin.extend({
     lastData: null,
     displayOnUpdate: false,
     rendered: false,
+    chartData: null,
 
     register: function() {
         var self = this;
@@ -19,12 +20,19 @@ var locPlugin = ActiveBuild.UiPlugin.extend({
                 query();
             }
         });
-
-        google.load("visualization", "1", {packages:["corechart"]});
     },
 
     render: function() {
-        return $('<div id="phploc-lines"></div>').text(Lang.get('chart_display'));
+        var self = this;
+        var container = $('<div id="phploc-lines" style="width: 100%; height: 300px"></div>');
+        container.append('<canvas id="phploc-lines-chart" style="width: 100%; height: 300px"></canvas>');
+
+        $(document).on('shown.bs.tab', function () {
+            $('#build-lines-chart').hide();
+            self.drawChart();
+        });
+
+        return container;
     },
 
     onUpdate: function(e) {
@@ -33,35 +41,65 @@ var locPlugin = ActiveBuild.UiPlugin.extend({
     },
 
     displayChart: function() {
+        var self = this;
         var builds = this.lastData;
+        self.rendered = true;
 
-        if (!builds || !builds.length) {
+        self.chartData = {
-            $('#build-lines-chart').hide();
+            labels: [],
-            return;
+            datasets: [
-        }
+                {
-
+                    label: Lang.get('lines'),
-        this.rendered = true;
+                    strokeColor: "rgba(60,141,188,1)",
-
+                    pointColor: "rgba(60,141,188,1)",
-        $('#phploc-lines').empty().animate({height: '275px'});
+                    data: []
-
+                },
-        var titles = [Lang.get('build'), Lang.get('lines'), Lang.get('comment_lines'), Lang.get('noncomment_lines'), Lang.get('logical_lines')];
+                {
-        var data = [titles];
+                    label: Lang.get('logical_lines'),
-        for (var i in builds) {
+                    strokeColor: "rgba(245,105,84,1)",
-            data.push(['#' + builds[i].build_id, parseInt(builds[i].meta_value.LOC), parseInt(builds[i].meta_value.CLOC), parseInt(builds[i].meta_value.NCLOC), parseInt(builds[i].meta_value.LLOC)]);
+                    pointColor: "rgba(245,105,84,1)",
-        }
+                    data: []
-
+                },
-        var data = google.visualization.arrayToDataTable(data);
+                {
-        var options = {
+                    label: Lang.get('comment_lines'),
-            hAxis: {title: Lang.get('builds')},
+                    strokeColor: "rgba(0,166,90,1)",
-            vAxis: {title: Lang.get('lines')},
+                    pointColor: "rgba(0,166,90,1)",
-            backgroundColor: { fill: 'transparent' },
+                    data: []
-            height: 275,
+                },
-            legend: {position: 'bottom'}
+                {
+                    label: Lang.get('noncomment_lines'),
+                    strokeColor: "rgba(0,192,239,1)",
+                    pointColor: "rgba(0,192,239,1)",
+                    data: []
+                }
+            ]
         };
 
-        $('#build-lines-chart').show();
+        for (var i in builds) {
-        var chart = new google.visualization.LineChart(document.getElementById('phploc-lines'));
+            self.chartData.labels.push('Build ' + builds[i].build_id);
-        chart.draw(data, options);
+            self.chartData.datasets[0].data.push(builds[i].meta_value.LOC);
+            self.chartData.datasets[1].data.push(builds[i].meta_value.LLOC);
+            self.chartData.datasets[2].data.push(builds[i].meta_value.CLOC);
+            self.chartData.datasets[3].data.push(builds[i].meta_value.NCLOC);
+        }
+
+        self.drawChart();
+    },
+
+    drawChart: function () {
+        var self = this;
+
+        if ($('#information').hasClass('active') && self.chartData) {
+            $('#build-lines-chart').show();
+
+            var ctx = $("#phploc-lines-chart").get(0).getContext("2d");
+            var phpLocChart = new Chart(ctx);
+
+            phpLocChart.Line(self.chartData, {
+                datasetFill: false,
+                multiTooltipTemplate: "<%=datasetLabel%>: <%= value %>"
+            });
+        }
     }
 });
 

public/assets/js/build-plugins/warnings.js

@@ -4,18 +4,15 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
     title: Lang.get('quality_trend'),
     keys: {
         'codeception-errors': Lang.get('codeception_errors'),
-        'phpmd-warnings': Lang.get('phpmd_warnings'),
-        'phpcs-warnings': Lang.get('phpcs_warnings'),
-        'phpcs-errors': Lang.get('phpcs_errors'),
         'phplint-errors': Lang.get('phplint_errors'),
         'phpunit-errors': Lang.get('phpunit_errors'),
-        'phpdoccheck-warnings': Lang.get('phpdoccheck'),
         'phptallint-errors': Lang.get('phptal_errors'),
         'phptallint-warnings': Lang.get('phptal_warnings')
     },
     data: {},
     displayOnUpdate: false,
     rendered: false,
+    chartData: null,
 
     register: function() {
         var self = this;
@@ -25,7 +22,7 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
           queries.push(ActiveBuild.registerQuery(key, -1, {num_builds: 10, key: key}));
         }
 
-        $(window).on('codeception-errors phpmd-warnings phpcs-warnings phptallint-warnings phptallint-errors phpcs-errors phplint-errors phpunit-errors phpdoccheck-warnings', function(data) {
+        $(window).on('codeception-errors phptallint-warnings phptallint-errors phplint-errors phpunit-errors', function(data) {
             self.onUpdate(data);
         });
 
@@ -37,12 +34,19 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
                 }
             }
         });
-
-        google.load("visualization", "1", {packages:["corechart"]});
     },
 
     render: function() {
-        return $('<div id="build-warnings"></div>').text(Lang.get('chart_display'));
+        var self = this;
+        var container = $('<div id="build-warnings" style="width: 100%; height: 300px"></div>');
+        container.append('<canvas id="build-warnings-linechart" style="width: 100%; height: 300px"></canvas>');
+
+        $(document).on('shown.bs.tab', function () {
+            $('#build-warnings-chart').hide();
+            self.drawChart();
+        });
+
+        return container;
     },
 
     onUpdate: function(e) {
@@ -74,38 +78,53 @@ var warningsPlugin = ActiveBuild.UiPlugin.extend({
         var self = this;
         self.rendered = true;
 
-        $('#build-warnings').empty().animate({height: '275px'});
+        var colors = ['#4D4D4D', '#5DA5DA', '#FAA43A', '#60BD68', '#F17CB0', '#B2912F', '#B276B2', '#DECF3F', '#F15854'];
 
-        var titles = ['Build'];
+        self.chartData = {
-        for (var key in self.keys) {
+            labels: [],
-            titles.push(self.keys[key]);
+            datasets: []
-        }
-
-        var data = [titles];
-        for (var build in self.data) {
-            var thisBuild = ['#' + build];
-
-            for (var key in self.keys) {
-                thisBuild.push(parseInt(self.data[build][key]));
-            }
-
-            data.push(thisBuild);
-        }
-
-        var data = google.visualization.arrayToDataTable(data);
-        var options = {
-            hAxis: {title: Lang.get('builds')},
-            vAxis: {title: Lang.get('issues'), logScale:true},
-            backgroundColor: { fill: 'transparent' },
-            height: 275,
-            pointSize: 3,
-            legend: {position: 'bottom'}
         };
 
-        $('#build-warnings-chart').show();
+        for (var key in self.keys) {
+            var color = colors.shift();
 
-        var chart = new google.visualization.LineChart(document.getElementById('build-warnings'));
+            self.chartData.datasets.push({
-        chart.draw(data, options);
+                label: self.keys[key],
+                strokeColor: color,
+                pointColor: color,
+                data: []
+            });
+        }
+
+        for (var build in self.data) {
+            self.chartData.labels.push('Build ' + build);
+
+            var i = 0;
+            for (var key in self.keys) {
+                self.chartData[i].data.push(parseInt(self.data[build][key]));
+                i++;
+            }
+        }
+
+        console.log(self.chartData);
+
+        self.drawChart();
+    },
+
+    drawChart: function () {
+        var self = this;
+
+        if ($('#information').hasClass('active') && self.chartData) {
+            $('#build-warnings-chart').show();
+
+            var ctx = $("#build-warnings-linechart").get(0).getContext("2d");
+            var buildWarningsChart = new Chart(ctx);
+
+            buildWarningsChart.Line(self.chartData, {
+                datasetFill: false,
+                multiTooltipTemplate: "<%=datasetLabel%>: <%= value %>"
+            });
+        }
     }
 });