jQuery Charts & Graphs from JSON Data Using AJAX

Download jQuery Code Samples

Here is an example that shows how to parse data coming from a JSON API and render chart. It also includes HTML / jQuery source code that you can edit in-browser or save to run it locally.

Try Editing The Code

window.onload = function() {

var dataPoints = [];

var options =  {
	animationEnabled: true,
	theme: "light2",
	title: {
		text: "Daily Sales Data"
	},
	axisX: {
		valueFormatString: "DD MMM YYYY",
	},
	axisY: {
		title: "USD",
		titleFontSize: 24,
		includeZero: false
	},
	data: [{
		type: "spline", 
		yValueFormatString: "$#,###.##",
		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
		});
	}
	$("#chartContainer").CanvasJSChart(options);

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

}

Related Customization

You can control the intervals between the axis labels by using the interval property. Some other commonly used customization options are intervalType, xValueType, reversed, logarithmic, etc.

Note   For step by step instructions, follow our jQuery Integration Tutorial