am5.ready(function() {
	var timespanEl = $('.totalTrafficChartDashboardWidget #timeSpan');
	var interfacesEl = $(".totalTrafficChartDashboardWidget #interfaces");
	var trafficChart = new DateXYChart("totalTrafficChart", {
		timeUnit: ChartUtils.daysToTimeUnit(timespanEl.val()),
		numberFormat: "#.0b"
	});

	trafficChart.add(new JsonLineSeries(() =>
		"/app/api/usage/all/vpn," +
			ChartUtils.daysToResolution(timespanEl.val()) + "," +
			interfacesEl.val() + 
			",tx/" + timespanEl.val(), "Transmitted"));

	trafficChart.add(new JsonLineSeries(() =>
		"/app/api/usage/all/vpn," +
			ChartUtils.daysToResolution(timespanEl.val()) + "," + 
			interfacesEl.val() + 
			",rx/" + timespanEl.val(), "Received"));
			
	interfacesEl.change(() => trafficChart.reload());

	timespanEl.change(() => {
		trafficChart.setOptions({
			timeUnit: ChartUtils.daysToTimeUnit(timespanEl.val())
		}); 
		trafficChart.reload(); 
	});

	$('.totalTrafficChartDashboardWidget .refresh-graph').off('click').on('click', () => {
		trafficChart.reload();
		return false;
	});
});

