code-laboratory.com jest blogiem poświęconym w całości programowaniu oraz technologiom internetowym. Znajdziesz tutaj kod, gotowy do wykorzystania w twoich projektach.

Wykresy na stronie z Google Charts API

Napisane: Listopad 21st, 2009 | Kategoria: google | Tagi: , | 6 Comments »

Niedawno plątając się po internecie od strony do strony natrafiłem na coś ciekawego – Google Charts API. Od razu spodobał mi się kolejny produkt od Google. Szybkość oraz prostota wdrożenia czynią ten produkt prawdopodobnie najlepszym na rynku. Można z tego korzystać całkowicie za darmo i bez limitów. W artykule tym postanowiłem przedstawić kilka przykładów wykresów generowanych dzięki Google Charts API. Do czego wykresy te mogą się przydać? Kolorowe wykresy zawsze dobrze wpływają na odbiorcę, pozwalają od razu zorientować się w wielkości i różnicach danych.

Google Charts API

Generowanie wykresu polega na utworzeniu odpowiedniego adresu URL, wstawienie go do atrybutu src znacznika <img>. Wykres zostanie przedstawiony w postaci obrazka. Wszystkie dane potrzebne do wygenerowania wykresu Google pobiera z adresu, czyli cała trudność polega na odpowiednim jego spreparowaniu. Początkiem każdego adresu jest „http://chart.apis.google.com/chart?” a reszta to parametry określające wykres. Kolejność podawania argumentów nie ma żadnego znaczenia. Dokumentacja do całego API znajduje się na stronie http://code.google.com/intl/pl/apis/chart/.

1. Wykres liniowy

wykres

http://chart.apis.google.com/chart?

chs=450×250
&cht=lxy
&chd=t:0,9,18,27,36,45,54,63,72,81,90,99|32,45,76,98,56,34,87,56,47,56,34,45
&chxt=x,y
&chxl=0:|Sty|Lut|Mar|Kwi|Maj|Cze|Lip|Sie|Wrz|Paź|Lis|Gru|1:|0|200|400|600|800|1000
&chg=9,20
&chtt=Sprzedaż+produktów+firmy

Klika słów wyjaśnienia:

  • chs – wymiary obrazka – nie mogą przekraczać 300 tys pixeli łącznie
  • cht – typ wykresu; więcej typów można znaleźć w dokumentacji
  • chd – najważniejsza część – dane wykresu. Wykres typu „lxy” wymaga 2 serii danych oddzielonych znakiem „|”. Są to współrzędne poszczególnych punktów np. punkt 1 = (0, 32), punkt 2 = (9, 45) itd. Obszar wykresu można traktować jako pole o szerokości 100 jednostek i wysokości 100 jednostek. Ponieważ na wykresie chcemy przedstawić dane dla 12 miesięcy to naszych współrzędnych będzie 12
  • chxt – definiuje istnienie skal na osiach. W tym przykładzie zdefiniowane są skale na osiach x i y. Możliwe jest również dodanie skali górnej (t) i prawej (r);
  • chxl – definiuje konkretne wartości na skalach: miesiące na pierwszej (właściwie to zerowej) zdefiniowanej w chxt osi (x), oraz wartości na drugiej (osi y)
  • chg – definiuje położenie linii pomocniczych do wykresu. Linie pionowe będą co 9 jednostek (ponieważ 100 / 11 ~ 9; dzielimy przez 11 a nie przez 12 ponieważ nie będzie linii pomocniczej dla x = 0), a linie poziome będą co 20 jednostek (pamiętajmy że wysokość wykresu to 100 jednostek dla naszego typu danych)
  • chtt – tytuł wykresu, gdzie spacje są zastępowane znakiem „+” a przejście do nowej linii to „|”
2. Wykres liniowy

wykres

http://chart.apis.google.com/chart?

chs=450×250
&cht=lxy
&chd=t:9|32,45,76,98,56,34,87,56,47,56,34,45|9|63,53,65,27,83,43,26,29,18,38,64,55
&chxt=x,y
&chxl=0:|Sty|Lut|Mar|Kwi|Maj|Cze|Lip|Sie|Wrz|Paź|Lis|Gru|1:|0|200|400|600|800|1000
&chco=0000FF,d96800
&chm=B,76A4FB,0,0,0|o,0000FF,0,3,15
&chls=1,1,0|3,3,0
&chtt=Sprzedaż+produktów+firmy|w+porównaniu+z+poprzednim+rokiem

Kilka słów wyjaśnienia:

  • chd – tym razem definiujemy dwa wykresy dlatego podajemy dwie pary współrzędnych
  • chco – kolory kolejnych linii
  • chm – wypełnienie pod pierwszym wykresem oraz kropka dla trzeciej wartości wykresu (wartości są liczone od 0)
  • chls – definiuje styl linii (grubość i ciągłość)
3. Wykres słupkowy

wykres

http://chart.apis.google.com/chart?

chs=320×250
&cht=bvs
&chd=t:85.8,57.5,16.7,5,1.7,_,_,_
&chxt=y
&chxl=0:|0|10|20|30|40|50|60
&chco=D9351C|FAAC02|79D81C|2A9DF0|02AA9D
&chdl=Mozilla|IE|Opera|Chrome|Inne
&chg=0,8.33
&chtt=Udział+przeglądarek+-+10.2009

Kilka słów wyjaśnienia:

  • chd – tym razem jest to typ wykresu „bvs”, czyli słupkowy i podajemy wartości kolejnych słupków; dolne podkreślenia oznaczają brak wartości – dodałem je aby rozszerzyć wykres
  • chco – kolory kolejnych słupków
  • chdl – legenda kolejnych słupków
  • chg – tym razem nie chcemy pionowych linii pomocniczych dlatego pierwszy argument ustawiamy na 0; drugi ustawiamy na 8.33 ponieważ 100 / 12 ~ 8.33 (100 jednostek dzielimy na 12 linii)
Podsumowanie

Jak widać w łatwy sposób można wygenerować efektowny wykres bez instalowania niczego na serwerze. Google Charts API wygeneruje go za nas. Nie przedstawiłem tutaj oczywiście wszystkich możliwości generowania wykresów. Jest ich znacznie więcej. Polecam dokumentację, która jest bardzo dobrze napisana z dużą ilością przykładów. Pomocnym narzędziem do generowania wykresów będzie Firebug – rozszerzenie do Firefox’a, dzięki któremu można edytować wykresy „na żywo”. Polecam testowanie możliwości Google Charts API. Naprawdę warto ;-)


6 komentarze na “Wykresy na stronie z Google Charts API”

  1. 1 tomek napisał(a) 19:57, Listopad 24th, 2009:

    ciekawe przykłady

  2. 2 online napisał(a) 5:31, Grudzień 21st, 2009:

    Tak, pewnie tak jest

  3. 3 lizus napisał(a) 0:03, Styczeń 14th, 2010:

    Świetny blog, oby tak dalej.
    Dodałem do zakładek.
    Powodzenia!

  4. 4 Adamski napisał(a) 20:47, Listopad 18th, 2011:

    super, tylko jeden problem. Nie wyswietla mi opisow obok wykresow ! O co chodzi ? Jakies ograniczenie ?

  5. 5 Kokos napisał(a) 21:21, Grudzień 20th, 2011:

    Jest coś takiego jak Google Playground, tam mozna testowac gotowce.

  6. 6 Luciano napisał(a) 15:49, Kwiecień 21st, 2012:

    : Program spisuje się bdzrao dobrze!Mam kilka sugestii:1) dodanie nowych kolumn obok ceny danego waloru z: wolumenem, ceną minimalną, ceną maksymalną2) dodanie wolumenu rf3wnież dla indeksf3w WIG, WIG20 etc.3) tworzenie wykresu nie jako wycinka zdjęcia z oryginalej strony GPW, ale samodzielnego graficznie wykresu (zdaję sobie sprawę z tego, że to może być duże wyzwanie)Jeszcze raz gratuluję programu! Jest super!Ad 1. Hmm muszę to przemyśleć. Jeśli się pojawi taka potrzeba u większej ilości osf3b to dodam, choć można to zobaczyć na podglądzie.Ad 2. m.gpw.pl nie podaje wolumenu dla indeksf3w.Ad 3. To niestety odpada, nie przewiduje że będę zbierał dane i z nich tworzył wykres. Choćby dlatego, że programik ma być prostym podglądam a nie kombajnem

Zostaw komentarz

  • Anti-Spam Quiz: