Migrate morris chart to chartjs

app/js/bandwidthcharts.js

@@ -1,92 +1,152 @@
 (function($, _t) {
-    "use strict";
+  "use strict";
 
-    /**
+  /**
-     * Create a Morris.js barchart.
+   * Create a Chart.js barchart.
-     */
+   */
-    function CreateBarChart(placeholder, datasizeunits) {
+  function CreateChart(ctx, labels) {
-        var barchart = new Morris.Bar({
+    var barchart = new Chart(ctx,{
-            element: placeholder,
+      type: 'line',
-            xkey: 'date',
+      options: {
-            ykeys: ['rx', 'tx'],
+        responsive: true,
-            labels: [_t['receive']+' '+datasizeunits.toUpperCase(), 
+        scales: {
-                     _t['send']+' '+datasizeunits.toUpperCase()]
+          xAxes: [{
-        });
+            scaleLabel: {
-
+              display: true,
-      return barchart;
+              labelString: 'date',
-    }
+            },
-
+            ticks: {
-    /**
+              maxRotation: 90,
-     * Create a jquery bootstrap datatable.
+              minRotation: 80
-     */
-    function CreateDataTable(placeholder, timeunits) {
-        $("#"+placeholder).append('<table id="tableBandwidth'+timeunits+
-            '" class="table table-responsive table-striped container-fluid"><thead>'+
-            '<tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
-    }
-
-    /**
-     * Figure out which tab is selected and remove all existing charts and then 
-     * construct the proper barchart.
-     */
-    function ShowBandwidthChartHandler(e) {
-        // Remove all morrisjs charts
-        $('#divChartBandwidthhourly').empty();
-        $('#divChartBandwidthdaily').empty();
-        $('#divChartBandwidthmonthly').empty();
-        // Remove all datatables
-        $('#divTableBandwidthhourly').empty();
-        $('#divTableBandwidthdaily').empty();
-        $('#divTableBandwidthmonthly').empty();
-        // Construct ajax uri for getting the proper data.
-        var timeunit = $('ul#tabbarBandwidth li.active a').attr('href').substr(1);
-        var uri = 'ajax/bandwidth/get_bandwidth.php?';
-        uri += 'inet=';
-        uri += encodeURIComponent($('#cbxInterface'+timeunit+' option:selected').text());
-        uri += '&tu=';
-        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
-        $.ajax({
-            url: uri,
-            dataType: 'json',
-            beforeSend: function() {
-                $('#divLoaderBandwidth'+timeunit).removeClass('hidden');
             }
-        }).done(function(jsondata) {
+          }],
-            $('#divLoaderBandwidth'+timeunit).addClass('hidden');
+          yAxes: [{
-            barchart.setData(jsondata);
+            id: 'y-axis-1',
-            $('#tableBandwidth'+timeunit).DataTable({
+            type: 'linear',
-                'searching': false,
+            display: true,
-                'paging': false,
+            position: 'left',
-                'data': jsondata,
+          //},{
-                'order': [[ 0, 'ASC' ]],
+          //  id: 'y-axis-2',
-                'columns': [
+          //  type: 'linear',
-                    { 'data': 'date' },
+          //  display: true,
-                    { 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() },
+          //  position: 'right',
-                    { 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }]
+            ticks: {
-            });
+              beginAtZero: true
-        }).fail(function(xhr, textStatus) {
-            if (window.console) {
-                console.error('server error');
-            } else {
-                alert("server error");
             }
-        });
+          }]
-    }
+        }
-
+      },
-    $(document).ready(function() {
+      data: {
-        $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler);
+        labels: labels,
-        $('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler);
+        datasets: []
-        $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
+      }
-        $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler);
-        ShowBandwidthChartHandler();
     });
 
+    return barchart;
+  }
+
+  /**
+   * Create a jquery bootstrap datatable.
+   */
+  function CreateDataTable(placeholder, timeunits) {
+    $("#"+placeholder).append('<table id="tableBandwidth'+timeunits+
+      '" class="table table-striped"><thead>'+
+      '<tr><th>date</th><th>rx</th><th>tx</th></tr></thead><tbody></tbody></table>');
+  }
+
+  /**
+   * Figure out which tab is selected and remove all existing charts and then
+   * construct the proper barchart.
+   */
+  function ShowBandwidthChartHandler(e) {
+    // Remove all chartjs charts
+    $('#divChartBandwidthhourly').empty();
+    $('#divChartBandwidthdaily').empty();
+    $('#divChartBandwidthmonthly').empty();
+    // Remove all datatables
+    $('#divTableBandwidthhourly').empty();
+    $('#divTableBandwidthdaily').empty();
+    $('#divTableBandwidthmonthly').empty();
+    // Construct ajax uri for getting the proper data.
+    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());
+    uri += '&tu=';
+    uri += encodeURIComponent(timeunit.substr(0, 1));
+    var datasizeunits = 'mb';
+    uri += '&dsu='+encodeURIComponent(datasizeunits);
+    // Init. datatable html
+    var datatable = CreateDataTable('divTableBandwidth'+timeunit, timeunit);
+    // Get data for chart
+    $.ajax({
+      url: uri,
+      dataType: 'json',
+      beforeSend: function() {
+        $('#divLoaderBandwidth'+timeunit).show();
+      }
+    }).done(function(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,
+        'data': jsondata,
+        'order': [[ 0, 'ASC' ]],
+        'columns': [
+          { 'data': 'date' },
+          { 'data': 'rx', "title": _t['receive']+' '+datasizeunits.toUpperCase() },
+          { 'data': 'tx', "title": _t['send']+' '+datasizeunits.toUpperCase() }]
+      });
+    }).fail(function(xhr, textStatus) {
+      if (window.console) {
+        console.error('server error');
+      } else {
+        alert("server error");
+      }
+    });
+  }
+  /**
+   * 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);
+    $('#cbxInterfacehourly').on('change', ShowBandwidthChartHandler);
+    $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler);
+    $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler);
+    ShowBandwidthChartHandler();
+  });
+
 })(jQuery, t);