Creating simple graphs using Google Charts API
Thinking back a fews years ago, I was involved in building some reporting modules with graphs and charts to show our customer utilisation of our data center. After trying a number of different open source graphing packages for PHP, I finally found JpGraph, which I daresay is probably the best graphing package available for PHP. (In my experience anyway.)
However, JpGraph requires other dependencies like GD libs - the kind of thing which we may not always have control over if we host with web hosting providers. Thankfully, there’s now a simple and easy way of building simple good looking graphs with just an <img> tag.
Back in December 2007, Google launched Google Charts API - a simple tool that lets us create charts and embed them into our webpages.
Google Charts was originally meant as an internal tool for rapidly embedding charts and graphs into their own applications like Google Finance etc. But they decided to open it up to the public web developers. Why? Who really knows.
In any case, Google Charts is available for anyone to take advantage of, to incorporate into their own applications.
This is how you use it.
You basically just call the Google Chart URL within your <img> src property with the appropriate parameters and Google Chart will draw up the graph and show it to you as a png image type.
The Google Chart URL looks like this,
http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100 &chl=Hello|World
You’ll put it inside an <img> src, like this
<img src="http://chart.apis.google.com/chart?cht=p3&chd=s:hW &chs=250x100&chl=Hello|World" />
and it will draws up the pie chart
It’s really that simple.
Let’s examine the URL in detail
http://chart.apis.google.com/chart? - is the URL to the Chart API & - separates the parameters cht=p3 - specifies the chart type chs=250x100 - specifies the dimensions of the image chd=t:60,40 - specifies the chart data to use chl=Hello|World - specifies the label to use
The chart type (cht), chart size (chs) and chart data (chd) parameters are mandatory in order for a chart to be rendered. All other parameters are optional. You can find the full documentation at Google Code.
Here are some more examples of what the Google Charts API can render. To view the URL of the images just “Right-click Properties” in IE, or “View Image” in Firefox over the image.
Line chart, with colors, axis labels and gridlines.
Venn diagram.
Bar chart with colors and legend.
Google-o-meter with colors and labels
And many many more.
Ryon Sherman has also developed a PHP classes which encapsulates this API, you find the Google Graph class at phpclasses.org.
It has been discovered that not all parameters have been enabled for the public to use. But what’s been made available is certainly sufficient for whatever you’re likely to encounter for decent application development.
- A look at the Google Graph class
- First look at CakePHP
- ‘Cool kids’ ARE using PHP and Ruby!
- Webmaster tools I can’t live without
- Using XAMPP Lite for PHP scripting