Usługa Google Chart API pozwala na bezpłatne i bez ograniczeń transferowych, tworzenie dynamicznych wykresów, które możesz umieszczać na swoich stronach www lub blogach. Wykresy tworzone są na podstawie podanych danych i wyświetlane w formie obrazkowej (plik PNG).
Tworzenie wykresu za pomocą API Chart, polega na stworzeniu dynamicznego adresu w znaczniku <img> w HTML, który potem wystarczy wkleić w kod źródłowy strony. Poniżej przykłady wykresów z wyjaśnieniem działania.
Wykres kołowy
Stwórzmy wykres kołowy, który będzie składa się z dwóch argumentów.
<img src="https://chart.apis.google.com/chart?cht=p3&chs=350x150&chd=t:70,30&chl=Tak|Nie&chco=cc3300,ffcc66" alt="Wykres kołowy" border="0">
Po osadzeniu powyższego kodu, otrzymasz taki wykres kołowy:
A teraz wyjaśnienie poszczególnych opcji w linku, które odpowiadają za wygląd wykresu, bo reszta znacznika img w HTML jest nam znana.
https://chart.apis.google.com/chart?cht=p3&chs=350x150&chd=t:70,30&chl=Tak|Nie&chco=cc3300,ffcc66
https://chart.apis.google.com/chart - adres URL do API Google Charts
& - separator, oddziela poszczególne opcje
cht=p3 - rodzaj wykresu
chs=350x200 - rozmiar wykresu, wyrażony w pikselach
chd=t:70,30 - wartości procentowe całego wykresu, w tym przypadku to 70% i 30%
chl=Tak|Nie - nazwa argumentów na wykresie
chco=cc3300,ffcc66 - kolory poszczególnych elementów wykresu, które zapisane są w formacie szesnastkowym |
Oczywiście argumentów w wykresie może być więcej, np. z trzema wartościami:
<img src="https://chart.apis.google.com/chart?cht=p3&chs=330x150&chd=t:60,30,10&chl=Tak|Nie|Nie wiem&chco=cc3300,ffcc66,ffffcc" alt="Wykres kołowy" border="0">
efekt:
Wykres liniowy
Oczywiście Google Chart umożliwia utworzenie innych rodzajów wykresów. Teraz narysujmy wykres liniowy.
Kod:
<img src="https://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=t:2,9,15,24,30,35,45&chxt=x,y&chxl=0:|I|II|III|IV|V|&chco=33cc33" alt="Wykres liniowy" />
Efekt:
Tutaj jak widać, w linku doszedł jeden nowy argument
| chxl=0:|I|II|III|IV|V| - opis osi X |
Reszta funkcji, działa podobnie jak w wykresie kołowym.
Teraz wykres z dwoma liniami i zmianą nazw wartości osi Y:
<img src="https://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=t:4,7,13,19,30,36,40,49|60,39,33,23,13,7,1&chxt=x,y&chxl=0:|I|II|III|IV|V|1:|1|2|3|4|5|&chco=33cc33" alt="Wykres z dwoma liniami" />
Efekt:
i tutaj trzeba było dodać, dane drugiej linii;
chd=t:2,9,15,24,30,35,45|60,39,33,23,13,7,1
Dodatkowo zmieniliśmy opis osi Y na swoje własne wartości. Odpowiedzialna jest za do funkcja chxl, w której trzeba było dodać 1: i następnie nazwy osi Y.
chxl=0:|I|II|III|IV|V|1:|1|2|3|4|5|
Wykres słupkowy
Poniżej przykład rysowania wykresu słupkowego.
<img src="https://chart.apis.google.com/chart?cht=bvg&chco=238E23|CD7F32|DBDB70,C0C0C0&chs=300x200&chd=t:80,10,60,35&chxt=x,y&chxl=0:|I kw|II kw|III kw|IV kw||1:|||30|||60|||90" alt="Wykres słupkowy" />
i efekt:
Diagram liniowy
Diagram liniowy może służyć jako przedstawienie graficzne np. notowań spółek giełdowych na przestrzeni lat.
<img src="https://chart.apis.google.com/chart?cht=lc&chco=FF7F00,FF2400,00009C&chs=500x225&chd=s:chhabjbgc,530z82x08,RFVAJVEKG&chxt=x,y&chxl=0:|2019|2020|2021|1:||20||50||100&chco=FF7F00,FF2400,00009C&chdl=spółka 1|spółka 2|spółka 3&chdlp=l" alt="Diagram liniowy" />
efekt:
Tutaj wystąpiła nowa funkcja
|
chd=s:chhabjbgc,530z82x08,RFVAJVEKG |
Gdzie trzy wydawałoby losowe zapisy alfanumeryczne po s:, odpowiadają wartościom linii na diagramie, według schematu:
A do Z - odpowiadają wartościom A = 0, B = 1, ... , Z = 25
a do z - odpowiadają wartościom a = 26, a = 27, ... , z = 51
0 do 9 - odpowiadają wartościom 0 = 52, 1 = 53, ... , 9 = 61
Jak widać rysowanie za pomocą API Google Chart, jest bardzo proste i pozwala wygenerować ładne i czytelne wykresy na strony internetowe. Co ciekawe można ich również użyć w skryptach PHP i wypełniać zmiennymi, które będą dynamicznie zmieniać wygląd wykresów. Wystarczy środku linka zamiast gotowych wartości wkleić nazwy zmiennych z PHP, które będą zawierały odpowiednie wartości.
Przykład:
<img src="https://chart.apis.google.com/chart?cht=p3&chs=350x150&chd=t:$zmienna1,$zmienna2&chl=Tak|Nie&chco=cc3300,ffcc66" alt="Wykres kołowy" border="0">
Co ciekawe taki raz wygenerowany wykres, można zapisać jako obrazek w formacie PNG (Zapisz obraz jako...).
