Tag: svg

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?