InsideGoogle

New Google API Serves Charts

Google has this really cool new API that you can use to generate charts. By simply including parameters in a URL, you get a chart image with the chart coming out as whatever type and values you need.

The basic URL format is http://chart.apis.google.com/chart?cht=p3&chd=t:90,49&chs=350x150&chl=Foo|Bar, and you change it up by altering some of the parameters.

There are five types of charts:

Line (by changing cht= to lc):

http://chart.apis.google.com/chart?cht=lc&chd=t:90,49,57,80,23&chs=350×150&chl=Foo|Bar|Foo|Bar|Foo

That creates a chart with only x values for each point on the line. You can create more than one line, and each point is evenly spaced. If you need points that are not evenly spaced and have both x and y values, use lxy instead of lc, like so:

http://chart.apis.google.com/chart?cht=lxy&chd=t:0,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52|100,90,40,20,10|-1|5,33,50,55,7&chs=350×150&chl=Foo|Bar|Foo|Bar|Foo|Bar|Foo

Next up are bar charts, by changing the parameter to bhs for a horizontal bar chart and bvs for a vertical bar chart, plus chco= for the chart colors. Examples:

http://chart.apis.google.com/chart?cht=bhs&chs=200×125&chd=s:HELL,WORL&chco=ff0000,00aa00

http://chart.apis.google.com/chart?cht=bvs&chs=200×125&chd=s:hello,world&chco=cc0000,00aa00&chbh=20

There are also non-stacked side-by-side bars, and different bar widths.

You can also make pie charts, with p, or p3 for 3D pie chart. Take a look:

http://chart.apis.google.com/chart?cht=p&chd=s:world5&chs=200×125&chl=A|B|C|D|E|F

http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=200×100&chl=A|B|C|D

Plus you can get a Venn diagram with the v chart type. What’s a Venn diagram? This:

http://chart.apis.google.com/chart?cht=v&chs=200×100&chd=t:100,80,60,30,30,30,10

And finally, scatter plots, with the s chart type:

http://chart.apis.google.com/chart?cht=s&chd=s:984sttvuvkQIBLKNCAIi,DEJPgq0uov17zwopQODS,AFLPTXaflptx159gsDrn&chxt=x,y&chxl=0:|0|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100&chs=200×125

There are so many ways you can mess with the code, including colors, background fill colors,

Background linear gradients,

Background linear stripes,

Chart titles,

Chart legends,

Different line styles,

and much more. This is really an amazing and capable API. Publishers and app creators should examine all the cool ways they can use this to create amazing charts for their sites. Sadly, it is limited to only 50,000 uses per site per day (and I’m sure the images in this post will stop working after a while). I’m pretty sure someone can figure out how to use Ionut’s image caching Google Gadget and wrap it around your chart to limit gadget API calls, so let me know. Otherwise, use the API to get the chart, then cache it on your server.

If this sounds like something you’d be interested in using for your site, read the documentation to get started.

December 10th, 2007 Posted by Nathan Weinberg | General | one comment