Thursday, December 6th, 2007

Use the Google Chart API to create charts for your web applications

Category: Component, Google

<p>I love simple APIs, and this one eats the pie. With the Google Chart API you can build a URL that will dynamically create a chart for you. This service is used internally for Google Finance, Google Video, and beyond. Now, anyone can use it!

Although it is simple to use (just a darn URL after all) you will see that there are many options.

Here is just a few charts to show how broad this is:

Line Chart

http://chart.apis.google.com/chart?cht=lxy&chs=200×125&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&chco=3072F3,ff0000,00aaaa&chls=2,4,1&chm=s,FF0000,0,-1,5|s,0000ff,1,-1,5|s,00aa00,2,-1,5

Bar Charts

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

Pie Charts

http://chart.apis.google.com/chart?cht=p3&chd=s:Uf9a&chs=200×100&chl=Rails|PHP|Java|.NET

Venn Diagrams

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

Scatter

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

Solid Fill

http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chs=200×125&chxt=x,y&chxl=0:|Jun|July|Aug|1:||20|30|40|50&chf=bg,s,efefef

Linear Gradient

http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chxt=x,y&chxl=0:|1|2|3|4|5|1:|0|50|100&chs=200×125&chf=c,lg,45,ffffff,0,76A4FB,0.75|bg,s,EFEFEF

Linear Stripes

http://chart.apis.google.com/chart?cht=lc&chd=s:UVVUVVUUUVVUSSVVVXXYadfhjlllllllmmliigdbbZZXVVUUUTU&chco=0000FF&chls=2.0,1.0,0.0&chxt=x,y&chxl=0:|Jan|Feb|Mar|Jun|Jul|Aug|1:|0|25|50|75|100&chs=200×125&chg=100.0,25.0&chf=c,ls,0,CCCCCC,0.2,ffffff,0.2

Legend

http://chart.apis.google.com/chart?cht=v&chs=200×100&chd=t:100,20,20,20,20,0,0&chdl=First|Second|Third&chco=ff0000,00ff00,0000ff

Multiple Axis Labels

http://chart.apis.google.com/chart?chxt=x,y,r,x&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200×125

Fill Area

http://chart.apis.google.com/chart?cht=lc&chd=s:99,cefhjkqwrlgYcfgc,QSSVXXdkfZUMRTUQ,HJJMOOUbVPKDHKLH,AA&chco=000000,000000,000000,000000,000000&chls=1,1,0|1,1,0|1,1,0|1,4,0&chs=200×125&chxt=x,y&chxl=0:|Sep|Oct|Nov|Dec|1:||50|100&chg=25,25&chm=b,76A4FB,0,1,0|b,224499,1,2,0|b,FF0000,2,3,0|b,80C65A,3,4,0

Related Content:

Posted by Dion Almaer at 12:37 pm
19 Comments

++++-
4.1 rating from 126 votes

19 Comments »

Comments feed TrackBack URI

I want to say this is awesome but reading their usage policy it only allows 50,000 uses per 24 hours.

I have been using a Flash Graphing system for the last couple years that does a pretty good job but at the same time its pretty big and bulky and creating anything half-what-useful is a lot of trial and error.

Seeing the above Chart API had me excited, I like the graph look, the way to call it looks nice and easy, lots of functionality available, but the 50K just isnt enough, the application I work on gets well over 100K page loads where graphs are located.

For shame!

Comment by Bundus — December 6, 2007

Bundus, try the jQuery chart-plugin

Comment by DarkRat — December 6, 2007

The limit is per user: “…query limit of 50,000 queries per user per day”

Comment by Les — December 6, 2007

;-(
I thought that it will allow to create charts like charts from google analytic.

Comment by YouNeedJava — December 6, 2007

…Flot (jQuery plotting plugin) looks good too

Comment by Mark Holton — December 6, 2007

It looks nice and has tons of options, but man… the more I look at that I’m sure I’d rip my eyes out of if I had to make some thing really dynamic with it. Prime target for an abstraction.

Comment by Jon Hartmann — December 6, 2007

There are number of other options http://www.smashingmagazine.com/2007/10/18/charts-and-graphs-modern-solutions/
For my application I am going to use heavily twiked dojo charts. The API and functionality very similar to JFreeChart which is good

Comment by Robert — December 6, 2007

they’re using the URI to pass in parameters. you run into max uri limits with enough data/config options =|

Comment by waynep — December 6, 2007

50k per day & per user are enough !

especially nice and easy to interface

Thanks Google

Comment by walou — December 6, 2007

每天用5万次对我来说足够了(It’s enough for me!)

YES,I’m a google fans!

Comment by blankyao — December 6, 2007

Hi,

YUI charts look very nice as well

Comment by Nick — December 11, 2007

very nice, but I like the jQuery plugin more

Comment by textildruck — February 19, 2008

Wondering if the Charts API will ever support anything like GapMinder. Or, will Google develop that into something else. I haven’t heard anything since Google purchased GapMinder a year ago.

Comment by jshell — February 25, 2008

Nice Article,
JonWinstanley very nice online Chart builder,
I had build also a Google Charts Generator you can test it at:
http://chartgen.blogspot.com

Comment by mosheco — March 26, 2008

thanks for this article

Comment by maximeguilbot — April 14, 2008

love the charts

Comment by Aphrodisiac — July 31, 2008

Ran into another free web chart recently, stylechart at http://chart.inetsoft.com

Quite interesting and seems to have much more finer grained control than google charts.

Comment by GL — April 2, 2009

Service http://charts.hohli.com is updated. Test It.

Comment by AntonShevchuk — June 19, 2009

Not free, but great for producing nice charts is Rich Chart Builder. Now with great discount on http://www.softwaregroupbuy.com!

Comment by jellejan — June 14, 2010

Leave a comment

You must be logged in to post a comment.