Jump to content
Sign in to follow this  
codecalm

Google Chart API

Recommended Posts

Czasami zachodzi potrzeba umieszczenia na stronie WWW różnego rodzaju wykresów i prezentacji danych. Oczywiście możemy wygenerować takowe np. w Excelu i wstawić na stronę jako obrazek. Jednak takie rozwią…zanie jest mało wygodne: za każdym razem, gdy potrzebujemy uaktualnić dane, musimy na nowo tworzyć odpowiednie grafiki i wysyłać je na serwer.

 

Oczywiście możemy pokusić się o wygenerowanie wykresu bezpośrednio na serwerze, np. za pomocą… takich narzędzi jak pChart, lub wejść na wyższy poziom wtajemniczenia i napisać własnoręcznie generator wykresów. Ale to jest już zadanie dosyć trudne, gdyż wymaga w dosyć dobrym stopniu znajomości PHP i bibliotek GD.

 

Co więc może zrobić taka Hania, która prowadzi bloga i chce na nim umieścić kolorowe wykresy z ulubionymi filmami anime? Może użyć specjalnego API udostępnianego przez Google, które pozwoli w szybki i prosty sposób zaprezentować różne dane w atrakcyjny sposób.

 

Za pomocą… Google Chart API możemy stworzyć właściwie dowolny wykres: liniowy, słupkowy, kołowy, bą…belkowy, radialny oraz wiele innych. Możemy je dowolnie kolorować, dodawać opisy, legendy, itp. Właściwie jedyne ograniczenie jakie zostaje na nas nałożone, to ilość odsłon wykresu: nie może przekroczyć on 250 000 dziennie, co w przypadku nawet dużego serwisu jest trudne do osią…gnięcia.

 

 

Pierwszy wykres

 

Wszystkie wykresy są… generowanie dynamicznie, więc każda zmiana danych jest automatycznie widoczna na stronie. Wystarczy, że wkleimy na stronę obrazek i podamy mu odpowiednio skonfigurowaną… ścieżkę (atrybut src).

 

chart1.png

 

Aby na naszej stronie pojawił się powyższy wykres, wystarczy, że wkleimy poniższy kod:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:10,40&chs=300x150&chl=Hello|World" alt="" />

 

Adresem bazowym do którego musimy się odwołać, aby wstawić wykres jest

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
Do niego podajemy odpowiednie parametry. W przypadku powyższego obrazka podaliśmy kolejno: rodzaj wykresu, wartości, rozmiar oraz odpowiednie etykiety. Wszystkie parametry oddzielone są… znakiem &.

 

Aby poprawić czytelność, w dalszych przykładach będę pokazywał tylko parametry dodawane do adresu (po znaku ?).

 

 

Rodzaj wykresu

 

Aby zadecydować jakiego typu ma zostać wygenerowany wykres, musimy podać odpowiednią… wartość w parametrze cht. I tak przykładowo jeśli w powyższym kodzie zamienimy wartość p3, która odpowiada za wyświetlanie wykresu kołowego w 3D, na p uzyskamy wykres:

 

chart2.png

 

cht=p&chd=t:10,40&chs=300x150&chl=Hello|World

 

 

Dane źródłowe

 

Najważniejsza część naszego wykresu, czyli dane źródłowe, ukryta jest w parametrze chd. Google daje nam możliwość wstawiania danych w różny sposób, jednak nas interesuje na razie tylko tryb tekstowy, czyli t.

 

Rozpoczynamy od wstawienia t:, a następnie podajemy wartości liczbowe, oddzielają…c je przecinkami. Przykładowo zapis t:20,30,40 oznacza, że wykres ma się składać z trzech wartości, które wynoszą… odpowiednio 20, 30 oraz 40.

 

Jeśli wykres posiada kilka serii (np. wykresy liniowe), oddzielamy je znakiem | (pionowa kreska).

 

chart3.png

 

cht=p&chd=t:20,30,40&chs=300x150&chl=Hello|World

 

 

Etykiety tekstowe

 

Jednak nawet najpiękniejszy wykres będzie do niczego, jeżeli nie będziemy wiedzieć za co odpowiadają… poszczególne wartości. Możemy je określić za pomocą… parametru chl. Wszystkie nazwy oddzielamy znakiem | (pionowa kreska). Parametr ten jest opcjonalny.

 

chart4.png

 

cht=p&chd=t:20,30,40,10,5&chs=300x150&chl=Poniedziałek|Wtorek|Åšroda|Czwartek|Pią…tek

 

W przypadku polskich znaków musimy pamiętać, aby zapisać je w formacie UTF.

 

 

Rozmiar wykresu

 

Możemy również dowolnie zmieniać rozmiar wykresu. Wymiary podajemy w parametrze chs. Najpierw wstawiamy szerokość, a następnie wysokość, oddzielają…c je znakiem x. Wymiary podajemy w pikselach.

 

chart5.png

 

cht=p&chd=t:20,30&chs=200x50&chl=Poniedziałek|Wtorek

 

Podczas generowania, musimy pamiętać, aby wykres nie posiadał więcej niż 300 000 pikseli. W praktyce mało kiedy będziemy potrzebowali większego wykresu, a jeśli już się to nam przytrafi, możemy napisać do Google, aby przydzielili nam większe limity.

 

 

Wykresy liniowe

 

Aby wstawić wykres liniowy, musimy uzupełnić parametr cht jedną… z wartości: lc lub ls. Są… to odpowiednio: wykres liniowy wraz z osiami współrzędnych oraz bez osi. Efekty są… następują…ce:

 

chart6.pngchart7.png

 

Oczywiście nic nie stoi na przeszkodzie, aby dodać do wykresu kilka serii danych:

 

chart8.png

 

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72|80,20,30,15,40,60,45,62

 

 

Kolor wykresu

 

Możemy również dowolnie wpływać na kolor wykresu. Wystarczy, że w parametrze chco podamy kolory w zapisie szesnastkowym, oddzielone znakiem przecinka. Po małej zabawie możemy otrzymać poniższy efekt:

 

chart9.png

 

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72|80,20,30,15,40,60,45,62&chco=4D89F9,C6D9FD

 

 

Etykieta wykresu

 

Możemy również dodać do wykresu podpis, czy jak kto woli etykietę. Wystarczy dodać parametr chtt z odpowiednią… wartością….

 

chart10.png

 

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72&chtt=Sprzedaż+produktów|Stan+na+ten+rok

 

Musimy pamiętać, aby wszystkie spacje zastą…pić znakiem + (plus), a przejścia do nowej linii | (pionowa kreska).

 

Zauważmy, że wartości na wykresie zostały przeskalowane, aby wszystko się ładnie zmieściło.

 

 

Legenda

 

Do wykresu dobrze jest także dodać legendę, która ułatwi nam identyfikację danych. Nazwy poszczególnych serii podajemy w chdl, oddzielają…c je pionowymi kreskami.

 

chart11.png

 

cht=lc&chs=200x125&chd=t:40,60,60,45,47,75,70,72|80,20,30,15,40,60,45,62&chco=4D89F9,C6D9FD&chdl=2008|2009

 

 

Wartości na osiach

 

Dodatkowo do wykresu możemy dodać wartości numeryczne na poszczególnych osiach symetrii. Odpowiada za to parametr chxt. Może on przyją…ć różne parametry:

x – oś x

y – oś y

r – prawa strona wykresu

 

Efekt będzie wyglą…dał odpowiednio:

 

chart12.pngchart13.pngchart14.png

 

Jeśli chcemy, aby na wykresie pojawiło się kilka osi, wystarczy, że oddzielimy je przecinkiem.

 

 

 

Gdy podsumujemy wszystkie dotychczas poznane parametry możemy uzyskać np. taki wykres:

 

chart15.png

 

 

 

Mam nadzieję, że pokazałem Wam, że Google to nie tylko wyszukiwarka. Za jego pomocą… można w prosty i szybki sposób urozmaicić naszą… stronę internetową….

 

Zapraszam również na

Hidden Content

    Give reaction or reply to this topic to see the hidden content.
, gdzie znajdziecie wiele ciekawych informacji zwią…zanych z tworzeniem stron www.

  • Like 1

Share this post


Link to post
Share on other sites

Mam ogromną… prośbę.

 

Mógłby autor wą…tku pokazać na kilku przykładach jak użyc wykresy google do danych pobieraych z mysql i wyświetlanych za pomocą… php ?

Nie mogę sobie poradzić z wyświetlaniem danych, zamiast nanosić dane na wykres to dla każdej pozycji tworzy mi się oddzielny wykres. Nie wiem też jak oddzielić pobrane dane przecinkami (by pasowało do formatu google API).

 

Dziękuję i czekam na odpowiedź - tutorial.

Share this post


Link to post
Share on other sites

Przetwórz dane przed wygenerowaniem linka - w pętli stwórz np. zestaw danych oddzielonych przecinkiem i po pętli dołą…cz je do URLa. wszystko zależy od struktury danych w twojej bazie danych i wykonaniu podstawowych operacji PHP/dane.

Share this post


Link to post
Share on other sites

Sęk w tym, że to zrobiłem. Ale google API coś tego nie łapie.

 

<?php
$strQuery = "SELECT zawodnik, kupno FROM info_zaw where kraj='pl'";
$result = mysql_query($strQuery) or die(mysql_error());
       while($rs1 = mysql_fetch_array($result)) {

$r1[]=$rs1['kupno'];
}
$rr1=implode(",",$r1);
echo "<img src='http://chart.apis.google.com/chart?cht=bvs&chd=t:".$rr1."&chs=600x300' alt='' />";

echo $rr1; //to wypisuje poprawnie, a linijkę wyżej już na wykresie niczego nie widac przy zmiennej $rr1

?>

 

Zatem jakieś sugestie ? Może coś znaczą…cego pominą…łem w kodzie ? Osie wykresu się wyświetlają…, zatem applet działa. Jednak wykresu nie ma żadnego.

Share this post


Link to post
Share on other sites

Okej poradzilem sobie. Okazalo się ze dane mam zbyt duze by je uwzglednic na wykresie. Troche te wykresy są… mało kompatybilne z roznymi zakresami danych.

 

A pozostajac w temacie Google API, jest mozliwosc opisania osi X jednak by opisy poszczegolnych rubryk byly pionowo ? W sensie ze odwrocone o 90 stopni ? Dlugie podpisy danych nijak nie mieszcza sie pod wykresem.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...