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

	trafficChart.add(new JsonLineSeries(() => 
		"/app/api/usage/all/vpn," +
			ChartUtils.daysToResolution(timespanEl.val()) +
			"," + interfacesEl.val() + 
			",txbps/" + timespanEl.val(), 
			"Out", {
				filled: true
			}
		)
	);

	trafficChart.add(new JsonLineSeries(() => 
		"/app/api/usage/all/vpn," +
			ChartUtils.daysToResolution(timespanEl.val()) +
			"," + interfacesEl.val() +  
			",rxbps/" + timespanEl.val(), 
			"In", {
				filled: true
			}
		)
	);

	timespanEl.change(() => { 
		trafficChart.setOptions({
			timeUnit: timespanEl.val()
		});
		trafficChart.reload(); 
	});
	
	interfacesEl.change(() => trafficChart.reload());
	
	$('.throughputChartDashboardWidget .refresh-graph').off('click').on('click', () => {
		trafficChart.reload();
		return false;
	});
});

