Mało osób wie o funkcjonalności Google Chart. Jest to API do tworzenia wykresów, oferuje naprawdę bardzo dużo możliwości związanych właśnie z rysowanie wszelakich wykresów – kołowych, linowych, słupkowych. W tym artykule przybliżę trochę to API i być może wiele osób zrezygnuje z zaprzęgania do rysowania wykresów PHP’owskiej biblioteki GD.

  1. Wprowadzenie
  2. Rodzaje wykresów
    1. Wykresy liniowe
    2. Wykresy słupkowe
    3. Wykresy kołowe
    4. Wykresy typu Venn
    5. Wykresy składające się z rozrzuconych punktów
    6. Wykresy typu radar
    7. Mapy
  3. Epilog

Wprowadzenie
Generowanie wykresów bazuje na adresie URL i parametrach w nim zawartych.

 Text |  copy code |? 
http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

teraz wyjaśnię co oznaczają poszczególne elementy:

  • http://chart.apis.google.com/chart? – to tu znajduje się nasz wykres
  • & (ampersand) – oddzielamy nim parametry
  • chs=100x50 – oznacza rozmiar wykresu (100 – szerokość, 50 – wysokość)
  • chd=t:10,50 – dane na dostawie których generowany jest wykres
  • cht=p3 – typ generowanego wykresu
  • chl=Witaj|Cześć – jest to opis wykresu

i teraz żeby dany wykres zobaczyć na naszej stronie wygenerowany wykres wstawiamy w tag img:

 HTML |  copy code |? 
<img src="http://chart.apis.google.com/chart?
chs=100x50
&chd=t:10,50
&cht=p3
&chl=Witaj|Cześć" 
alt="Przykładowy wykres" />

Rodzaje wykresów
Rodzaj wykresu ustawiamy za pomocą parametru cht.

Wykresy liniowe
Rozróżniamy trzy rodzaje wykresów liniowych lc, ls i lxy.

Wykres cht=lc
Generujemy go poprzez wpisane niestępujących danych:

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=lc&chs=400x300&chd=t:40,0,60,45,47,75,75,75,3

Jak pewnie zauważyliśmy dane które podajemy są odczytywane z osi Y, na osi X są zaznaczane co pewien taki sam odstęp. W tym rodzaju wykresu pojawiają nam się domyślnie osie.
Zapewne zauważyłeś przed tym jak podajesz dane literkę chd=t, wyjaśnimy na czym polega postawienie właśnie tej literki.

Formaty danych
Do podawania danych zostało przewidziane kilka typów danych:

  • t – dane liczbowe
  • s – zamiast liczb możemy podawać znaki które te liczby reprezentują, oczywiście jest odpowiedni przelicznik
  • e – rozszerzone podawania znaków zamiast liczb, przelicznik

Wykres cht=ls
Działa prawie tak samo jak lc jednak nie pokazuje nam osi.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=ls&chs=400x300&chd=t:40,0,60,45,47,75,75,75,3


oczywiście możemy dodać osie ale o tym później.

Wykres cht=lxy
Najprościej powiedzieć że ten wykres rysuje nam przedziały liczb.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=lxy&chs=400x300&chd=t:10,20,40,80|20,40,30,50,60&chxt=x,y


Widzimy tutaj separator | (kreska pionowa). Dane przed kreską odnoszą się do osi X natomiast po lewej strony kreski do osi Y. Całkiem jak w szkole podawało się punkty (x, y) tu jest tak samo. Generator bierze (10, 20) i zaznacza na wykresie, następnie (20, 40), kolejno (40,30) i (80, 50) i jako widzimy ostatnia współrzędną Y nie ma punktu na osi X więc nie zostanie wyświetlona. Jak widać użyłem parametru chxt=x,y odpowiedzialny jest za rysowanie osi.

Wykresy słupkowe
Rozróżniamy cztery rodzaje wykresów słupkowych bhs, bhg, bvs lub bvg

Wykres cht=bhs
Jest to poziomy wykres słupkowy

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=bhs&chs=400x300&chd=t:5,25,45,65,85


W tym miejscu warto wspomnieć o możliwości kolorowania danych wykresów, odbywa się to za pomocą parametru chco jako argument którego podajemy szesnastkową liczbę kolory jaki chcemy uzyskać.
 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=bhs&chs=400x300&chd=t:5,25,45,65,85&chco=4D89F9


Wykres ten dysponuje jeszcze jedną funkcjonalnością, związaną z wprowadzeniem wielu danych na niego:
 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=bhs&chs=400x300&chd=t:5,25,45,65,85|9,26,45,80,87&chco=4D89F9,C6D9FD


kolejny ciąga danych jak pewnie zauważyliście dodajemy po | (kreska pionowa), no i żeby cokolwiek zobaczyć musimy sobie zdefiniować nowy kolor po przecinku.

Wykres cht=bvs
Wygląda i posiada te same opcje co poprzednik z tym faktem że jest on pionowy.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=bvs&chs=400x300&chd=t:5,25,45,65,85|9,26,45,80,87&chco=4D89F9,C6D9FD

Wykres cht=bhg
Jest to poziomy wykres który grupuje nam wyniki w osobnych słupkach.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=bhg&chs=400x300&chd=t:5,25,45,65,85|9,26,45,80,87&chco=4D89F9,C6D9FD


Łatwo możemy w nim robić różnego rodzaju zestawienia.

Wykres cht=bvg
Działanie jest analogiczne jako poprzednika z tym że jest to wykres pionowy:

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=bvg&chs=400x300&chd=t:5,25,45,65,85|9,26,45,80,87&chco=4D89F9,C6D9FD


Dodatkową funkcją jest możliwość ustawiania grubości, odległości między parami słupków i odległość między poszczególnymi słupkami naszego wykresy za pomocą parametru chbh.
 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=bvg&chs=400x300&chd=t:5,25,45,65,85|9,26,45,80,87&chco=4D89F9,C6D9FD&chbh=10,15,1


Pierwsza liczba reprezentuje grubość każdego słupka należy pamiętać że jeśli ustawi się zbyt dużą grubość wykres może nie mieścić się w rozmiarach przez nas zadeklarowanych. Kolejna odpowiada za rozmiar przestrzeni pomiędzy parami słupków, natomiast ostania ustawia nam słupki w parze o odpowiedni rozmiar.

Wykresy kołowe
Rozróżniamy trzy rodzaje wykresów kołowych p, p3 i pc.

Wykres cht=p
Jest to dwuwymiarowy wykres kołowy.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=p&chs=400x300&chd=t:5,25,45,65,85&chco=4D89F9


Obecnie nie wiemy jakie dane umieściliśmy na tym wykresie, przydałoby się stworzyć jakaś legendę. Pomocny w tym może się okazać parametr chl.
 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=p&chs=400x300&chd=t:5,25,45,65,85&chco=4D89F9&chl=pięć|25|45|65|85


kolejne elementy rozdzielamy | (kreskami pionowymi).

Wykres cht=p3
Jest to trój wymiarowy wykres kołowy, należy pamiętać o odpowiednim ustawieniu wysokości i szerokości aby napisy wyświetlały się poprawnie.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=p3&chs=800x300&chd=t:5,25,45,65,85&chco=4D89F9&chl=pięć|45|65|85

Wykres cht=pc
Wykres ten daje nam możliwość umieszczenia kilku wykresów kołowych w jednym.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=pc&chs=800x300&chd=t:5,25,45,65,85|60,20,10,5,5&chco=4D89F9,000000&chl=pięć25|45|65|85|sześćdziesiąt|20|10|5|5


Wykresy kołowe mają jeszcze jedną własność ustawianą parametrem chp, odpowiadającą z obrócenie wykresu o pewien kąt podawany w radianach.
Tak wyglądał nasz wykres początkowo:
 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=p&chs=400x300&chd=t:5,25,45,65,85&chco=4D89F9


i po obróceniu
 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=p&chs=400x300&chd=t:5,25,45,65,85&chco=4D89F9&chp=2

Wykresy typu Venn (suma zbiorów)
Są to wykresy które przedstawiają nam sumę zbiorów wywoływane przez parametr cht=v. Przyjmują siedem wartości.

  1. rozmiar zbioru A
  2. rozmiar zbioru B
  3. rozmiar zbioru C
  4. liczba z A zawierająca się w B
  5. liczba z A zawierająca się w C
  6. liczba z B zawierająca się w C
  7. liczba A zawierająca się w B zawierająca się w C

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=v&chs=400x300&chd=t:5,25,45,4,2,5,2

Wykresy składające się z rozrzuconych punktów
Aby utworzyć ten wykres podajemy parametr cht=s.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=s&chs=400x300&chd=t:5,25,45,4,2,5|32,5,45,6,42,37|50&chxt=x,y


W miejscu podawania danych pierwsza grupa oznacza współrzędne X, druga współrzędne Y a 3 wielkość poszczególnych kropek.

Wykresy typu radar
Jeśli chodzi o możliwości zaawansowanych wykresów warto w tym miejscu wspomnieć o wykresach typu Radar. Aby istnieją 2 rodzaje takich wykresów przyjmujących argumenty r, rs.

Wykres cht=r
Dane na tym wykresie reprezentowane są poprzez wyświetlenie ich w formie koła (radaru), może to być nie do końca zrozumiałem więc zobaczmy pierw wykres bez osi

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=r&chs=400x300&chd=t:10,20,40,60,80&chco=4D89F9


a teraz z osią
 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=r&chs=400x300&chd=t:10,20,40,60,80&chco=4D89F9&chxt=x,y


jeśli prześledzimy w jaki sposób powstają punkty wszystko będzie jasne.

Wykres cht=rs
Działa dokładnie tak samo jak poprzednik ale można kolorować to co się w nim znajduje.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=rs&chs=400x300&chd=t:10,20,40,60,80&chco=4D89F9&chxt=x,y&chm=B,FF000080,0,1,5


jak widzimy podaliśmy tu dodatkowy parametr chm odpowiedzialny właśnie za możliwość kolorowania. Kolejność przyjmowania argumentów jest następująca:

  1. b lub B – oznacza czy ma być kolorowane na zewnątrz linii czy w środku:w
  2. color – szesnastkowo
  3. index początku
  4. -index końca
  5. -wartość

Dodatkowo do naszego wykresu możemy dorobić siatkę za pomocą parametru chg.

 Text |  copy code |? 
http://chart.apis.google.com/chart?cht=rs&chs=400x300&chd=t:10,20,40,60,80&chco=4D89F9&chxt=x,y&chm=B,FF000080,0,1,5&chg=25,25,4,4


Znaczenie poszczególnych argumentów:

  • krok na osi X
  • krok na osi Y
  • długość linii (długość jednej przerywanej kreski, jeśli 0 to linia ciągła)
  • odległość poszczególnych linii od siebie (jeśli 0 to linia ciągła)

Mapy
Google daje nam również możliwość pokazywania map na stronie. Parametrem odpowiedzialnym za to jest cht=t i chtm=region świata, do wyboru z:

  • africa – afryka
  • asia – azja
  • europe – europa
  • middle_east – środkowy wschód
  • south_america – ameryka południowa
  • usa – stany zjednoczone
  • world – mapa całego świata

 Text |  copy code |? 
http://chart.apis.google.com/chart?chs=440x220&cht=t&chtm=europe&chco=FF00FF&chld=PL


jak widzimy definiujemy tu kolor za pomocą chco no i oczywiście musimy generatorowi wskazać jakie kraje chcemy kolorować, zajmuje się tym parametr chld jako argument którego podajemy kod kraju lub kod stanu USA. Kolejne kraje do zakolorować podajemy następująco: chld=PL|RU.
 Text |  copy code |? 
http://chart.apis.google.com/chart?chs=440x220&cht=t&chtm=europe&chco=FF00FF&chld=PL|RU

Epilog
To może tyle krótkim wstępem, myśle że to narzędzie daje naprawdę bardzo dużo możliowści i pewnie jeszcze nie raz bedzie możliowść napisania kilku rzeczy odnoścnie Google Chart.