jQuery Charts & Graphs from JSON Data Using AJAX

Download jQuery Chart Samples

jQuery Charts can be plotted easily using JSON data API. You can also use CSV or XML to plot data in the chart. Below example shows how to parse JSON data & render chart in jQuery. It also includes HTML 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
	},
	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);

}

Chart Customizations

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