PHP Chart from CSV Data

Download PHP Chart Samples

Charts can be rendered by populating data from CSV. The given example shows how to parse data coming from CSV and render chart. 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,
	exportEnabled: true,
	title:{
		text: "Tuna Production"
	},
	axisY: {
		title: "In metric tons"
	},
	data: [{
		type: "column",
		toolTipContent: "{y} metric tons",
		dataPoints: dataPoints
	}]
});

$.get("https://canvasjs.com/data/gallery/php/tuna-production.csv", getDataPointsFromCSV);
 
//CSV Format
//Year,Volume
function getDataPointsFromCSV(csv) {
	var csvLines = points = [];
	csvLines = csv.split(/[\r?\n|\r|\n]+/);
	for (var i = 0; i < csvLines.length; i++) {
		if (csvLines[i].length > 0) {
			points = csvLines[i].split(",");
			dataPoints.push({
				label: points[0],
				y: parseFloat(points[1])
			});
		}
	}
	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 src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</body>
</html>

Chart Customizations

The width of the data-points can be modified using dataPointWidth property. Some other commonly used customization options include exportEnabled, animationEnabled, theme, etc.