diff --git a/app/js/bandwidthcharts.js b/app/js/bandwidthcharts.js
index bfede760..e903c29b 100644
--- a/app/js/bandwidthcharts.js
+++ b/app/js/bandwidthcharts.js
@@ -1,92 +1,152 @@
(function($, _t) {
- "use strict";
+ "use strict";
- /**
- * Create a Morris.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()]
- });
-
- return barchart;
- }
-
- /**
- * Create a jquery bootstrap datatable.
- */
- function CreateDataTable(placeholder, timeunits) {
- $("#"+placeholder).append('
');
- }
-
- /**
- * 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');
+ /**
+ * Create a Chart.js barchart.
+ */
+ 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
}
- }).done(function(jsondata) {
- $('#divLoaderBandwidth'+timeunit).addClass('hidden');
- barchart.setData(jsondata);
- $('#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");
+ }],
+ yAxes: [{
+ id: 'y-axis-1',
+ type: 'linear',
+ display: true,
+ position: 'left',
+ //},{
+ // id: 'y-axis-2',
+ // type: 'linear',
+ // display: true,
+ // position: 'right',
+ ticks: {
+ beginAtZero: true
}
- });
- }
-
- $(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();
+ }]
+ }
+ },
+ data: {
+ labels: labels,
+ datasets: []
+ }
});
+ return barchart;
+ }
+
+ /**
+ * Create a jquery bootstrap datatable.
+ */
+ function CreateDataTable(placeholder, timeunits) {
+ $("#"+placeholder).append('');
+ }
+
+ /**
+ * 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);