seohost
pytanie zadane 14 września 2021 w Internet przez użytkownika

1 odpowiedź

odpowiedź 14 września 2021 przez użytkownika

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:

wykres kołowy z dwoma argumentami 

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:

Wykres liniowy 

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:

wykres liniowy

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:

Wykres słupkowy


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:

diagram liniowy 

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...).

...