(function($, _t) { "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['send']+' '+datasizeunits.toUpperCase(), _t['receive']+' '+datasizeunits.toUpperCase()] }); return barchart; } /** * Create a jquery bootstrap datatable. */ function CreateDataTable(placeholder, timeunits) { $("#"+placeholder).append(''+ '
daterxtx
'); } /** * Figure out which tab is selected and remove all existing charts and then * construct the proper barchart. */ function ShowBandwidthChartHandler(e) { // Remove all morrisjs charts $('#divChartBandwidthdaily').empty(); $('#divChartBandwidthmonthly').empty(); // Remove all datatables $('#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'); barchart.setData(jsondata); $('#tableBandwidth'+timeunit).DataTable({ 'searching': false, 'paging': false, 'data': jsondata, 'order': [[ 0, 'ASC' ]], 'columns': [ { 'data': 'date' }, { 'data': 'rx', "title": _t['send']+' '+datasizeunits.toUpperCase() }, { 'data': 'tx', "title": _t['receive']+' '+datasizeunits.toUpperCase() }] }); }).fail(function(xhr, textStatus) { if (window.console) { console.error('server error'); } else { alert("server error"); } }); } $(document).ready(function() { $('#tabbarBandwidth a[data-toggle="tab"]').on('shown.bs.tab', ShowBandwidthChartHandler); $('#cbxInterfacedaily').on('change', ShowBandwidthChartHandler); $('#cbxInterfaceweekly').on('change', ShowBandwidthChartHandler); $('#cbxInterfacemonthly').on('change', ShowBandwidthChartHandler); ShowBandwidthChartHandler(); }); })(jQuery, t);