Migrate morris chart to chartjs

app/js/bandwidthcharts.js

@@ -2,15 +2,44 @@
   "use strict";
 
   /**
-     * Create a Morris.js barchart.
+   * Create a Chart.js barchart.
    */
-    function CreateBarChart(placeholder, datasizeunits) {
-        var barchart = new Morris.Bar({
-            element: placeholder,
-            xkey: 'date',
-            ykeys: ['rx', 'tx'],
-            labels: [_t['receive']+' '+datasizeunits.toUpperCase(), 
-                     _t['send']+' '+datasizeunits.toUpperCase()]
+  function CreateChart(ctx, labels) {
+    var barchart = new Chart(ctx,{
+      type: 'line',
+      options: {
+        responsive: true,
+        scales: {
+          xAxes: [{
+            scaleLabel: {
+              display: true,
+              labelString: 'date',
+            },
+            ticks: {
+              maxRotation: 90,
+              minRotation: 80
+            }
+          }],
+          yAxes: [{
+            id: 'y-axis-1',
+            type: 'linear',
+            display: true,
+            position: 'left',
+          //},{
+          //  id: 'y-axis-2',
+          //  type: 'linear',
+          //  display: true,
+          //  position: 'right',
+            ticks: {
+              beginAtZero: true
+            }
+          }]
+        }
+      },
+      data: {
+        labels: labels,
+        datasets: []
+      }
     });
 
     return barchart;
@@ -21,7 +50,7 @@
    */
   function CreateDataTable(placeholder, timeunits) {
     $("#"+placeholder).append('<table id="tableBandwidth'+timeunits+
-            '" class="table table-responsive table-striped container-fluid"><thead>'+
+      '" class="table table-striped"><thead>'+
       '<tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
   }
 
@@ -30,7 +59,7 @@
    * construct the proper barchart.
    */
   function ShowBandwidthChartHandler(e) {
-        // Remove all morrisjs charts
+    // Remove all chartjs charts
     $('#divChartBandwidthhourly').empty();
     $('#divChartBandwidthdaily').empty();
     $('#divChartBandwidthmonthly').empty();
@@ -39,7 +68,7 @@
     $('#divTableBandwidthdaily').empty();
     $('#divTableBandwidthmonthly').empty();
     // Construct ajax uri for getting the proper data.
-        var timeunit = $('ul#tabbarBandwidth li.active a').attr('href').substr(1);
+    var timeunit = $('ul#tabbarBandwidth li.nav-item a.nav-link.active').attr('href').substr(1);
     var uri = 'ajax/bandwidth/get_bandwidth.php?';
     uri += 'inet=';
     uri += encodeURIComponent($('#cbxInterface'+timeunit+' option:selected').text());
@@ -47,8 +76,6 @@
     uri += encodeURIComponent(timeunit.substr(0, 1));
     var datasizeunits = 'mb';
     uri += '&dsu='+encodeURIComponent(datasizeunits);
-        // Init. chart
-        var barchart = CreateBarChart('divChartBandwidth'+timeunit, datasizeunits);
     // Init. datatable html
     var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit);
     // Get data for chart
@@ -56,11 +83,24 @@
       url: uri,
       dataType: 'json',
       beforeSend: function() {
-                $('#divLoaderBandwidth'+timeunit).removeClass('hidden');
+        $('#divLoaderBandwidth'+timeunit).show();
       }
     }).done(function(jsondata) {
-            $('#divLoaderBandwidth'+timeunit).addClass('hidden');
-            barchart.setData(jsondata);
+      $('#divLoaderBandwidth'+timeunit).hide();
+      // Map json values to label array
+      var labels = jsondata.map(function(e) {
+        return e.date;
+      });
+      // Init. chart with label series
+      var barchart = CreateChart('divChartBandwidth'+timeunit, labels);
+      var dataRx = jsondata.map(function(e) {
+        return e.rx;
+      });
+      var dataTx = jsondata.map(function(e) {
+        return e.tx;
+      });
+
+      addData(barchart, dataRx, dataTx, datasizeunits);
       $('#tableBandwidth'+timeunit).DataTable({
         'searching': false,
         'paging': false,
@@ -79,6 +119,26 @@
       }
     });
   }
+  /**
+   * Add data array to datasets of current chart.
+   */
+  function addData(chart, dataRx, dataTx, datasizeunits) {
+    chart.data.datasets.push({
+      label: 'Receive'+' '+datasizeunits.toUpperCase(),
+      yAxisID: 'y-axis-1',
+      borderColor: 'rgba(75, 192, 192, 1)',
+      backgroundColor: 'rgba(75, 192, 192, 0.2)',
+      data: dataRx
+    });
+    chart.data.datasets.push({
+      label: 'Send'+' '+datasizeunits.toUpperCase(),
+      yAxisID: 'y-axis-1',
+      borderColor: 'rgba(192, 192, 192, 1)',
+      backgroundColor: 'rgba(192, 192, 192, 0.2)',
+      data: dataTx
+    });
+    chart.update();
+  }
 
   $(document).ready(function() {
     $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);