Forum.Legalne.info: Google Chart API - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

Google Chart API szybkie wykresy na naszą stronę

#1 Użytkownik jest niedostępny   codecalm 

  • PHP Master
  • Grupa: Użytkownicy
  • Postów: 1752
  • Dołączył: 01-June 06
  • MiejscowośćŁodygowice, Bielsko-Biała

Napisany 15 November 2009 - 11:27 PM

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).

Dodaj obrazek

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 http://chart.apis.google.com/chart. 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:

Dodaj obrazek

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).

Dodaj obrazek

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.

Dodaj obrazek

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.

Dodaj obrazek

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:

Dodaj obrazek Dodaj obrazek

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

Dodaj obrazek

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:

Dodaj obrazek

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ą.

Dodaj obrazek

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.

http://codecalm.pl/p...rts/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:

http://codecalm.pl/p...rts/chart12.png http://codecalm.pl/p...rts/chart13.png http://codecalm.pl/p...rts/chart14.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:

http://codecalm.pl/p...rts/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 codecalm.pl, gdzie znajdziecie wiele ciekawych informacji związanych z tworzeniem stron www.
0

#2 Użytkownik jest niedostępny   riklaunim 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 331
  • Dołączył: 25-September 09

Napisany 16 November 2009 - 02:48 AM

Używałem parę razy PyGoogleChart, biblioteki nakładkowej na GoogleChart w Pythonie. Ogólnie usługa fajna, ale mniej przydatna do bardziej szczegółowych wykresów (lub większych ilości danych)
0

#3 Użytkownik jest niedostępny   danix111 

  • danix webmaster :>
  • Grupa: Użytkownicy
  • Postów: 566
  • Dołączył: 06-August 09
  • GG: 5972719
  • MiejscowośćGdynia

Napisany 16 November 2009 - 03:30 PM

Dzięki, tut się bardzo przydał. :)
Dodaj obrazek
NIE pomagam na PW!
Umiem: HTML, CSS, PHP, SQL, JavaScript, C++, Python (podstawy)
Dodaj obrazek Piszę poprawnie po polsku
0

#4 Użytkownik jest niedostępny   thetruth 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 16
  • Dołączył: 17-October 08

Napisany 16 April 2010 - 09:53 PM

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.
0

#5 Użytkownik jest niedostępny   riklaunim 

  • Zaawansowany
  • Grupa: Użytkownicy
  • Postów: 331
  • Dołączył: 25-September 09

Napisany 16 April 2010 - 11:14 PM

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.
0

#6 Użytkownik jest niedostępny   thetruth 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 16
  • Dołączył: 17-October 08

Napisany 16 April 2010 - 11:20 PM

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.
0

#7 Użytkownik jest niedostępny   thetruth 

  • Rozkręca się
  • Grupa: Użytkownicy
  • Postów: 16
  • Dołączył: 17-October 08

Napisany 18 April 2010 - 07:04 PM

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.
0

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień