JavaScript Charts & Graphs from JSON Data using AJAX

Download JavaScript Chart Samples

JavaScript Charts can be plotted using JSON data API & AJAX. Generally, it’s a good idea to fetch data via AJAX request rather than embedding it in the web page. This way you can separate the UI from Data. It is quite simple to parse JSON data & generate graph from it. In a similar way, you can also use XML or CSV to plot data in the chart. Below example show how to parse JSON data from AJAX request & render chart. It also includes source code that you can edit in-browser or save to run it locally.

Try Editing The Code

Download Copy JSFiddle 
window.onload = function() {

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "Daily Sales Data"
	},
	axisY: {
		title: "Units",
		titleFontSize: 24,
		includeZero: true
	},
	data: [{
		type: "column",
		yValueFormatString: "#,### Units",
		dataPoints: dataPoints
	}]
});

function addData(data) {
	for (var i = 0; i < data.length; i++) {
		dataPoints.push({
			x: new Date(data[i].date),
			y: data[i].units
		});
	}
	chart.render();

}

$.getJSON("https://canvasjs.com/data/gallery/javascript/daily-sales-data.json", addData);

}

Chart Customizations

You can use date-time axis by setting timestamp or date object to x value. If you use timestamp, remember to set xValueType to "dateTime". You can also set interval & interval type for axis labels using interval & intervalType property respectively.