Wednesday, December 12, 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,10020,30,40,50,60,70,8010,30,40,45,52100,90,40,20,10-15,33,50,55,7&chco=3072F3,ff0000,00aaaa&chls=2,4,1&chm=s,FF0000,0,-1,5s,0000ff,1,-1,5s,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=RailsPHPJava.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:023456789101:0255075100&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:JunJulyAug1:20304050&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:123451:050100&chs=200×125&chf=c,lg,45,ffffff,0,76A4FB,0.75bg,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:JanFebMarJunJulAug1:0255075100&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=FirstSecondThird&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,01,1,01,1,01,4,0&chs=200×125&chxt=x,y&chxl=0:SepOctNovDec1:50100&chg=25,25&chm=b,76A4FB,0,1,0b,224499,1,2,0b,FF0000,2,3,0b,80C65A,3,4,0

0 comments: