Including a dynamic image, such as a chart, on a web page can be useful and help to express an idea visually and simply. Fortunately, Google provide a useful Chart API (Application Programming Interface) which can be accessed to quickly and easily produce highly customisable charts.

For example, to get a simple pie chart on the screen click on the link below:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,30,10&chs=250×100&chl=Apples|Oranges|Bananas

You may find it produced the following image:

The image is embedded into a web page by making the URL the image source, so for the example above:

<img src=http://chart.apis.google.com/chart?cht=p3&amp;chd=t:60,30,10&amp;chs=250×100&amp;chl=Apples|Oranges|Bananas alt=”Alternative Text” />

In the example above several parameters were passed through:

• cht is the chart type (we use p3 which is a 3d pie chart, we could use just p which is a 2d pie chart)
• chd is the data (we use t:60,30,10 where t: indicates text encoding)
• chs is the image size in pixels (we use 250 by 100)
• chl is the chart labels (we use Apples|Oranges|Bananas where the pipe symbol is the separator)

A number of chart options are available including line charts, pie charts, bar charts, venn diagrams, radar charts and 2d barcodes (QR Codes).

This is the same chart above but shown using various different parameters:

Using the Bar chart parameter cht=bhs

using the Venn diagram parameter cht=v

Using the Google-O-Meter parameter cht=gom

QR codes are interesting as QR code readers are becoming available in mobile devices – so for example a free subscription offer could be made available by letting the user scan an image rather than typing in a long URL. For example the RSS subscription URL for Jason Slater Weblog is http://feeds.feedburner.com/JasonSlaterWeblog but could be shown as

You can read more about the Google Charting API at http://code.google.com/apis/chart/

Further Reading

• Use the Google Chart API to create charts for your web applications
• The Power Of Google Chart API
• Sparklines (Google Analytics Style) with Google Chart API
• 50 Cool Things You Can Do with Google Charts API
• Google Chart API – Chart Generator