Google Charts – krótko i na temat. DSP16 – część 14

Chciałem stworzyć wykres, który przedstawia jak dobrze gracz sobie dobrze radzi podczas sezonu. Słyszałem o takich kontrolkach jak wijmo, które umożliwiają tworzenie grafów. Można je używać podobno za darmo, ale trzeba się zarejestrować. Dodatkowo wyświetlane są informacje, że wykres został stworzony dzięki wijmo.

Jednak ja poszukałem innej opcji o której też już kiedyś słyszałem: Google Charts. Bezpłatne, bez żadnych znaków wodnych, dobra dokumentacja – nic tylko używać.

Wszystko działa po stronie klienta. Na początku muszę poinformować przeglądarkę z czego będę korzystać:

Następnie kawałek kodu w którym to będę wyświetlać mój graf:

Od razu po załadowaniu strony chcę wyświetlić graf:

A jak samo tworzenie grafu wygląda? Na początku tworzę tabelę w której będę przechowywać informacje na podstawie których wyświetlony będzie graf.

Pierwszy kolumna przyjmuje dane na oś X.  AddColumn jako pierwszy argument przyjmuje jedną z kilku opcji: string, number, date, datetime, timeofday (więcej tutaj). Jako drugi argument przyjmuje nazwę tej osi. Druga kolumna to już dane które będę wyświetlane na osi Y. W moim przypadku będzie wartość numeryczna opisana nazwą ‚Zdobyte punkty’.

Mam stworzoną tablicę, teraz trzeba dodać do nich wiersze:

Model konwertuje na obiekt JSowy. Następnie dodaje wiesz przy pomocy metody addRow. Do pierwszej kolumny przypisuję date, a do drugiej ilość punktów zdobytych przez gracza.

Następnie definiuję opcje grafu:

Zdefiniowałem jak się ma nazywać graf, jakiego typu ma być kreska na wykresie, gdzie ma byś wyświetlona legenda dla grafu. Jest do dyspozycji wiele opcje, które pozwalają customizować graf.

I dopiero pod sam koniec składam to wszystkie informacje i wyświetlany jest ładny graf:

Całość prezentuje się tak:

 

Powered by: Wordpress