jqPlot, Highcharts o D3: quale libreria JavaScript scegliere per visualizzare i dati?

librerie-javascript2

Ultimamente, grazie alle molteplici innovazioni nel campo del Web, tra cui in particolare HTML5, la realizzazione di elementi grafici sempre più accattivanti ed interattivi su Web, è ormai alla portata di tutti. Infatti JavaScript ha ripreso il suo ruolo fondamentale nello sviluppo delle pagine Web, poichè questo linguaggio ha saputo ben sfruttare queste innovazioni.

Come effetto di tutto ciò, il mondo Web ha visto proliferare una miriade di llibrerie JavaScript specializzate per mille usi e funzioni, tra cui la visualizzazione dei dati attraverso dei grafici. In particolare, stanno emergendo fra tutte tre librerie:

  • jqPlot
  • Highcharts
  • D3

Queste librerie possono essere raggruppate in due diverse classi.

  1. jqPlot e Highcharts sono in realtà delle estensioni della libreria jQuery, una libreria che permette la manipolazione degli elementi della pagina HTML tramite le selections (da qui il nome jQuery). Utilizzano il Canvas di HTML5 come tecnologia per la rappresentazione grafica. Entrambe hanno costrutti JavaScript simili.
  2. D3 è una libreria che ha implementate al suo interno tutte le funzionalità per la manipolazione degli elementi HTML. Per la parte grafica fa uso della tecnologia SVG a grafica vettoriale.
jqplot-logo

 jqPlot è una libreria free e open source sviluppata da Chris Costello nel 2009. E’ direttamente scaricabile dal sito ufficiale (www.jqplot.com) e non richiede alcuna registrazione. Con poche righe di codice e in maniera molto semplice, è possibile realizzare tutti i grafici più comuni all’interno delle nostre pagine Web: diagrammi a barre, istogrammi, grafici lineari, logaritimici e semilogaritmici, diagrammi a torta, ecc. Insomma tutto quello di cui normalmente si fa comunemente uso per visualizzare i dati (basti pensare ad esempio ai grafici disponibili su Excel) è già implementato all’interno della libreria. E’ necessario solo inserire i dati da graficare (x,y,z, ecc.) e definire le caratteristiche con cui vogliamo che il nostro grafico venga rappresentato (colore, forma, titolo, legenda, ecc.) all’interno di un costrutto JavaScript che è pressochè sempre lo stesso per qualsiasi tipo di chart.

grafico con jqPLot
grafico con jqPLot

La grandezza e la potenza di questa libreria, a mio dire, è proprio questa rapidità e semplicità nel dare subito grandi risultati. Ottima scelta:

  • per chi non ha molto tempo da dedicare alla programmazione;
  • per chi è alle prime armi;
  • per chi vuole ottenere subito rapidi risultati e di ottimo livello;
highcharts-logo

Highcharts è una libreria commerciale (non è freeware per scopi professionali) ma è scaricabile gratuitamente dal sito ufficiale (www.highcharts.com). E’ molto simile a jqPlot e ne conserva i costrutti JavaScript. Infatti anche con questa libreria è possibile ottenere rapidamente ottimi risultati attribuendo i dati in ingresso e definendo le caratteristiche con cui dovrà essere rappresentato il chart. Essendo di natura commerciale, certamente questa libreria offre maggiori funzionalità rispetto a jqPlot (però non è freeware).

grafico con HighCharts
grafico con HighCharts
D3

D3 è una libreria free e open source sviluppata nel 2011 da Mike Bostock (insieme a Heer e Ogievetsky) ed è scaricabile liberamente dal sito ufficiale (d3js.org). Questa libreria, in realtà, rispetto alle due precedenti, non è finalizzata sulla rappresentazione dei grafici, ma ha un campo di applicazione più ampio: la visualizzazione dei dati tramite elementi grafici (che detto così’ sembrerebbe la stessa cosa, ma addentrandosi nell’argomento non lo è affatto). Infatti qui non esistono grafici già pronti in cui definire dati in ingresso e caratteristiche, ma i dati da visualizzare devono essere convertiti in elementi grafici elementari (costruiti tramite grafica vettoriale SVG) e poi composti in modo da creare una rappresentazione grafica generale ( che può essere anche un diagramma a barre per esempio). Quindi se vogliamo creare un grafico, per esempio un diagramma a barre, dovremo implementare separatamente ogni suo singolo componente (le barre, il titolo, gli assi, i numeri, ecc.) e poi assemblare il tutto.

Quindi non ci sono praticamente limiti a quello che possiamo rappresentare con questa libreria, se non quello che il numero delle righe di codice va crescendo di pari passo con la complessità.

grafico con D3
grafico con D3

La grandezza e la potenza di questa libreria, a mio dire, è proprio quella di sfruttare le potenzialità grafiche di SVG tramite il linguaggio JavaScript, con anche animazioni e alta interattiviità. Ottima scelta:

  • per chi ha esigenze di visualizzare dati in modo innovativo
  • per chi è esperto nella programmazione
  • per chi vuole avere un maggior controllo su ogni componente grafico
librerie-javascript2

Recently, thanks to the several innovations in the Web technologies, including in particular HTML5, the development of even more attractive and interactive graphical elements on the Web is within the reach of all. Indeed, JavaScript has resumed the main rule in the development of web pages. This is due to the fact that JavaScript language has been able to integrate all this innovations.

As result of all of this, the web world has witnessed the proliferation of several JavaScript libraries, each of which is specialized for a specific use, including the data visualization throung charts. Particularly, three particular libraries are emerging above the chaotic world of the JavaScript libraries:

  • jqPlot
  • Highcharts
  • D3

These libraries can be grouped in two different classes.

  1. jqPlot and Highcharts are actually extentions of the jQuery library, a library specialized in handling elements of a HTML page using selections (hence the name jQuery). They uses the HTML5 Canvas as technology for the graphic representation. Both work with similar constructs.
  2. D3 is a library which implements all the functionalities in handling elements of HTML without using any external library. Furthermore, it uses the SVG technology for drawing graphic elements, instead of the HTML Canvas.

Lascia un commento