What?

For the final post on using the Google chart API, I thought I better look at an actual chart, just for novelty. So the easy example here is the instantly-created pie chart.

Why?

As before, if you don’t have a copy of Excel, OpenOffice Calc or another spreadsheet program to hand, you can still make charts with the chart API. As it creates chats as images, you can also use them instantly on a web page or blog post.

How?

If you’ve followed the other two Google chart API posts in this series, this won’t be difficult. Here’s a pie chart url generated by the API which you can copy and paste into a browser:

http://chart.googleapis.com/chart?cht=p3&chs=380x200&chd=t:40,40,20&chco=BBBB00,BB0000&chl=day|night|other

Here’s the image code you can use on a web page or in a blog post:

<img src="http://chart.googleapis.com/chart?cht=p3&chs=380x200&chd=t:40,40,20&chco=BBBB00,BB0000&chl=day|night|other" />

Here’s the image this produces instantly:

Here’s a quick screencast to explain each part of the code:

Here’s another form you can use if you like to play with the pie chart code and produce instant images which open in a new window:

Here’s the code for the form which you can use if you want to:

<form target="_blank" action="https://chart.googleapis.com/chart" method="POST"><input name="cht" type="hidden" value="p3" /> Size:<input name="chs" type="text" value="380x200" /><p>&nbsp;</p>Data values: <input name="chd" size="50" type="text" value="t:30,40,40" /><p>&nbsp;</p>Colour:<input name="chco" size="50" type="text" value="BBBB00,BB0000" /><p>&nbsp;</p>Data labels: <input name="chl" size="50" type="text" value="day|night|other" /> <input type="submit" value="Create pie chart" /></form>

There’s also a whole host of other types of charts available in the API which work in very similar ways. Take a look at the pages here and if you don’t want to edit the code directly, you can always use the wizard which is here.

Happy charting!