PHP Range Bar Charts & Graphs

Download PHP Chart Samples

Range Bar Charts are similar to Range Column Chart except that the bars are horizontally placed. Given example shows simple PHP Range Bar Chart. It also includes source code that you can try running locally.

<?php

$dataPoints = array(
	array("label"=> "Piano", "y"=> array(28, 4186)),
	array("label"=> "Trumpet", "y"=> array(165, 988)),
	array("label"=> "Violin", "y"=> array(196, 3136)),
	array("label"=> "Acoustic Guitar", "y"=> array(82, 1397)),
	array("label"=> "Concert Flute", "y"=> array(262, 1976)),
	array("label"=> "4 String Bass Guitar", "y"=> array(41, 262)),
	array("label"=> "Electric Guitar", "y"=> array(82, 1397))
);

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

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "Fundamental Frequency Ranges of few Instruments"
	},
	axisY:{
		title: "Frequency",
		suffix: " Hz",
		logarithmic: true
	},
	toolTip: {
		shared: true,
		reversed: true
	},
	theme: "dark1",
	data: [
		{
			type: "rangeBar",
			indexLabel: "{y[#index]} Hz",
			toolTipContent: "<b>{label}</b>: {y[0]} Hz to {y[1]} Hz",
			dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
		}
	]
});

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

Index labels can be shown for the data-points using the indexLabel property. The placement and orientation of the indexLabels can be customized using indexLabelPlacement and indexLabelOrientation properties. Some other commonly used customization options include indexLabelFontSize, indexLableBackgroundColor, etc.