1   2   3   4   5   6 

Google Chart API — prosty sposób umieszczania wykresów na stronach WWW

6. Przykłady

6.1 Przykład pierwszy

Rysunek 4. Tytułu wykresu ustalamy parametrami chtt oraz chts, a kolory — parametrem chco

Wykres widoczny na rysunku 6 ma parametry:

cht=bvs
chd=s:YUVmw1
chco=0000FF
chs=200x100
chtt=Poziom+sprzeda%C5%BCy
chts=00aaFF,16
chbh=20,8

Jest to wykres słupkowy pionowy (cht=bvs) o wymiarach 200x100 (chs=200x100), którego dane zostały zakodowany w sposób prosty (chd=s:). Słupki mają szerokość 20 pikseli i są odległe od siebie o 8 pikseli (chbh=20,8). Kolor słupków jest niebieski (chco=0000FF). Tytuł wykresu jest ustalony parametrami chtt oraz chts. Pierwszy z nich zawiera tekst Poziom sprzedaży (spacje kodujemy znakiem +), a drugi ustala kolor (00aaFF) oraz wielkość czcionki (16 pikseli).

Tytuł wykresu jest ustalony parametrem chtt.

6.2 Przykład drugi

Rysunek 5. Modyfikacja tła i grubości linii

Wykres liniowy z rysunku 5 powstaje po ustaleniu następujących parametrów:

cht=lc
chs=400x300
chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp
chco=FF0000
chls=6
chxt=x,y
chxl=0:|Jun|July|Aug|1:||20|30|40|50
chf=bg,s,efefef

Linia wykresu ma grubość 6 pikseli (chls=6) i czerwony kolor (chco=FF0000). Wykres ma etykiety obu osi (chxt=x,y). Treść etykiet jest ustalona w parametrze chxl. Tło obrazu jest wypełnione szarym kolorem (chf=bg,s,efefef).

6.3 Przykład trzeci

Rysunek 6. Wielokrotne serie danych i markery

Wykres liniowy z rysunku 6 ma parametry:

cht=lxy
chs=500x300
chd=t:10,30,60,70,90,95,100|20,30,40,50,60,70,80|10,30,40,45,52|30,90,40,20,10|-1|5,33,50,55,7
chco=3072F3,ff0000,00aaaa
chls=2,4,1
chm=s,FF0000,0,-1,8|c,0000ff,1,-1,15|a,00aa00,2,-1,5

Parametr chd definiuje trzy serie danych, zakodowane tekstowo. Pierwszą serię tworzą punkty o współrzędnych:

(10,20) (30,30) (60,40)
(70,50) (90,60) (95,70)
(100,80)

Powstają one przez połączenie dwóch pierwszych ciągów: 10,30,60,70,90,95,100 oraz 20,30,40,50,60,70,80.

Drugą serię tworzą punkty:

(10,30) (30,90) (40,40) ...

Natomiast punkty trzeciej serii są równo oddzielone na osi X (wartość -1). Ich wartości na osi Y to 5,33,50,55,7.

Kolory i grubość poszczególnych linii wykresu ustalamy parametrami chco oraz chls.

Ostatni parametr chm definiuje markery umieszczone na liniach wykresu. Typ markera oznaczamy literą, np. s jest prostokątem, c — krzyżykiem, zaś a — strzałką. Parametr:

a,00aa00,2,-1,5

definiuje marker w kształcie strzałki (a), koloru zielonego (00aa00) dla drugiej serii danych. Markery będą umieszczone na wszystkich punktach serii danych (wartość -1). Marker będzie miał rozmiar 5. Jeśli zechcesz umieścić jeden marker w kształcie krzyżyka czerwonego koloru o wielkości 12 pomiędzy trzecim a czwartym punktem piątej serii danych użyj parametru:

c|ff0000|5|3.5|12

6.4 Przykład czwarty

Rysunek 7. Wykres bąbelkowy z gradientem w tle

Przykład czwarty, przedstawiony na rysunku 7, prezentuje wykres bąbelkowy. Parametrami wykresu są:

cht=s
chs=400x300
chd=t:10,20,60,90|10,60,5,90|100,40,60,90
chxt=x,y
chxl=0:|0|1|2|3|4|5|6|7|8|9|10|1:|0|25|50|75|100
chm=o,000000,1,-1,30
chf=c,lg,90,76A4FB,0.5,ffffff,0|bg,s,EFEFEF

Trzy serie danych wykresu interpretujemy jako cztery następujące punkty:

Maksymalna wielkość punktu jest ustalana parametrem chm. Punkty będą okręgami (o) koloru czarnego (000000) o maksymalnej wielkości 30 pikseli.

Tło wykresu i gradient są ustalone parametrem chf. Cały obraz ma jednolite tło o kolorze szarym (bg,s,EFEFEF). Natomiast obszar wykresu jest wypełniony liniowym gradientem :

c      - obszar wykresu
lg     - gradient liniowy
90     - kąt gradientu (gradient pionowy)
76A4FB - kolor początkowy gradientu
0.5    - gradient rozpoczyna się w połowie wykresu
ffffff - kolor końcowy gradientu
0      - gradient trwa do dolnej krawędzi wykresu

Wykres zawiera etykiety obu osi (chxt). Liczby wyświetlane na osiach są dwoma seriami danych zdefiniowanymi parametrem chxl:

6.5 Przykład piąty

Rysunek 8. Legenda i styl linii

Na rysunku 8 przedstawiony jest wykres liniowy z legendą. Użyte parametry to:

cht=lc
chs=400x300
chd=s:93zy...
chls=3,6,4|1,1,0
chdl=Niebieskie|Czerwone
chco=0000ff,ff0000
chxt=x,y

Legendę dodajemy parametrem chdl zaś styl linii ustalamy parametrem chls. Wartość 3,6,4 to pogrubiona linia przerywana. Grubość linii wynosi 6, pojedyncza kreska ma 6 pikseli, a przerwa między kreskami — 4 piksele. Druga linia ma grubość 1 i jest ciągła (1,1,0).

6.6 Przykład szósty

Rysunek 9. Podwójny wykres słupkowy z siatką

Wykres umieszczony na rysunku 6 powstał przy użyciu parametrów:

cht=bhs
chs=400x400
chd=t:10,40,60|10,15,30
chco=4d89f9,c6d9fd
chg=10,20,1,4
chxt=y,x
chxl=0:|Marzec|Luty|Styczeń|1:|0|20|40|60|80|100
chbh=60,40

Dwie serie danych służą do ustalenia wysokości słupków. Pierwsza seria definiuje wysokości ciemniejszych fragmentów słupków, a druga — jaśniejszych.

Siatka wykresu jest rysowana dzięki parametrowi chg. Poziome odstępy wynoszą 10, a pionowe — 20. Linia siatki jest przerywana w stosunku 1 do 4.

6.7 Przykład siódmy

Rysunek 10. Wykres radarowy

Wykres radarowy z rysunku 10 ma parametry:

cht=r
chs=400x400
chd=t:77,66,15,0,31,48,100,77|20,36,100,2,0,100
chco=FF0000,FF9900
chls=2.0,4.0,0.0|2.0,4.0,0.0
chxt=x
chxl=0:|0|45|90|135|180|225|270|315
chxr=0,0.0,360.0
chg=25.0,25.0,4.0,4.0
chm=B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0

Linia o kolorze czerwonym obrazuje pierwszą serię danych, a pomarańczowa — drugą. Obszary czerwony i pomarańczowy są zaznaczone parametrem chm. Wartości kolorów zawierają trzy składowe oraz kanał alfa, dzięki czemu wypełnienie jest nieco przezroczyste. Pierwszy z kolorów FF000080 to kolor czerwony (FF0000) o przezroczystości 80.

6.8 Przykład ósmy

Rysunek 11. Mapa Europy

Mapa przedstawiona na rysunku 11 ma parametry:

cht=t
chs=440x220
chd=s:Af9
chco=ffffff,ffdfbf,512800
chld=PLDEFR
chtm=europe
chf=bg,s,EAF7FE

Mapa przedstawia Europę (chtm). Kolor morza ustalamy parametrem chf. Kody państw, które należy pokolorować są zawarte w parametrze chld. Pokolorowano Polskę (PL), Niemcy (DE) i Francję (FR). Wszystkie pozostałe Państwa mają kolor biały, o czym decyduje pierwsza z wartości ffffff parametru chco. Kolor państw PL, DE oraz FR zależy od wartości parametrów chco oraz chd. W parametrze chco ustalamy gradient liniowy przebiegający od koloru ffdfbf do koloru 512800. Poszczególne państwa będą pokolorowane jednym z odcieni tego gradientu. Nasycenie gradientu zależy od wartości chd.

Kolor Polski jest wyznaczony przez wartość A, która w kodowaniu prostym jest równa 0. Zatem Polska jest pokolorowana kolorem startowym gradientu.

Kolor drugiego kraju, Niemiec, powstaje jako 31/61 nasycenie gradientu, gdyż litera f w kodowaniu prostym to właśnie 31, a największą wartością jest 61.

Kolorem Francji jest zdefiniowany w ciągu danych cyfrą 9, która w kodowaniu prostym ma wartość 61. Otrzymujemy więc ułamek 61/61, czyli 1. Francja jest więc pokolorowana ciemniejszym kolorem gradientu.

Największy możliwy wymiar mapy wynosi 440x220 pikseli.

 1   2   3   4   5   6