Chart.js, creare grafici interattivi

11 novembre 2014

Introdurre grafici di impatto o diagrammi all’interno di siti o applicazioni mobile è cruciale. Il meccanismo più tipico è quello in cui si interroga il server tramite chiamata AJAX (una API REST o un servizio cloud) e si ricevono i dati in formato JSON (o XML), infine si procede al rendering del grafico direttamente sul client.

Chart.js

Chart.js è una libreria JavaScript che supporta la generazione di ben 6 tipi di grafici differenti, dall’impatto estremamente accattivante.

Il disegno del grafico si avvale del Canvas di HTML5, supportato dalla maggior parte dei browser moderni (e anche su quelli più datati con appositi polyfill) e risponde anche alle interazioni dell’utente, adattandosi in modo “responsive” al device su cui viene prodotto.

Tutte queste funzionalità sono racchiuse in uno script di piccole dimensioni (11 Kb circa), che possono essere ridotte ulteriormente se si usano solo alcuni dei tipi di grafici a disposizione.

Addentriamoci nei dettagli della libreria e vediamo con quale semplicità possiamo utilizzarla per creare grafici nella nostra applicazione Web.

Scaricare la libreria

La libreria può essere scaricata dal repository ufficiale su GitHub, attraverso il client Git preferito o direttamente dalla pagina in formato ZIP. Possiamo scaricare liberamente tutti i file sorgenti del progetto, utili a chi vuole contribuire o approfondire il funzionamento della libreria, oppure limitarci al solo file “Chart.js” (e la sua versione minified “Chart.js.min” per l’uso in produzione) se vogliamo avere accesso a tutti i grafici supportati, oppure ancora prelevare dalla cartella “Src” solo il cuore della libreria (Chart.Core.js) e i file relativi ai singoli grafici che vogliamo utilizzare.

Importare e utilizzare la libreria

Utilizzare la libreria è molto semplice: è sufficiente includere il riferimento allo script nel tag <head> della pagina HTML che ne fa uso, o nel modello (template) che da origine a tutte le pagine (se adottate un framework che fornisce questa possibilità):

<script src="Chart.js"></script>

Se non usate tutti i grafici, potete includere lo script del “core” e quelli dei grafici che vi interessano.

La libreria supporta anche il caricamento tramite “loader JavaScript” come Require.js: per esigenze di brevità, ne omettiamo la trattazione rimandando alla documentazione ufficiale della libreria per il suo utilizzo.

Una volta inclusi gli script, l’ambiente JavaScript sarà arricchito da una variabile globale ‘Chart’, che consente di generare i grafici e di configurare le opzioni della libreria.

Preparazione del Canvas

Il primo passo per creare un grafico è quello di inserire il <canvas> HTML5 all’interno della pagina: la libreria ne assumerà il controllo e sfrutterà le sue potenzialità multimediali per le operazioni di disegno e l’animazione interattiva del grafico tracciato.

Ecco un markup di esempio per la pagina HTML

<canvas id="myChart" width="400" height="400"></canvas>

Assegnamo un id al Canvas (“myChart”, nel nostro esempio) per referenziarlo con semplicità all’interno del codice:

var ctx = document.getElementById("myChart").getContext("2d");

oppure con JQuery:

var ctx = $("#myChart").get(0).getContext("2d");

Per creare il grafico e associarlo al contesto, è sufficiente ricorrere alla funzione costruttore Chart() passando il Canvas come parametro

var myNewChart = new Chart(ctx);

Ora abbiamo a disposizione un oggetto Chart che possiamo utilizzare per disegnare nel Canvas associato tutti i grafici che vogliamo.

Tipi di grafici

L’oggetto Chart fornisce una serie di metodi per creare tutti i grafici supportati dalla libreria; ecco un esempio di chiamata per creare un grafico a barre:

var myNewChart = new Chart(ctx);

// ...

myNewChart.Bar(data, options);

Ecco l’elenco dei tipi di grafici supportati e dei relativi metodi da richiamare:

Tipo di graficoDescrizioneEsempio
.Line()Crea un grafico a linee
.Bar()Crea un grafico a barre
.Radar()Crea un grafico a radar
.PolarArea()Crea un grafico polare
.Pie()Crea un grafico a torta
.Doughnut()Crea un grafico a ciambella

Come visto nell’esempio, la chiamata al metodo di creazione del grafico accetta generalmente due parametri:

ParametroDescrizione
dataÈ l’oggetto che contiene i dati da rappresentare all’interno del grafico, ovvero le “serie”; la sua struttura varia in base al tipo specifico di grafico e può contenere anche informazioni su colori, etichette e altri “metadati” che meglio descrivono ciascuna serie da rappresentare.
optionsContiene un oggetto con i valori delle opzioni supportate del grafico che determinano le sue caratteristiche, come l’aspetto, il comportamento, gli elementi visibili (e non) al suo interno, le interazioni possibili con l’utente.

Le opzioni supportate da ciascun grafico hanno un valore predefinito che viene utilizzato se l’oggetto passato al parametro options non contiene una proprietà che lo altera.

Se vuoi aggiornamenti su Chart.js, creare grafici interattivi inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Chart.js, creare grafici interattivi

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy