Usługa Google Chart API służy do generowania wykresów. Parametry wykresu przekazujemy w adresie URL, zwracany wykres jest obrazem PNG. W stosunku do bibliotek stosowanych po stronie serwera (np. ChartDirector, JpGraph) Google Chart API ma dwie ważne zalety: jest niezależna od platformy oraz nie wymaga instalacji żadnego oprogramowania. Biorąc pod uwagę fakt, że dostęp do Google Chart API jest bezpłatny i nieograniczony, z pewnością warto poznać tę metodę generowania wykresów.
08/01/08
Po umieszczeniu na stronie WWW znacznika:
<img src="http://chart.apis.google.com/chart?chs=400x200&cht=p3&chd=t:1,5&chl=Węże|Żółwie" />
otrzymasz wykres przedstawiony na rysunku 1.
Rysunek 1. Pierwszy wykres w Google Chart API
W tak prosty sposób działa usługa o nazwie Google Chart API. Osadzanie wykresów na stronie WWW sprowadza się do przygotowania odpowiedniego adresu URL, który będzie zawierał dane i ustalał właściwości wykresu. Nie wymaga to ani instalacji żadnego oprogramowania ani nawet rejestracji i uzyskiwania kluczy dostępu do usługi. Rozwiązanie takie jest niezależne od platformy sprzętowej i stosowanego oprogramowania. Równie dobrze może być wykorzystywane na statycznych stronach WWW, w skryptach PHP, Perla czy ASP. Dodatkowym plusem jest licencja, która pozwala na wykorzystywanie Google Chart API do dowolnych celów bez ograniczeń transferu.
Działanie Google Chart API możemy sprawdzić w praktyce odwiedzając serwis Google Finance (http://finance.google.com/finance). Wszystkie widoczne tam wykresy są generowane z wykorzystaniem Google Chart API. Jeśli chcesz się dowiedzieć, w jaki sposób wykres został wykonany, to — korzystając z Firefoksa — kolejno:
Wówczas przeglądarka Firefox wyświetli wyłącznie wykres, a w pasku adresu widoczny będzie URL wykresu, zawierający wszystkie parametry (rysunek 3).
Rysunek 2. W Firefoksie menu kontekstowe zawiera opcję Pokaż obrazek
Rysunek 3. W adresie strony zawarte są wszystkie parametry obrazu
Analizując adres użyty w pierwszym przykładzie możemy wyodrębnić następujące fragmenty:
http://chart.apis.google.com/chart?
chs=400x200&
cht=p3&
chd=t:1,5&
chl=Węże|Żółwie
Bazowym adresem usługi Chart API jest więc:
http://chart.apis.google.com/chart
Po nim umieszczamy znak zapytania i serię parametrów oddzielonych znakiem & (ich kolejność może być dowolna). Pierwszy z użytych parametrów ustala wymiary wykresu. Pisząc:
chs=400x200
otrzymamy wykres, który jest obrazem PNG o szerokości 400 i wysokości 200 pikseli.
Wykresy generowane przez Google Chart API zawsze są w formacie PNG. Wymiary obrazów podlegają dwóm ograniczeniom:
Największymi dopuszczalnymi wymiarami są więc: 1000x300, 300x1000, 600x500, 500x600, 800x375 i 375x800.
Drugi parametr cht o wartości p3 ustala typ wykresu. Wykres oznaczany symbolem p3 jest trójwymiarowym wykresem kołowym (ang. pie chart). Kolejny parametr chd definiuje dane wykresu. Zapis:
chd=t:1,5
powoduje, że pierwszy wycinek koła zajmie 1/6 część całości, a drugi — 5/6. Wreszcie ostatni z parametrów:
chl=Węże|Żółwie
zawiera etykiety wycinków koła. Polskie znaki kodujemy w standardzie utf-8.
Jeśli chcesz, by adres:
...chart?chs=400x200&cht=p3&chd=t:1,5&chl=Węże|Żółwie
nie powodował ostrzeżeń podczas walidacji kodu rozszerzeniem HTML Validator przeglądarki Firefox, jako separatora użyj encji & zaś polskie znaki kodowane w UTF-8 zapisz wykorzystując notację %HH:
...chart?chs=400x200&chl=W%C4%99%C5%BCe%7C%C5%BB%C3%B3%C5%82wie
Polskie napisy możesz zakodować wykorzystując w PHP funkcję urlencode():
<?php
echo urlencode('Węże|Żółwie');
?>
lub w JavaScript funkcję escape():
<script type="text/javascript">
alert(escape('Węże|Żółwie'));
</script>
Trzy pierwsze parametry podane w omówionym przykładzie są obowiązkowe i zawsze muszą wystąpić. Są to:
Pozostałe parametry są opcjonalne. Ich występowanie zależy od rodzaju wykresu.
Usługa Google Chart API udostępnia dziewięć rodzajów wykresów. Są to:
Każdy z rodzajów jest identyfikowany parametrem cht. Na przykład diagram Venna będzie miał parametr cht=v, a wykres liniowy — cht=lc lub cht=lxy.
Dane do wykresu mogą być zakodowane na jeden z czterech sposobów nazywanych:
W kodowaniu tekstowym wymieniamy wartości oddzielając je przecinkami. Dopuszczalnymi wartościami są liczby od 0 do 100. Do podziału danych na kilka serii stosujemy znak |:
chd=t:10.0,58.0,95.0|30.0,8.0,63.0
Kodowanie tekstowe ze skalowaniem pozwala podać minimalne i maksymalne wartości w ciągach danych. Dane zakodowane tekstowo (parametr chd=t:) rozszerzamy o parametr chds, który podaje minimalną wartość w ciągu (w przykładzie: -80) oraz wartość maksymalną (w przykładzie: 140):
chd=t:30,-60,110&chds=-80,140
Obliczamy długość przedziału 140 * 80 = 220, a następnie skalujemy podane wartości:
30: 30+80 = 110, 110/220 * 100 = 50 -60: -60+80 = 20, 20/220 * 100 = 9 110: 110+80 = 190, 190/220 * 100 = 86
Zatem podany ciąg możemy przedstawić jako kodowanie tekstowe bez skalowania:
chd=t:50,9,86
W kodowaniu prostym do zapisu wartości liczbowych stosujemy duże i małe litery alfabetu łacińskiego oraz cyfry. Duże litery to wartości od 0 do 25 (A=0, B=1, C=2, ..., Z=25), małe litery kodują liczby od 26 do 51 (a=26, b=27, c=28, ..., z=51), zaś cyfry reprezentują wartości od 52 do 61 (0=52, 1=53, 2=54, ..., 9=61). Najmniejszą liczbą w tym ciągu jest 0, a największą — 61.
Wartość ATB19:
chd=s:ATb19
reprezentuje ciąg 0 (A), 19 (T), 27 (b), 53 (1), 61 (9). Po przeliczeniu:
0/61 * 100 = 0 19/61 * 100 = 31 27/61 * 100 = 44 53/61 * 100 = 87 61/61 * 100 = 100
otrzymamy następujący kod tekstowy:
chd=t:0,31,44,87,100
W przypadku kodowania prostego serie danych oddzielamy znakiem przecinka, np.:
chd=s:ATb19,Mn5tz
Ostatni rodzaj kodowania, kodowanie rozszerzone, do reprezentacji wartości liczbowych wykorzystuje dwuznakowe kombinacje liter, cyfr oraz znaków kropki, przecinka, dywizu i podkreślenia. Oto, w jaki sposób kombinacje znaków odpowiadają wartościom liczbowym:
AA = 0, AB = 1, ... AZ = 25, Aa = 26, Ab = 27, ... Az = 51, A0 = 52, A1 = 53, ... A9 = 61 A- = 62 A. = 63 BA = 64, BB = 65, ... ...
Wartością najmniejszą jest AA (0), a największą .. (4095). Wartości te przeliczamy podobnie jak kodowanie proste, tym razem jednak liczby dzielimy przez 4095.
Parametr:
chd=e:C99AKA
reprezentuje ciąg wartości 189 (C9), 3904 (9A), 640 (KA). Po przeliczeniu:
189/4095 * 100 = 5 3904/4095 * 100 = 95 640/4095 * 100 = 16
ten sam ciąg możemy zakodować tekstowo:
chd=t:5,95,16
Do konwersji danych liczbowych na kodowanie proste można wykorzystać funkcję simpleEncode() przedstawioną na listingu 1. Sposób konwersji tablicy wartości do kodowania prostego, wykorzystujący funkcję simpleEncode() oraz bibliotekę jQuery został przedstawiony na listingu 2.
var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
function simpleEncode(valueArray, maxValue) {
var chartData = ['s:'];
for (var i = 0; i < valueArray.length; i++) {
var currentValue = valueArray[i];
if (!isNaN(currentValue) && currentValue >= 0) {
chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
}
else {
chartData.push('_');
}
}
return chartData.join('');
}
Listing 1. Funkcja simpleEncode()
<head>
<script type="text/javascript">
var valueArray = new Array(0,1,4,43,59,65);
var maxValue = 70;
var kod = simpleEncode(valueArray,maxValue);
var url = 'http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=' + kod;
$(document).ready(function(){
$('img').attr('src', url);
});
</script>
</head>
<body>
<p>
<img src="" alt="" />
</p>
</body>
Listing 2. Konwersja tablicy wartości do kodu prostego
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.
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).
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
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:
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).
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.
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.
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.
| lp. | Przykład |
|---|---|
| 1. | Google Chart API — wszystkie przykłady |
Tabela 1. Przykłady do pobrania
Tabela 2. Adresy