Google biedt niet enkel de Google Maps API aan, maar ook de Google Charts API. Zoals je wel kunt afleiden uit de naam, kun je met deze API op een snelle en gemakkelijke manier grafieken genereren voor je website.. Van lijngrafieken tot taartdiagrammen, het is allemaal mogelijk met de Google Chart API.

De Google Chart API in werking.

Om de Google Chart API te gebruiken moet je geen grote programmeur zijn, het enige dat je moet doen is een afbeelding (image tag) toevoegen binnen je website met de juiste parameters die je nodig hebt om het gewenste resultaat te bekomen.

Enkele voorbeelden:

Lijndiagram

Staafdiagram

Taartdiagram

Venn-diagram

Scatter plots

Radargrafieken

Dit zijn slechts simpele voorbeelden, maar het is mogelijk om de grafiek volledig naar je eigen hand te maken. De verschillende soorten grafieken kun je terugvinden op http://code.google.com/intl/nl/apis/chart/types.html

Hoe de Google Chart API gebruiken?

Stel, je wil een grafiek met de browsers van alle bezoekers die je website de afgelopen week bezocht hebben, met een overzichtelijke legende. De grafiek zou er kunnen uitzien als volgt:

De image tag van bovenstaande grafiek zou de volgende zijn:

Nu zullen we stap voor stap de parameters van deze grafiek overlopen:

begin van de image tag
cht=bvg	type grafiek bvg = verticale staafdiagram met groepen andere grafiek types
&chs=560x300	afmetingen grafiek De grootst mogelijke ruimte voor grafieken is 300.000 pixels. Aangezien de maximale hoogte of breedte 1000 pixels is, kunnen dit voorbeelden zijn van maximale afmetingen: 1000x300, 300x1000, 600x500, 500x600, 800x375 en 375x800
&chtt=Bezoekers+webbrowsers+Inventis.be +afgelopen+week	grafiek titel tekst die bovenaan de grafiek getoond wordt
&chts=1989c9,18	opmaak titel kleurcode (zonder #) en lettergrootte
&chd=t: 360,240,280,175,230,411,423 |250,320,165,244,312,275,399 |150,122,312,73,215,55,155	data formaat resultaten van browser 1 resultaten van browser 2 resultaten van browser 3 in dit voorbeeld maken we gebruik van text encoding bestaande uit: positieve floating point getallen van nul (0.0) tot honderd (100) gescheiden door een komma minus een (-1) om een ontbrekende waarde op te geven pipe (|) om de verschillende resultaatgroepen te scheiden andere data formaten
&chds=0,500	schaal grafiek minimum- en maximumwaarde van de grafiek op basis van deze uitersten wordt de schaal bepaald
&chxt=x,y,x	positie labels toon labels (tekst) op de verschillende assen mogelijke assen: x = x-as onderaan t = x-as bovenaan y = linker y-as r = rechter y-as
&chxl= 0:|ma|di|wo|do|vr|za|zo |2:|16-22+februari+2009	teksten labels tekst voor labels as 0 (x) tekst voor labels as 2 (x) de verschillende labels worden gescheiden door een | 0: duidt op de eerste as (index &chxt, startende van 0)
&chxr= 1,0,500,50	bereik assen bereik van as 1 (y) loopt van 0 tot 500 in stappen van 50 de verschillende assen worden gescheiden door een |
&chxs= 0,82d2eb,11 |1,0d0d0d,11 |2,1989c9,14	opmaak assen opmaak van as 0 (x) opmaak van as 1 (y) opmaak van as 2 (x) index as (startende van 0), kleurcode (zonder #), tekstgrootte, |
&chxp= 2,50	positionering assen positie van as 2 (x) op 50%, scheiding door |
&chco= 82d2eb,1989c9,5bb9dd	kleuren grafiek (staven) kleurcodes (zonder #) komma gescheiden
&chdl= Internet+Explorer |Firefox |Opera	legende titel van browser 1 titel van browser 2 titel van browser 3 de verschillende items worden gescheiden door een |
&chdlp=r	positionering legende mogelijke posities: b = onderaan de grafiek (horizontaal uitgelijnd) t = bovenaan bv = onderaan (verticaal uitgelijnd) tv = bovenaan r = rechts van de grafiek l = links
&chbh=a,5,15	breedte staven en spatiëring breedte van de staven, afstand tussen de staven en afstand tussen de groepen in dit voorbeeld nemen we als breedte van de staven a zodat de breedte van de staven automatisch berekent wordt op basis van de beschikbare ruimte
&chg=0,10,1,5	gridlijnen grid lijnen op de y-as om de 10% met een lijnlengte van 1 en een spatielengte van 5
&chm= N,82d2eb,0,-1,9 |N,1989c9,1,-1,9 |N,5bb9dd,2,-1,9	markers resultaten worden getoond op staven browser 1 resultaten worden getoond op staven browser 2 resultaten worden getoond op staven browser 3 | gescheiden
" alt="Grafiek" />	einde van image tag

Een eenvoudiger voorbeeld

Bovenstaande weergave is natuurlijk een zeer uitgebreide versie en niet alle functionaliteiten zijn mogelijk bij alle soorten grafieken. Op deze pagina kun je alle functionaliteiten bekijken en zien of het mogelijk is deze te gebruiken op de gewenste grafiek.

Om alle totalen per browser samen weer te geven kunnen we een taartdiagram gebruiken. Het taartdiagram zou er als volgt uitzien:

De image tag van bovenstaande grafiek zou de volgende zijn:

begin van de image tag
cht=p3	type grafiek p3 = 3-dimensionele taartdiagram
&chs=560x200	afmetingen grafiek
&chd=t: 3215,1758,2984	data formaat resultaten van browser 1, browser2, browser3
&chl= Internet+Explorer |Firefox |Opera	labels speficiek voor taartdiagrammen label browser 1 label browser 2 label browser 3 de verschillende labels worden gescheiden door een |
&chco=82d2eb,1989c9,5bb9dd	kleuren grafiek
" alt="Grafiek" />	einde van image tag

Andere functionaliteiten Google Chart API

De Google Chart API kan niet enkel gebruikt worden om grafieken te generen, maar ook voor:

• Kaarten
• Google-o-meter
• QR codes (twee-dimensionale streepjes code) meer informatie

Kaarten

Google-o-meter

QR codes

Meer informatie over de Google Chart API kun je terug vinden op http://code.google.com/intl/nl/apis/chart/ samen met een uitgebreide documentatie over de verschillende soorten grafieken en functionaliteiten.