PHP Step Area Charts & Graphs

Download PHP Chart Samples

Step Area charts are like Step Line Chart except that the enclosed area is shaded. Given example shows PHP Step Area Chart along with source code that you can try running locally.

<?php

 $dataPoints = array(
	array("x" => 1167589800000 , "y" => 49505),
	array("x" => 1199125800000 , "y" => 31917),
	array("x" => 1230748200000 , "y" => 25972),
	array("x" => 1262284200000 , "y" => 23337),
	array("x" => 1293820200000 , "y" => 16086),
	array("x" => 1325356200000 , "y" => 13403),
	array("x" => 1356978600000 , "y" => 13820),
	array("x" => 1388514600000 , "y" => 18276),
	array("x" => 1420050600000 , "y" => 17372),
	array("x" => 1451586600000 , "y" => 13008)
 );

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

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	theme: "light2",
	title:{
		text: "Net Energy Generation from Petroleum"
	},
	subtitles: [{
		text: "2007 - 2016"
	}],
	axisY: {
		title: "Generation (In Gigawatt Hour)",
		suffix: " GWh"
	},
	data: [{
		type: "stepArea",
		xValueType: "dateTime",
		xValueFormatString: "YYYY",
		yValueFormatString: "#,##0 GWh",
		dataPoints: <?php echo json_encode($dataPoints); ?>
	}]
});

chart.render();

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

Chart Customizations

You can customize the color of the line and the filled area using lineColor and color properties respectively. Some of the other commonly used customization options include fillOpacity, lineThickness, etc.