Line Chart from JSON - CanvasJS JavaScript Charts

Line Chart from JSON - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

function addData(jsonData) {
	var currentXVal = new Date(jsonData.start).getTime();

	for(var i = 0; i < jsonData.data.length; i++, currentXVal += 5 * 60 * 1000) {
		chart.options.data[0].dataPoints.push({x: currentXVal, y: jsonData.data[i][0]});
		chart.options.data[1].dataPoints.push({x: currentXVal, y: jsonData.data[i][1]});
	}

	chart.render();
}

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Traffic Data"
	},
	toolTip: {
		shared: true
	},
	data: [{
			type: "line",
			name: "In Traffic",
			xValueType: "dateTime",
			xValueFormatString: "hh:mm TT",
			dataPoints: []
		},{
			type: "line",
			name: "Out Traffic",
			xValueType: "dateTime",
			xValueFormatString: "hh:mm TT",
			dataPoints: []
	}]
});

$.getJSON("https://api.myjson.com/bins/n6ikt", addData);