JavaScript OHLC Charts from JSON Data using AJAX

Download JavaScript Code Samples

JSON data can be used as a data source for charts. It is usually good idea to read JSON data from AJAX request for OHLC 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. Given example shows OHLC 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 dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	title: {
		text: "Intel Stock Price - January 2017"
	},
	axisX: {
		valueFormatString: "DD MMM"
	},
	axisY: {
		title: "Price",
		includeZero: false,
		prefix: "$"
	},
	data: [{
		type: "ohlc",
		name: "Intel Stock Price",
		color: "#DD7E86",
		showInLegend: true,
		yValueFormatString: "$##0.00",
		xValueType: "dateTime",
		dataPoints: dps
	}]
});

$.getJSON("https://canvasjs.com/data/gallery/javascript/intel-stock-price.json", parseData);

function parseData(result) {
	for (var i = 0; i < result.length; i++) {
		dps.push({
			x: result[i].x,
			y: result[i].y
		});
	}
	chart.render();
}

}

Related Customization

prefix property of the axis object can be used for setting prefixes in the axis labels. Some other commonly used customization options are color, indexLabel, showInLegend, etc.