Google Chart Tools – jak tworzyć ciekawe wykresy

W tym tutorialu zapoznamy się z ciekawym sposobem na generowanie efektywnych wykresów słupkowych, kołowych, liniowych w locie za pomocą Google Chart Tools.
Wykresy mogą być statyczne i interaktywne i zapoznamy się z tworzeniem obu w tym tutorialu.

Statyczne kontra Interaktywne

Mamy do dyspozycji dwa rodzaje wykresów:

• Statyczne Image Charts- używamy adresu URL do pobrania obrazka z wykresem
• Interaktywne Interactive Charts – używamy JavaScript nadając im dynamizmu

Image Charts są łatwe w użyciu, jednak interaktywne są znacznie bardziej elastyczne, ponieważ są ‘wrażliwe’ na zdarzenia, które możemy wykorzystać do interakcji z innymi elementami na stronie.

Jedna z pięciu najłatwiejszych rzeczy na świecie

W istocie dodanie własnego statycznego wykresu na własną stronę sprowadza się do dodania adresu URL.
Jeśli wpiszesz w swojej przeglądarce następujący link:

http://chart.apis.google.com/chart?cht=p3&chs=450x200&chd=t:2,4,3&chl=Tak|Nie|Nie%20wiem&chtt=

Czy%20wiesz,%20ze%2050%%20Polakow%20to%20polowa%20spoleczenstwa?&chco=ff0000

Zobaczysz taki oto wykres:

Możesz teraz dodać ten link jako adres obrazka w kodzie strony:

Czyż nie jest to bajecznie prostą igraszką?

A teraz kilka słów o budowie adresu URL

Parametry wymagane

http://chart.apis.google.com/chart? – główny adres dla wywoływanych wykresów
cht=p3& – typ wykresu – tu kołowy 3D
chs=450×200& – rozmiar wykresu w pikselach dłogość x wysokość
chd=t:2,4,3& – wartości procentowe dla odpowiednich danych

Parametry opcjonalne

chl=Tak|Nie|Nie%20wiem& – etykiety dla odpowiednich danych
chtt=Czy%20wiesz,%20ze%2050%%20Polakow%20to%20polowa%20spoleczenstwa?& – tytuł wykresu
chco=ff0000 – schemat kolorystyczny

I to tyle jeśli chodzi o statyczne wykresy. Manipulując powyższymi parametrami można osiągnąć niesamowite efekty! Do dyspozycji otrzymujemy sporo różnych rodzajów wykresów, które możemy dowolnie kolorować używając schematów od Google lub własnych, a dodając opcjonalne parametry, masz w ręku silne narzędzie!.
Ale zajmijmy się teraz czymś jeszcze bardziej interesującym :)

Wykresy interaktywne

Aby używać interaktywnych wykresów zmienimy nieco podejście. W tym przypadku nie tworzymy adresu URL, tylko korzystamy z skryptu JavaScript. Nie jest to tak proste jak wcześniejsze zadanie, ale trudne też nie.

Wykresy mają różne poziomy interaktywności. Zazwyczaj wykres będzie reagować w określony sposób, na wywołaną akcję. Kliknięciem pokazane podpowiedzi lub animacje to jeden z przykładów, ale naprawdę potężnym narzędziem jest to, że mogą one wywoływać zdarzenia, dla których można zarejestrować wywołania zwrotne. Do takich zdarzeń może być wybranie słupka lub kawałka wykresu kołowego po najechaniu myszką itp.

Formatowanie danych

Aby zobaczyć wykres wszystkie dane muszą wywodzić się z obiektu DataTable.
W zasadzie jest to tabela zbudowana z wierszy i kolumn, gdzie każda kolumna ma zdefiniowane typy danych (ID i etykiety).
Aby odnieść się do konkretnej komórki tabeli należy użyć pary wiersz-kolumna. Wiersz jest zawsze liczbą (numerowanie od zera), kolumna może być liczbą lub identyfikatorem.

Załóżmy, że chcemy wyświetlić wyniki naszej firmy osiągnięte w 2010 roku – na wykresie słupkowym:

Kwartał 2010r.	Zarobki
Kwartał I	308
Kwartał II	257
Kwartał III	375
Kwartał IV	123

Mamy dwie kolumny: pierwsza typu ‘string’ – etykieta każdego słupka, druga typu ‘number’ jest wartością słupka. Mamy cztery rzędy co oznacza, że będą cztery słupki. Eureka!

W jaki sposób umieścić teraz dane w obiekcie DataTable? Oto odpowiedni kod – każda linia jest wyjaśniona później:

//utwórz obiekt DataTable
var dataTable = new google.visualization.DataTable();

//zdefiniuj kolumny
dataTable.addColumn('string','Kwartał 2010');
dataTable.addColumn('number', 'Zarobki');

//zdefiniuj wiersze
dataTable.addRows([['K1',308], ['K2',257],['K3',375],['K4', 123]]);

Jest to jeden ze sposobów tworzenia obiektu DataTable. Pamiętaj, że różne wykresy wymagają różnych danych i różnego ich formatu, więc przed utworzeniem takowego, zapoznaj się ze specyfikacją danego wykresu z Google Chart Tools.

Wizualizacja danych na wykresie słupkowym

W tym pierwszym przykładzie użyjemy wykresu kolumnowego do przedstawienia naszych danych. W galerii Google Visualization, możemy wybrać dowolny typ wykresu, aby zobaczyć dokumentację i przykłady.

Teraz możemy załadować Visualization API za pomocą konstrukcji google.load () funkcja (AJAX API):

    google.load('visualization', '1', {'packages': ['columnchart']});

Drugi parametr ’1′ odnosi się do wersji API do załadowania – 1 to aktualna wersja. ‘Packages’ to tablica z wszystkimi wizualizacjami, z których będziemy korzystać. W tym przypadku, będzie to tylko wykres kolumnowy.

W tym momencie mamy wszystkie potrzebne biblioteki, aby stworzyć obiekt DataTable i wyświetlać nasze wykresy, jednak musimy mieć pewność, że wizualizacja jest w pełni załadowana, w przeciwnym razie dostaniemy kod błędu i nasze wykresy nie będą wyświetlane.

Aby to zrobić rejestrujemy funkcję zwrotną – będzie wywołana gdy wszystkie dane są załadowane.

//ustaw wywoływaną funkcję zwrotną
google.setOnLoadCallback (createChart);

Tak wygląda funkcja createChart() oraz cała struktura strony:

Obiekt chart, tworzony jest w ten sposób

var chart = new google.visualization.ColumnChart (document.getElementById('Chart'));

Argumentem funkcji jest referencja do elementu drzewa DOM, gdzie wyświetlony zostanie wykres tu – div z identyfikatorem Chart.
Następnie definiujemy opcje wykresu – wymiary i nagłówek:

 var options = {width: 400, height: 240, is3D: true, title: 'Zarobki Firmy'};

W efekcie otrzymujemy taki wykres:

Uwaga: Wszystkie zdjęcia są tu statyczne, aby poradnik był dostępny niezależnie od przeglądarki i ustawień JavaScript. Zobacz załączone demo wersji interaktywnej.