Tworzenie wykresu liniowego przy pomocy Google Chart API.

W pierwszej części stworzyliśmy prostę diagramy kołowe [ zobacz ] teraz czas na wykresy liniowe.


1. Wykres liniowy z jedną linią:

Kod:

<img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=200x100&chd=t:4,7,13,19,30,36,40,49&chxt=x,y&chxl=0:|I|II|III|IV|V|" alt="" />

Efekt:



Wyjaśnienie:

cht=lc - określa nam typ wykresu;

chd=t:4,7,13,19,30,36,40,49 - są to wartości tworzące wykres;

chxl=0:|I|II|III|IV|V| - opis osi X



2. Wykreś liniowy z 2 liniami:

Kod:

<img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=200x100&chd=t:4,7,13,19,30,36,40,49|50,41,33,25,13&chxt=x,y&chxl=0:|I|II|III|IV|V|" alt="" />

Efekt:

Wyjaśnienie:

Różnica miedzy kodem na 2 linie od tego na 1 jest następująca:

chd=t:4,7,13,19,30,36,40,49

chd=t:4,7,13,19,30,36,40,49|50,41,33,25,13

Jak widać aby utworzyć drugą linie wystarczy wstawić znak | i podać wartości

Opisy osi Y czyli 0, 25 ,50, 75, 100 zostały wygenerowane automatycznie, można je jednak też zmodyfikować:

Kod

<img src="http://chart.apis.google.com/chart?cht=lc&amp;chs=200x100&chd=t:4,7,13,19,30,36,40,49|50,41,33,25,13&chxt=x,y&chxl=0:|I|II|III|IV|V|1:||A|B|C|D|E" alt="" />

Jak widac rożnica jest w :

hxl=0:|I|II|III|IV|V|

chxl=0:|I|II|III|IV|V|1:||A|B|C|D|E

Tym razem opis osi X i Y odgradza |1:|

Koniec cz. 2 w następnej przedstawię inne typy wykresów