Disegnare grafici con HTML5 e Canvas con la libreria Flot

di Daniele Bochicchio,

Flot è una libreria di jQuery che consente di inserire grafici all'interno delle applicazioni: http://www.flotcharts.org/

Ha un meccanismo di inserimento dei grafici molto semplice e supporta grafici a barre, linee e torte. Inotre, ha un ricco ecosistema di plugin che aggiungono ulteriori funzionalità.

Rappresenta un'interessante library perché è in grado di disegnare i grafici utilizzando HTML5, se supportato dal browser: all'interno, infatti, costruire un tag di tipo Canvas, disegnando (anche in tempo reale) il grafico.

Si utilizza in maniera molto semplice, inserendo un div all'interno della pagina:

<div id="placeholder" style="width:400px;height:250px"></div>

E poi richiamando l'apposita funzione, dopo aver registrato il file JavaScript che viene fornito:

$.plot($("#placeholder"), 
   [ [[0, 88], [1, 52], [2, 67]] ], 
   { yaxis: { max: 100 } });


E' possibile mostrare più serie di dati all'interno dei grafici, mischiando anche linee e barre. Maggiori informazioni sono disponibili nella documentazione:
https://github.com/flot/flot/blob/master/API.md

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi