Google Chart API - szybkie wykresy na naszą stronę

Czasami zachodzi potrzeba umieszczenia na stronie WWW różnego rodzaju wykresów i prezentacji danych. Oczywiście możemy wygenerować takowe np. w Excelu i wstawić na stronę jako obrazek. Jednak takie rozwiązanie jest mało wygodne: za każdym razem, gdy potrzebujemy uaktualnić dane, musimy na nowo tworzyć odpowiednie grafiki i wysyłać je na serwer.

Oczywiście możemy pokusić się o wygenerowanie wykresu bezpośrednio na serwerze, np. za pomocą takich narzędzi jak pChart, lub wejść na wyższy poziom wtajemniczenia i napisać własnoręcznie generator wykresów. Ale to jest już zadanie dosyć trudne, gdyż wymaga w dosyć dobrym stopniu znajomości PHP i bibliotek GD.

Co więc może zrobić taka Hania, która prowadzi bloga i chce na nim umieścić kolorowe wykresy z ulubionymi filmami anime? Może użyć specjalnego API udostępnianego przez Google, które pozwoli w szybki i prosty sposób zaprezentować różne dane w atrakcyjny sposób.

Za pomocą Google Chart API możemy stworzyć właściwie dowolny wykres: liniowy, słupkowy, kołowy, bąbelkowy, radialny oraz wiele innych. Możemy je dowolnie kolorować, dodawać opisy, legendy, itp. Właściwie jedyne ograniczenie jakie zostaje na nas nałożone, to ilość odsłon wykresu: nie może przekroczyć on 250 000 dziennie, co w przypadku nawet dużego serwisu jest trudne do osiągnięcia.

Pierwszy wykres

Wszystkie wykresy są generowanie dynamicznie, więc każda zmiana danych jest automatycznie widoczna na stronie. Wystarczy, że wkleimy na stronę obrazek i podamy mu odpowiednio skonfigurowaną ścieżkę (atrybut src).

Aby na naszej stronie pojawił się powyższy wykres, wystarczy, że wkleimy poniższy kod:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:10,40&chs=300x150&chl=Hello|World" alt="" />

Adresem bazowym do którego musimy się odwołać, aby wstawić wykres jest http://chart.apis.google.com/chart. Do niego podajemy odpowiednie parametry. W przypadku powyższego obrazka podaliśmy kolejno: rodzaj wykresu, wartości, rozmiar oraz odpowiednie etykiety. Wszystkie parametry oddzielone są znakiem &.

Aby poprawić czytelność, w dalszych przykładach będę pokazywał tylko parametry dodawane do adresu (po znaku ?).

Rodzaj wykresu

Aby zadecydować jakiego typu ma zostać wygenerowany wykres, musimy podać odpowiednią wartość w parametrze cht. I tak przykładowo jeśli w powyższym kodzie zamienimy wartość p3, która odpowiada za wyświetlanie wykresu kołowego w 3D, na p uzyskamy wykres:

cht=p&chd=t:10,40&chs=300x150&chl=Hello|World

Dane źródłowe

Najważniejsza część naszego wykresu, czyli dane źródłowe, ukryta jest w parametrze chd. Google daje nam możliwość wstawiania danych w różny sposób, jednak nas interesuje na razie tylko tryb tekstowy, czyli t.

Rozpoczynamy od wstawienia t:, a następnie podajemy wartości liczbowe, oddzielając je przecinkami. Przykładowo zapis t:20,30,40 oznacza, że wykres ma się składać z trzech wartości, które wynoszą odpowiednio 20, 30 oraz 40.

Jeśli wykres posiada kilka serii (np. wykresy liniowe), oddzielamy jes znakiem | (pionowa kreska).

cht=p&chd=t:20,30,40&chs=300x150&chl=Hello|World

Etykiety tekstowe

Jednak nawet najpiękniejszy wykres będzie do niczego, jeżeli nie będziemy wiedzieć za co odpowiadają poszczególne wartości. Możemy je określić za pomocą parametru chl. Wszystkie nazwy oddzielamy znakiem | (pionowa kreska). Parametr ten jest opcjonalny.

cht=p&chd=t:20,30,40,10,5&chs=300x150&chl=Poniedziałek|Wtorek|Środa|Czwartek|Piątek

W przypadku polskich znaków musimy pamiętać, aby zapisać je w formacie UTF.

Rozmiar wykresu

Możemy również dowolnie zmieniać rozmiar wykresu. Wymiary podajemy w parametrze chs. Najpierw wstawiamy szerokość, a następnie wysokość, oddzielając je znakiem x. Wymiary podajemy w pikselach.

cht=p&chd=t:20,30&chs=200x50&chl=Poniedziałek|Wtorek

Podczas generowania, musimy pamiętać, aby wykres nie posiadał więcej niż 300 000 pikseli. W praktyce mało kiedy będziemy potrzebowali większego wykresu, a jeśli już się to nam przytrafi, możemy napisać do Google, aby przydzielili nam większe limity.

Wykresy liniowe

Aby wstawić wykres liniowy, musimy uzupełnić parametr cht jedną z wartości: lc lub ls. Są to odpowiednio: wykres liniowy wraz z osiami współrzędnych oraz bez osi. Efekty są następujące:

Oczywiście nic nie stoi na przeszkodzie, aby dodać do wykresu kilka serii danych:

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72|80,20,30,15,40,60,45,62

Kolor wykresu

Możemy również dowolnie wpływać na kolor wykresu. Wystarczy, że w parametrze chco podamy kolory w zapisie szesnastkowym, oddzielone znakiem przecinka. Po małej zabawie możemy otrzymać poniższy efekt:

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72|80,20,30,15,40,60,45,62&chco=4D89F9,C6D9FD

Etykieta wykresu

Możemy również dodać do wykresu podpis, czy jak kto woli etykietę. Wystarczy dodać parametr chtt z odpowiednią wartością.

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72&chtt=Sprzedaż+produktów|Stan+na+ten+rok

Musimy pamiętać, aby wszystkie spacje zastąpić znakiem + (plus), a przejścia do nowej linii | (pionowa kreska).

Zauważmy, że wartości na wykresie zostały przeskalowane, aby wszystko się ładnie zmieściło.

Legenda

Do wykresu dobrze jest także dodać legendę, która ułatwi nam identyfikację danych. Nazwy poszczególnych serii podajemy w chdl, oddzielając je pionowymi kreskami.

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72|80,20,30,15,40,60,45,62&chco=4D89F9,C6D9FD&chdl=2008|2009

Wartości na osiach

Dodatkowo do wykresu możemy dodać wartości numeryczne na poszczególnych osiach symetrii. Odpowiada za to parametr chxt. Może on przyjąć różne parametry:

• x – oś x
• y – oś y
• r – prawa strona wykresu

Efekt będzie wyglądał odpowiednio:

Jeśli chcemy, aby na wykresie pojawiło się kilka osi, wystarczy, że oddzielimy je przecinkiem.

Gdy podsumujemy wszystkie dotychczas poznane parametry możemy uzyskać np. taki wykres:

cht=lc&chs=500x300&chd=t:40,60,60,45,47,75|80,20,30,15,40,60&chco=4D89F9,C6D9FD&chdl=2008|2009&chtt=Wykres+sprzedaży+w+pierwszym+kwartale+okresu+rozliczeniowego&chl=Sty|Lut|Mar|Kwi|Maj|Cze&chxt=x,y