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
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:
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:
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.