«
»

Google Charts

Mała rzecz, a cieszy. :) Google Charts to proste narzędzie on-line do rysowania wykresów. Wykres w tym wpisie powstał właśnie przy użyciu Google Charts.

W odróżnieniu od Google Maps API, przy odwoływaniu się do Google Charts API nie jest wymagany klucz. Samo wywołanie zaś odbywa się przez URL obrazka z wykresem. Prostota, umiar, elegancja. :] Wszystkie parametry są w miarę dobrze opisane w dokumentacji.

W przypadku wykresu Mai serie danych, średnie i wartości na osiach są generowane w locie przez skrypt PHP. Skrypt PHP nie jest szczególnie ciekawy, za to może być wątpliwy stylistycznie, dlatego tutaj go nie będzie. :] Dla potomności, URL wykresu po rozbiciu na poszczególne parametry wygląda mniej więcej tak:

cht=lc

To będzie wykres liniowy,

chxt=x,y

opisywać będziemy oś x i y (można jeszcze nad wykresem i po prawej stronie),

chxl=0:|wartości osi x|1:|wartości osi y

tu trafiają wartości, jakimi mają być opisane osie,

chxp=1,wysokości

wysokości, na jakich mają być umieszczone wartości osi y

chm=linie

definicja poziomych linijek na wykresie,

chdl=opis linii w legendzie

nazwy linii na wykresie,

chdlp=bv

określa, że legenda ma być pokazana pod wykresem, pionowo,

chs=420x500

rozmiar wykresu,

chco=kolory

kolory linii,

chd=t:serie danych

i same dane.

I to zasadniczo wszystko. :)

Dopisałem jeszcze kod generujący tabelkę z przyrostami wagi Mai. Potrzebne było obliczanie średnich dla kilku ostatnich wartości z tablicy. Przeglądałem dokumentację PHP w celu przypomnienia sobie, jak się dostać do ostatniego elementu tablicy, i znalazłem zestaw funkcji end, current, prev, next. W efekcie powstała taka funkcja:

1
2
3
4
5
6
7
function sumtab ($tablica, $i) {
  $suma = end($tablica)-prev($tablica);
  for ($a=1;$a>$i;$a++) {
    $suma += current($tablica)-prev($tablica);
  }
  return $suma;
}

Kursory! :D Niby XXI wiek, a tu kursory. :) Poczułem się, jakbym programował w Basicu. :]

Aha, za takie fajne, zaokrąglone rogi tabelki w Mozilli odpowiada znacznik

-moz-border-radius

w CSSie. ;)

Wstawianie kawałka HTMLa w treść posta w Wordpressie to osobna historia. :/ Kombinowałem z tagami EMBED i OBJECT, ale nie działało to w ogóle albo silnik swawolnie zamieniał wstawioną treść na obiekt Flash. :> Koniec końców użyłem IFRAME.

1
2
3
<iframe src="http://b4.net.pl/ścieżka/do/skryptu.php" width="440" height="520" scrolling="auto" frameborder="0">
[Twoja przeglądarka nie umi wyświetlać ramek! Cozapech!]
</iframe>

Historia mnie osądzi. :]

Ten wpis został opublikowany piątek, Marzec 20th, 2009 o 14:06 i jest zaszufladkowany do kategorii małe wuwu, zrób sobie dobrze sam. Możesz śledzić wszystkie odpowiedzi do tego wpisu poprzezkanał RSS 2.0. Możesz dodać odpowiedź lub trackback ze swojej strony.

8 odpowiedzi do “Google Charts”

  1. Wyścig o Złote Kalesony - suplement — Maja nadaje Says:
    Marzec 20th, 2009 at 14:07

    [...] tutaj Tata opisuje, jak zrobić taki fajny wykres. [...]

  2. dziadek Says:
    Marzec 20th, 2009 at 18:45

    bardzo mondre

  3. Melulu Says:
    Marzec 23rd, 2009 at 10:36

    To jeszcze tylko pozostało Ci rozpracować, czemu Ładnie Zaokrąglona Tabelka[tm] wyświetla się jako Normalna Prostokątna Tabelka[tm] w Operze, a także jako Nienormalna Paskudna Tabelka[tm] w IE. Czyżby premia za posiadanie lepszych przegladarek? ;)

  4. bebe Says:
    Marzec 24th, 2009 at 15:09

    @Melulu:
    Dokładnie. :) Wszystkie atrybuty CSS zaczynające się od “-moz” działają tylko w przeglądarkach na silniku Gecko, czyli po naszemu – w Firefoxie. :] W innych działać mogą, ale to już wyłącznie fantazja ich twórców. Atrybuty “-moz” nie są częścią specyfikacji CSS2 ani żadnej innej.

    Innymi słowy, w przeglądarkach innych niż Firefox tabelka może być paskudna, przy czym poziom paskudności jest właściwie losowy. :]

    Jedyną znaną mi metodą na zrobienie tabelki z zaokrąglonymi rogami, która będzie poprawnie wyświetlana w większości przeglądarek, jest zrobienie rogów jako grafiki. Takie rozwiązanie wprowadza oczywiście całą nową klasę problemów, z którymi trzeba się uporać, i uważam je za nieeleganckie. :]

  5. JaBoJa Says:
    Kwiecień 5th, 2009 at 18:13

    Atrybuty -moz- są zwykle częścią specyfikacji CSS3, tyle że w specyfikacji występują bez -moz- na początku. Inne przeglądarki niestety dodają swoje prefiksy, stąd działające wszędzie (prócz IE ofc) zaokrąglone rogi można uzyskać dopiero gdy wpiszemy kilka deklaracji, np.:

    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;

    Pierwsza deklaracja jest dla Mozilli, druga dla Apple Safari i Google Chrome, trzecia dla Konquerora z KDE, czwarta dla przeglądarek które implementują CSS3 zgodnie ze standardem (bez własnych prefiksów).

    Nie wiem tylko jak jest z Operą.

  6. Melulu Says:
    Kwiecień 7th, 2009 at 21:19

    Dla Opery żaden z powyższych nie działa, sprawdzono empirycznie :)

  7. bebe Says:
    Kwiecień 8th, 2009 at 01:00

    @JaBoJa:
    Dzięki za podrzucenie pomysłu. :) Szybki gugiel wykazał, że do kompletu są jeszcze:
    -o-border-radius
    -icab-border-radius
    odpowiednio dla Opery i dla iCab, cokolwiek by to nie było. Przy okazji sprawdzę, czy ten pierwszy zadziała w wiekowej Operze Melulu.

  8. Melulu Says:
    Kwiecień 9th, 2009 at 10:17

    @bebe:
    Nie działa. Poza tym w jakiej wiekowej – mam zainstalowaną najaktualniejszą dostępną wersję. I nadal nie działa.

Dodaj odpowiedź

Social Slider