Maj 12th, 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
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:
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ę.
Opublikowano w 
Tags: 
