Google Charts API – snygga diagram och grafer
av Andreas Krohn
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:
![](http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Mashup | API) |
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änderp
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<br />
- 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<br />
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.