jQuery Candlestick Charts from JSON Data using AJAX

Download jQuery Code Samples

JSON data can be used as data source for Charts. It is usually good idea to read JSON data from AJAX request for Candlestick Graphs as they are usually rendered with large number of data points. Apart from JSON, Chart can also be plotted from CSV, XML or text file data. However, you need to parse the data to convert it to format accepted by CanvasJS. The given example shows Candlestick Chart rendered from JSON Data. It also contains source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function() {

var options = {
	animationEnabled: true,
	theme: "light2", // "light1", "light2", "dark1", "dark2"
	exportEnabled: true,
	title: {
		text: "Samsung Electronics Co. Ltd. - November 2017"
	},
	subtitles: [{
		text: "Weekly Averages"
	}],
	axisX: {
		valueFormatString: "DD MMM"
	},
	axisY: {
		includeZero: false,
		prefix: "₩",
		title: "Price",
		valueFormatString: "#0.0,,.M"
	}, 
	legend: {
		dockInsidePlotArea: true
	},
	data: [{
		type: "candlestick",
		showInLegend: true,
		legendText: "Currency in KRW - South Korean Won",
		xValueType: "dateTime",
		yValueFormatString: "₩#,#00.##",
		xValueFormatString: "DD MMM",
		risingColor: "#CBE8C8",
		fallingColor: "#FFCCCC",
		dataPoints: []
	}]
};

$("#chartContainer").CanvasJSChart(options);

$.get("https://canvasjs.com/data/gallery/jquery/samsung-electronics-stock-price.json",function(dps) {
	options.data[0].dataPoints = dps;
	$("#chartContainer").CanvasJSChart().render();
});

}

Related Customization

Export feature can be enabled by setting exportEnabled to true. You can also print the chart using print method. Other commonly used customization options are animationEnabled, exportFileName, etc.

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