jQuery Charts & Graphs from JSON Data Using AJAX

Download jQuery Chart 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.

Read More >>

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
	},
	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.