Wykresy w JavaScript i HTML5

javascript-html5-tutorial.pl

12 maja, 2014

Dominik-W

Podczas pracy przy różnych projektach, czasami zachodzi potrzeba wyświetlania danych w postaci wykresów. Dzisiaj pokazanie wykresu w przeglądarce nie jest większym problemem. Możemy sami opracować rozwiązanie, jak i skorzystać z gotowych i przetestowanych.

Tworzymy wykresy w JavaScript i HTML5

Zróbmy więc mały przegląd godnych uwagi rozwiązań.

jqPlot

Jest dość prostym w użyciu pluginem o dużych możliwościach.

W celu uruchomienia przykładu, dołączamy skrypty jqplot.canvasTextRenderer.min.js oraz jqplot.canvasAxisLabelRenderer.min.js i dodajemy kod JavaScript rysujący wykres:

$(document).ready(function() {
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

Podajemy parametry: ID elementu canvas oraz tablicę punków.

Do dyspozycji mamy m.in. wykresy liniowe, słupkowe, kołowe, punktowe, etykiety dla osi i opcji, wczytywanie danych z JSON (Ajax), zooming i inne.

Dokumentacja oraz więcej przykładów na stronie projektu:

http://www.jqplot.com/docs/files/usage-txt.html

http://www.jqplot.com/tests/

Kolejne rozwiązanie, które z powodzeniem stosowaliśmy, oparte jest o bibliotekę Dojo.

Framework Dojo Toolkit oferuje zarówno podstawowe:

http://dojotoolkit.org/documentation/tutorials/1.9/charting/

jak i zaawansowane:

http://dojotoolkit.org/documentation/tutorials/1.9/charting_advanced/

możliwości tworzenia wykresów.

Jak można się spodziewać w przypadku Dojo, dostajemy kompletną skrzynkę narzędziową do wykonania zadania.

rGraph

To interesująca biblioteka pozwalająca tworzyć efektowne wykresy w HTML5 i JavaScript. Dostępna na licencji MIT.

Posiada różnego rodzaju wykresy, również nietypowe, np.:

Bogactwo przykładów zaprezentowane na stronie projektu:

http://www.rgraph.net/examples/index.html

Chart.js

Jest to zaawansowana biblioteka o bogatych możliwościach. Zarówno developerzy jak i designerzy bez problemu użyją jej w swoich projektach.

Strona projektu:

http://www.chartjs.org/

Więcej?

Jeżeli szukasz czegoś innego, być może ten zbiór 30 narzędzi pomoże:

http://codegeekz.com/30-best-tools-for-data-visualization/

Podsumowanie

Jak zatem widać, nie brakuje rozwiązań dobrej jakości, dzięki którym możemy bez większych problemów umieszczać wykresy na naszych stronach i w aplikacjach WWW. Z pewnością każdy znajdzie coś dla siebie.

Dawniej zdarzało nam się pisać prostsze rozwiązania samodzielnie, na potrzeby projektu. Jednak na dłuższą metę rozsądnie jest po prostu skorzystać z dobrych, gotowych rozwiązań.

Dziękuję za uwagę.