I Framework per il Web - HTML5 con CSS e JavaScript - page 250

e glyphicon-minus per mostrare un'icona con i caratteri + e -, oppure la classe
glyphicon-star per mostrare una stella e così via.
Infine, Bootstrap mette a disposizione componenti JavaScript come finestre modali,
tab, tooltip, popup, carousel e altro ancora.
Tutte queste funzionalità sono perfettamente documentate sul sito di Bootstrap, quindi
rimandiamo a quest'ultimo per ulteriori approfondimenti.
Con Bootstrap e jQuery risparmiamo una notevole quantità di codice ma possiamo au-
mentare ulteriormente il risparmio di codice usando anche altri framework che coprono ne-
cessità più specifiche, come la creazione di grafici.
Generare grafici
Un'esigenza fra le più comuni in un sito web è quella di mostrare grafici, ma HTML e CSS
non prevedono nulla per la generazione di grafici. Per questo motivo dobbiamo ricorrere a
librerie JavaScript di terze parti. Per semplicità di utilizzo e funzionalità, una delle migliori
è senza dubbio chart.js , scaricabile all'indirizzo http://aspit.co/a12 . Questa li-
breria mette a disposizione alcuni tipi di grafici, tra cui i tre tipi più comuni: grafico a barre,
grafico a torta e grafico a linee.
Qualunque sia il tipo di grafico, la prima cosa da fare è includere il file JavaScript che
contiene la libreria. In seguito, dobbiamo includere nel codice HTML un tag canvas , im-
postandone le dimensioni. A questo punto, nella parte JavaScript dobbiamo recuperare il
contesto 2d del canvas e passarlo in input al costruttore della classe Chart .
Ora che abbiamo un'istanza della classe Chart , dobbiamo solamente chiamare il me-
todo per la creazione del tipo di grafico. Per creare un grafico a barre dobbiamo usare il
metodo Bar , per creare un grafico a torta dobbiamo usare il metodo Pie mentre, per crea-
re un grafico a linee, dobbiamo usare il metodo Line .
Qualunque sia il metodo che invochiamo, i parametri da passare sono sempre gli stessi:
un oggetto con i dati del grafico e uno con le opzioni di visualizzazione. Il formato di questi
oggetti cambia da metodo a metodo, in quanto sia il modello di dati sia le opzioni cambiano
in base al grafico.
Per quanto riguarda l'oggetto contenente i dati, nel caso di grafico a barre e a linee,
dobbiamo impostare due proprietà:
labels : si tratta di un array di stringhe che specifica le label sull'asse delle x;
datasets : si tratta di un array di oggetti, in cui ogni oggetto rappresenta una linea
e contiene i suoi valori da rappresentare sull'asse delle y, più alcune opzioni di vi-
sualizzazione.