Wykresy na stronie z Google Charts API

Napisane: Listopad 21st, 2009 | Kategoria: google | Tagi: google, internet | 5 Comments »

Niedawno plątając się po internecie od strony do strony natrafiłem na coś ciekawego – Google Charts API. Od razu spodobał mi się kolejny produkt od Google. Szybkość oraz prostota wdrożenia czynią ten produkt prawdopodobnie najlepszym na rynku. Można z tego korzystać całkowicie za darmo i bez limitów. W artykule tym postanowiłem przedstawić kilka przykładów wykresów generowanych dzięki Google Charts API. Do czego wykresy te mogą się przydać? Kolorowe wykresy zawsze dobrze wpływają na odbiorcę, pozwalają od razu zorientować się w wielkości i różnicach danych.

Google Charts API

Generowanie wykresu polega na utworzeniu odpowiedniego adresu URL, wstawienie go do atrybutu src znacznika <img>. Wykres zostanie przedstawiony w postaci obrazka. Wszystkie dane potrzebne do wygenerowania wykresu Google pobiera z adresu, czyli cała trudność polega na odpowiednim jego spreparowaniu. Początkiem każdego adresu jest „http://chart.apis.google.com/chart?” a reszta to parametry określające wykres. Kolejność podawania argumentów nie ma żadnego znaczenia. Dokumentacja do całego API znajduje się na stronie http://code.google.com/intl/pl/apis/chart/.

1. Wykres liniowy

http://chart.apis.google.com/chart?
chs=450×250
&cht=lxy
&chd=t:0,9,18,27,36,45,54,63,72,81,90,99|32,45,76,98,56,34,87,56,47,56,34,45
&chxt=x,y
&chxl=0:|Sty|Lut|Mar|Kwi|Maj|Cze|Lip|Sie|Wrz|Paź|Lis|Gru|1:|0|200|400|600|800|1000
&chg=9,20
&chtt=Sprzedaż+produktów+firmy

Klika słów wyjaśnienia:

• chs – wymiary obrazka – nie mogą przekraczać 300 tys pixeli łącznie
• cht – typ wykresu; więcej typów można znaleźć w dokumentacji
• chd – najważniejsza część – dane wykresu. Wykres typu „lxy” wymaga 2 serii danych oddzielonych znakiem „|”. Są to współrzędne poszczególnych punktów np. punkt 1 = (0, 32), punkt 2 = (9, 45) itd. Obszar wykresu można traktować jako pole o szerokości 100 jednostek i wysokości 100 jednostek. Ponieważ na wykresie chcemy przedstawić dane dla 12 miesięcy to naszych współrzędnych będzie 12
• chxt – definiuje istnienie skal na osiach. W tym przykładzie zdefiniowane są skale na osiach x i y. Możliwe jest również dodanie skali górnej (t) i prawej (r);
• chxl – definiuje konkretne wartości na skalach: miesiące na pierwszej (właściwie to zerowej) zdefiniowanej w chxt osi (x), oraz wartości na drugiej (osi y)
• chg – definiuje położenie linii pomocniczych do wykresu. Linie pionowe będą co 9 jednostek (ponieważ 100 / 11 ~ 9; dzielimy przez 11 a nie przez 12 ponieważ nie będzie linii pomocniczej dla x = 0), a linie poziome będą co 20 jednostek (pamiętajmy że wysokość wykresu to 100 jednostek dla naszego typu danych)
• chtt – tytuł wykresu, gdzie spacje są zastępowane znakiem „+” a przejście do nowej linii to „|”

2. Wykres liniowy

http://chart.apis.google.com/chart?
chs=450×250
&cht=lxy
&chd=t:9|32,45,76,98,56,34,87,56,47,56,34,45|9|63,53,65,27,83,43,26,29,18,38,64,55
&chxt=x,y
&chxl=0:|Sty|Lut|Mar|Kwi|Maj|Cze|Lip|Sie|Wrz|Paź|Lis|Gru|1:|0|200|400|600|800|1000
&chco=0000FF,d96800
&chm=B,76A4FB,0,0,0|o,0000FF,0,3,15
&chls=1,1,0|3,3,0
&chtt=Sprzedaż+produktów+firmy|w+porównaniu+z+poprzednim+rokiem

Kilka słów wyjaśnienia:

• chd – tym razem definiujemy dwa wykresy dlatego podajemy dwie pary współrzędnych
• chco – kolory kolejnych linii
• chm – wypełnienie pod pierwszym wykresem oraz kropka dla trzeciej wartości wykresu (wartości są liczone od 0)
• chls – definiuje styl linii (grubość i ciągłość)

3. Wykres słupkowy

http://chart.apis.google.com/chart?
chs=320×250
&cht=bvs
&chd=t:85.8,57.5,16.7,5,1.7,_,_,_
&chxt=y
&chxl=0:|0|10|20|30|40|50|60
&chco=D9351C|FAAC02|79D81C|2A9DF0|02AA9D
&chdl=Mozilla|IE|Opera|Chrome|Inne
&chg=0,8.33
&chtt=Udział+przeglądarek+-+10.2009

Kilka słów wyjaśnienia:

• chd – tym razem jest to typ wykresu „bvs”, czyli słupkowy i podajemy wartości kolejnych słupków; dolne podkreślenia oznaczają brak wartości – dodałem je aby rozszerzyć wykres
• chco – kolory kolejnych słupków
• chdl – legenda kolejnych słupków
• chg – tym razem nie chcemy pionowych linii pomocniczych dlatego pierwszy argument ustawiamy na 0; drugi ustawiamy na 8.33 ponieważ 100 / 12 ~ 8.33 (100 jednostek dzielimy na 12 linii)

Podsumowanie

Jak widać w łatwy sposób można wygenerować efektowny wykres bez instalowania niczego na serwerze. Google Charts API wygeneruje go za nas. Nie przedstawiłem tutaj oczywiście wszystkich możliwości generowania wykresów. Jest ich znacznie więcej. Polecam dokumentację, która jest bardzo dobrze napisana z dużą ilością przykładów. Pomocnym narzędziem do generowania wykresów będzie Firebug – rozszerzenie do Firefox’a, dzięki któremu można edytować wykresy „na żywo”. Polecam testowanie możliwości Google Charts API. Naprawdę warto ;-)

---