PHP Candlestick Charts from JSON Data using AJAX

Download PHP Chart Samples

You can plot charts using JSON data API. Below example shows Candlestick Chart with data from JSON. It also includes PHP source code that you can try running locally.

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {

var dps = [];
var chart = new CanvasJS.Chart("chartContainer", {
	zoomEnabled: true,
	exportEnabled: true,
	title: {
		text: "Qualcomm Incorporated Stock Price - 2017"
	},
	subtitles: [{
		text : "Try Zooming and Panning"
	}],
	axisX: {
		valueFormatString: "DD MMM"
	},
	axisY: {
		title: "Price",
		interval: 5,
		prefix: "$"
	},
	data: [{
		type: "candlestick",
		name: "Qualcomm Incorporated Stock Price",
		showInLegend: true,
		yValueFormatString: "$##0.00",
		xValueType: "dateTime",
		dataPoints: dps
	}]
});

$.getJSON("https://canvasjs.com/data/gallery/php/qualcomm-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();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/jquery.canvasjs.min.js"></script>
</body>
</html>

Chart Customizations

You can export chart as image using exportEnabled property. You can also export the chart programatically by using the exportChart() method. Some other commonly used customization options are animationEnabled, animationDuration, etc.