Thursday, December 6th, 2007
Use the Google Chart API to create charts for your web applications
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
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!
Bundus, try the jQuery chart-plugin
The limit is per user: “…query limit of 50,000 queries per user per day”
;-(
I thought that it will allow to create charts like charts from google analytic.
…Flot (jQuery plotting plugin) looks good too
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.
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
they’re using the URI to pass in parameters. you run into max uri limits with enough data/config options =|
50k per day & per user are enough !
especially nice and easy to interface
Thanks Google
每天用5万次对我来说足够了（It’s enough for me!）
YES,I’m a google fans!
Hi,
YUI charts look very nice as well
Hi,
I’ve also written some script to build Google Charts. Let me know what you think. Google Charts. Thanks!
I’ve written online builder for Google Charts API too. You can test it: http://charts.hohli.com
very nice, but I like the jQuery plugin more
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.
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
We just used the API to create a really simple .
urghhh, cant type. We just used the API to create a really simple loan repayment calculator.
thanks for this article