Website Charts and Graphs Made Easy with Google Chart API

Lori Halley 10 January 2008 6 comments

The Google Chart API lets you dynamically generate charts and graphs, and easily include those images in your webpage. Several types of image can be generated — line, bar, and pie charts for example.

For each image type you can specify attributes such as size, colors, and labels.

Include a Chart API image in any blog or website page simply by embedding a URL within an <img> tag, in the same way you would place any image that’s hosted on the internet. When the webpage is displayed in a browser, the Chart API renders the chart or graph as a PNG-format image within the web page.

Google Chart API URLs must be in the following format: http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

You must provide at least the following parameters:

  • Chart size
  • Chart data
  • Chart type

All other parameters are optional. You can specify as many parameters as you like — colors, labels, markers and data points, backgrounds, and more — in any order, as long as each is separated from the others with the ampersand (&) character.

For example, for the following URL:

http://chart.apis.google.com/chart?cht=p&chd=t:30,30,20,10,10&chs=350x175&
chco=339966&chl=website|blog|newsletter|email|networking&
chtt=2-dimensional%20pie%20chart

sample 2-dimensional pie chart

the Chart API will return the pie chart at the right. (Note: the URL must be all on one line to work.) 

If you right-click on the image and select Properties, you can view the URL of the chart, and copy it to use in another web page — or modify the URL to create a new image "on the fly."

With just a few keystrokes, for example, the basic pie chart can become a professional-looking 3-dimensional pie chart, like this:

sample 3-dimensional pie chart

http://chart.apis.google.com/chart?cht=p3&chd=t:30,30,20,10,10&
chs=350x175&chco=339966&chl=website|blog|newsletter|email|networking&
chtt=3-dimensional%20pie%20chart

Changing the cht= parameter from p3 to bvg in the URL will present the information as a vertical bar chart. And, with just the addition of a few more numbers, you can compare two sets of data, like this:

sample bar chart with two data sets

http://chart.apis.google.com/chart?cht=bvg&chd=t:30,30,20,10,10|
60,60,60,50,20&chs=350x175&chco=339966,ff9933&chbh=30,0&
chl=website|blog|newsletter|email|networking&chtt=comparison%20bar%20chart

The Google Chart API will also let you create horizontal bar charts, line charts (graphs), and Venn diagrams — all just by changing the URL that generates the image.

Online Tools for Quick and Easy Chart Creation 

If you're pressed for time and need a quick simple chart for your website, here are a few online tools to automate the creation of charts, all using the Google Chart API:

Some of these tools are fairly rudimentary, as the Google Chart API is newly released and developers are just beginning to explore the possibilities. However, playing with these tools will quickly give you a good sense of the possibilities — and a close look at the URLs for the images that they generate will help to demonstrate how it all works. The Google Chart API site itself has comprehensive instructions to fill in the blanks and explain all the options.

 
Want to learn more about how your non-profit organization can make the most of social media on a small budget? Get updates from the Wild Apricot non-profit technology blog by RSS feed or by email, free!

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.
Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Thursday, 10 January 2008 at 10:20 AM

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.

Comments

  • Charts Graphs Articles » Blog Archive » Website Charts and Graphs Made Easy with Google Chart API said:

    Thursday, 10 January 2008 at 9:52 AM
  • Keith Holloway said:

    Monday, 14 January 2008 at 5:48 AM

    Super cool! Thanks for the tip. I wonder if this will work behind a password protected site? I can't see why not...

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Monday, 14 January 2008 at 6:50 AM

    Good question, Keith! Yes, any page that  can pull images from another website (for example, photos on Flickr) will show a Google Chart API-generated image. Normal methods of password protection shouldn't have any effect.

  • Mitchell Allen said:

    Tuesday, 15 January 2008 at 6:03 PM

    You know, I've become desensitized to the Google App of the Day Juggernaut.

    It is a pleasant surprise to see something so useful roll out of the Labs.

    With pictures being worth a thousand words, Chart API should leave some of us speechless. LOL.

    Is there a widget on the horizon for this cool utility? My favorite site from the links above is http://charts.hohli.com/, but a widget that can import data would be awesome.

    Cheers,

    Mitch

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Wednesday, 16 January 2008 at 9:11 AM

    Easy data import is on my wish-list, too, Mitch, but I've not heard credible whispers of anything like that on the horizon just yet.

    In the meantime, however, here's another quick Google Charting Tool to add to the list above: http://www.style.org/chartapi/

  • Anton Shevchuk said:

    Friday, 19 June 2009 at 11:46 AM

    http://charts.hohli.com/ - site updated. Test it

Sorry, this blog post is closed for further comments.