Google Charts API – snygga diagram och grafer

Ibland så hittar man ett API som löser ett specifikt problem på ett väldigt enkelt sätt. Via Fredrik Noakssons blog så stötte jag idag på Google Chart API och det är ett mycket användbart API för alla som har en blogg eller som utvecklar webbtjänster och som vill presentera tråkiga siffror på ett snyggt och överskådligt sätt. Med Google Chart API så kan man skapa snygga diagram, grafer och tabeller genom att kalla på en URL.

Exempel
Genom att använda följande URL:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Mashup|API

Så producerar Google Chart API ett snyggt pajdiagram:

Låt oss ta en titt på varje del i detta API anrop:

• http://chart.apis.google.com/chart – URLen till Google Chart API
• cht=p3 – definierar vilken typ av diagram som ska användas, p3 beytder ett 3d pajdiagram, om man bara använder p så blir det istället ett vanligt pajdiagram.
• chd=t:60,40 – diagramets värden, 60% respektive 40%
• chs=250x100 – diagramets storlek i pixlar
• chl=Mashup|API – beskrivningar till de värden som används

Diagramen kan lätt visas som bilder direkt i HTML. Det är bara att kalla Google Chart API från en img tag så här:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Mashup|API" alt="" />

Lägg märke till att alla & bland API parametrarna har ersatts av &.

Diagram, tabeller och grafer
Det finns 8 olika typer av diagram som man kan använda, allt från pajdiagram och stapeldiagram till vektorer och kartor. Varje diagramtyp har ett stort antal parametrar så man har total kontroll över färgval, former, beskrivande texter etc. Här är några olika exempel tagna från Google Chart API Developer’s Guide:

• Google-o-meter
  http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=Hello
  
• Stapeldiagram
  http://chart.apis.google.com/chart?cht=bvs&chs=200x125&chd=t:10,50,60,80,40|50,60,100,40,20&chco=4d89f9,c6d9fd&chbh=20
  
• Venndiagram
  http://chart.apis.google.com/chart?cht=v&chs=200x100&chd=t:100,80,60,30,30,30,10
  
• Kartor
  http://chart.apis.google.com/chart?chco=f5f5f5,edf0d4,6c9642,365e24,13390a&chd=s:fSGBDQBQBBAGABCBDAKLCDGFCLBBEBBEPASDKJBDD9BHHEAACAC&chf=bg,s,eaf7fe&chtm=usa&chld=NYPATNWVNVNJNHVAHIVTNMNCNDNELASDDCDEFLWAKSWIORKYMEOHIAIDCTWYUTINILAKTXCOMDMAALMOMNCAOKMIGAAZMTMSSCRIAR&chs=440x220&cht=t

  
• Grafer
  http://chart.apis.google.com/chart?&cht=ls&chd=t:0,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52&chco=ff0000,00ff00,0000ff&chs=250x150&chdl=NASDAQ|FTSE100|DOW

  

Det finns inga begränsningar på hur mycket man får använda Google Chart API. Det krävs ingen registrering, API nyckel eller liknande. Google Chart API är definitivt ett enkelt sätt att snyggt presentera tråkiga siffror i webbapplikationer och på bloggar.