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

Google Chart - Hello World

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 and labels
Line chart, with colors, axis labels and gridlines.

Venn diagram
Venn diagram.

Bar chart
Bar chart with colors and legend.

Google-o-meter
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.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • Propeller
  • Reddit
  • StumbleUpon
  • Technorati
  • Yahoo! Buzz
Posted on April 24, 2008 at 3:39 pm by Eldee · Permalink
In: PHP Tutorials · Tagged with: , ,

6 Responses

Subscribe to comments via RSS

  1. Written by udham on October 16, 2008 at 1:02 am
    Permalink

    how to create a chart using google charts in XML ?
    Thank You

  2. Written by Michele Burroughs on November 13, 2008 at 9:51 am
    Permalink

    I need a bar/line chart to show illegal alliens in college getting loans and U.S.citizens going to college getting loans/assistance. Please help.Thank you, Michele Burroughs.

  3. Written by Gregory on July 2, 2010 at 2:37 pm
    Permalink

    Very simple and clear explanation. Thank you.

  4. Written by » Fra SQL over tal til grafik Multimusen.dk on September 30, 2011 at 1:27 pm
    Permalink

    [...] Creating Simple Graphs [...]

  5. Written by sabina on August 13, 2012 at 1:52 pm
    Permalink

    Very good article!!!

  6. Written by Anonymous on September 18, 2012 at 12:44 am
    Permalink

    Hello there! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My web site looks weird when browsing from my iphone 4. I’m trying
    to find a theme or plugin that might be able to fix this issue.
    If you have any recommendations, please share. Many thanks!

Subscribe to comments via RSS

Leave a Reply