PHP Charts & Graphs from JSON Data Using AJAX

Download PHP Chart Samples

CanvasJS Charts can also be rendered using JSON data API. The given example shows populating and parsing data using JSON data API. It also includes PHP source code that you can try running locally.

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

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	zoomEnabled: true,
	title: {
		text: "Bitcoin Price - 2017"
	},
	axisY: {
		title: "Price in USD",
		titleFontSize: 24,
		prefix: "$"
	},
	data: [{
		type: "line",
		yValueFormatString: "$#,##0.00",
		dataPoints: dataPoints
	}]
});

function addData(data) {
	var dps = data.price_usd;
	for (var i = 0; i < dps.length; i++) {
		dataPoints.push({
			x: new Date(dps[i][0]),
			y: dps[i][1]
		});
	}
	chart.render();
}

$.getJSON("https://canvasjs.com/data/gallery/php/bitcoin-price.json", addData);

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

Chart Customizations

The color and thickness of the line can be customized using lineColor and lineThickness properties. Some other frequently used customization options include markerSize, markerBorderColor, markerType, etc.