Google Charts review

If you are looking to add charts to your PHP pages and haven’t already checked out Google Charts, I recommend you do, I’ve used them in a number of projects to great effect.

Features & Benefits:

  • They are free
  • HTML5 / SVG  based for cross-browser compatibility
  • Well documented
  • Lots of examples in the Chart Gallery, with new types of charts appearing regularly
  • Lots of different configuration options to customize them as much as you should need

Pro tip on PHP usage:

Below is some example PHP code I used to create the chart on this page: http://trabest.com/social-tracking-automotive-brands.  To view the chart just click on the “Graph” to show it.

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“corechart”]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Channel’, ‘Facebook’, ‘Twitter’, ‘Youtube’, { role: ‘annotation’ } ],
<?php echo $chart_output;?>
]);

var options = {
width: 950,
height: 950,
legend: { position: ‘right’, maxLines: 3 },
colors:[‘#3b5998′,’#4099FF’, ‘#c4302b’],
annotations: {},
vAxis: {format: ‘decimal’},
hAxis: {format: ‘decimal’, slantedText: ‘true’},
isStacked: true,
title: “Social Media Brand Audiences”,
};

var view = new google.visualization.DataView(data);

var chart = new google.visualization.ColumnChart(document.getElementById(“columnchart_values”));
chart.draw(view, options);
}
</script>
<div id=”columnchart_values” style=”width: 100%; height: 1000px;”></div>

The $chart_output variable contains data from the database outputted to a formatted string in this format, for example

“[‘Acura’, 921115,119938,20327, ”],[‘Alfa Romeo’, 722300,58712,4745, ”],[‘Aston Martin’, 6471567,825688,62064, ”],…..etc”

Let me know what you think of Google Charts? Is there a better free alternative out there that you use?