Skapa tabeller och grafer enkelt med Google Charts

2010-05-16

Många produkter, tjänster och API:er Google ger tillgång är vad de själva använder eller troligt använder. Ett exempel är Google Charts med vilken man ganska enkelt kan skapa en stor uppsättning av olika grafer och diagram.

En stor skillnad från de flesta andra verktyg är att graferna skapas via bildlänkar till Google. Fördelar med det kan bl.a. vara:

  • Du behöver inte i detalj engagera dig hur illustrationen ska se ut utan pekar ut storlek, färger och typ av diagram eller graf.
  • Det är inte nödvändigt att lagra en bild utan den skickas från Google till besökaren.
  • Google Charts är väldigt enkelt att lägga till i gränssnitt och presentationer för webbhotell, analysrapporter m.m. för att både presentera data och ge användare möjligt att skapa grafer.
  • Google Charts kan gå att använda till inlägg, i forum m.m. där bilder annars inte går att använda.

Det sista användningsområdet är vad jag uppfattar att Google använder det till för och i ett flertal applikationer.

Att skapa ett enkelt tårtdiagram

Ett enkelt exempel är diagrammet jag använde i analysen av marknadsandelar för display annonsering där följande tårtdiagram illustrerande data:

Koden för diagrammet är en HTML-taggen för bilder - img och blir:

<img src="http://chart.apis.google.com/chart? chs=450x300&chd=t:16.2,12.1,5.5,4.9,2.9,2.4,1.4,0.7,0.7,0.6&cht=p3&chdl=Facebook|Yahoo! Sites|Microsoft Sites|Fox Interactive Media|AOL LLC|Google Sites|Turner Network|Glam Media|eBay|Tagged.com&chco=FFFF10,FF0000" align="center"/>

chs anger storleken på diagrammet och när tårtbitarna anges som exemplet ovan (genom att ange dem med chdl) är det ganska lätt att få en fungerande storlek. Använder man den andra typen av märkning (orden anges då med chl) där text till respektive tårtbit pekas ut med pil behöver bredden vara minst dubbelt så stor som höjden. Här sattes bredden till 450 och höjden till 150:

Till chd anges datat. I de flesta fall kommer det fungera utmärkt att låta Google Charts hantera skalningen men det går också att styra:

Text Format with Custom Scaling | Google Code

chco anger färgerna som ska användas. Om det anges som här FFFF10,FF0000 går den från den ena färgen till den andra. De går också att ange direkt för varje tårtbit i vilket fall det sker enligt t.ex. FFFF10|FF0000|FFFF10 för ett tårtdiagram med tre bitar. Färgerna anges i hex-kod och t.ex. uppslagssidan i Wikipedia kan användas hitta dem för respektive färg i kolumnen Hex code:

Web_colors - X11 color names | Wikipedia

Fler diagram och grafer

Google Charts stödjer en mängd andra grafer och diagram av olika slag. Dessa kan hittas via:

Chart Gallery | Google Code

Bland dessa kan kartdiagram vara intressant t.ex. följande exempel från Map Charts:

Relaterat

Bra sidor för att hitta fler guider och tips för bloggare och tidningar på Nyhetsbloggen är:

Google-tips för bloggar och tidningar | Nyhetsbloggen
Google Nyheter (Google News) | Nyhetsbloggen
Illustrera med foto, filmklipp, kartor, teckningar m.m. | Nyhetsbloggen