Google Charts for Web Pages

Google provides the tools for creating nice looking charts to be included in documents or web pages. There are a couple of parameters that need to be included but once you get the hang of it, it is really easy to do. For example, here is a basic pie chart:

And this is the URL that creates the chart:

http://chart.apis.google.com/chart?cht=p3&chs=250×100&chd=t:90,1,9&chl=Windows|Other|Mac

Looks complicated, right? No, not really. We just need to break it down into smaller parts, and once you see how it works, you will be creating online charts very quickly. Here we go…

http://chart.apis.google.com/chart? — This is the location of the Google API code that makes the magic happen [Just add this to the URL and ignore it. If you are really into the code, you can learn more about the API.]

cht=p3 — is the chart’s type [In this example, the type is a three-dimensional pie chart. To make it two-dimensional, change the parameter to just p. Learn more about the different chart types.]

chs=250×100 — is the chart’s size in pixels [Play with the width and height values as needed. The width value is first and the height is second. Learn more about chart size.]

chd=t:90,1,9 — is the chart’s data [In this case, the numbers represent the percentage of computer platform users. Learn more about chart data formats.]

chl=Windows|Other|Mac — is the chart’s label [Double-check to verify that your labels match your data!]

Putting It Together
Okay, now we have the parts. It’s time to put it together! To do this, all we have to add is an ampersand character (&) between each of the parameters. So here goes a different example in bar chart format…

http://chart.apis.google.com/chart?cht=bvs&chco=ff0000|00ff00|0000ff&chbh=20,30&chs=250×100&chd=t:9,1,90&chl=Mac|Other|Windows

And here it is displayed on the web:

For this bar chart example, I added a couple of extra parameters change the color of each data set and to set the spacing between the columns.

How Do I Use Them?
Okay, so now I can create them but what do I do with them?

Well, to copy them for pasting into a document or presentation, just right click and save the image. The Google API generates a .png format.

Or, if you want to embed the chart in a web page, just copy the URL of the image. Then use the following code in your blog, wiki, or web page:

<img src="http://chart.apis.google.com/chart?cht=bvs&chco=ff0000%7C00ff00%7C0000ff&chbh=20,30&chs=250x100&chd=t:9,1,90&chl=Mac%7COther%7CWindows" />

And don’t forget, you can also link the images to other web pages or sites. Mouse over the image below…

Have fun!