Grafici semplici, puliti e attraenti in HTML 5

Esistono due tipi di grafici. Quelli funzionali e quelli promozionali. Quelli funzionali servono a trarre informazioni e più sono complessi e dettagliati meglio è. Quelli promozionali sono utili per essere di facile comprensione, anche per promuovere un prodotto ad esempio o semplicemente per fare "bella figura", ed è quello che impararemo a creare in questo tutorial.

La libreria perfetta

Ci è voluta tanta ricerca da parte del Tasc Lab per trovare la libreria perfetta e completa che permetta di creare grafici belli, puliti, attraenti e semplici. Chart.js è la soluzione alle nostre esigenze. Guarda il grafico qui sopra, è stato realizzato con Chartjs e integrato in Wordpress dal nostro Tasc Lab. Si riferisce al ROE delle maggiori società informatiche americane.

Come funziona

Vediamo come creare l'istogramma precedente.

Innanzitutto, come qualsiasi script, occorre scaricare i file e caricare il file Javascript (nel nostro caso Chart.min.js) nella pagina dove inserire il grafico. Questo javascript va per forza inserito all'inizio della pagina, all'intero del tag HEAD. Presupposto che il vostro sia dentro una cartella "js"...

<script type='text/javascript' src='js/libs/chart.js'></script>

All'interno del body è ora necessario inserire il grafico nel punto in cui vogliamo che esso appaia. Innanzitutto occorre inserire il canvas, il tag di HTML 5 che permette la creazione e rendering di immagini direttamente da codice. Diamo anche un ID al Canvas, fondamentale per poi collegarlo con lo script. Sostituite idgrafico dando un nome al vostro grafico.

<canvas id="idgrafico'" height="500" width="700"></canvas>

A questo punto viene la parte più importante: la definizione del grafico, dei dati, dei valori, di tutti i parametri. Chart.js è un plugin javascript altamente personalizzabile. Nella pagina di Documentation troverete tantissime opzioni disponibili per personalizzare i vostri grafici. Noi vogliamo creare un istogramma esattamente come quello del ROE delle aziende americane. Ecco il codice script da inserire subito dopo il canvas o prima della chiusura del body, all'interno di un tag <script>.

<script>

	var barChartData = {
		labels : ["Apple","Google","Microsoft","IBM","Intel","Facebook"],
		datasets : [
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				data : [33,16.38,23.23,82.30,20.86,0.59]
			}
		]

	}

	var myLine = new Chart(document.getElementById("idgrafico").getContext("2d")).Bar(barChartData);

</script>

C'è una serie di cose che puoi notare nel codice.

• Noi abbiamo inserito sei dati e metto i loro nomi in "Labels", i rispettivi valori sono stati messi in data. È ovvio che il numero di labels e il numero di data, separati da virgola, devono essere uguali (nel nostro caso abbiamo 6 labels e 6 valori in data).
• fillColor, strokeColor sono solo alcune delle opzioni che si possono inserire in datasets. Ne puoi inserire tante altre, studiando la Documentation.

Limiti

Durante lo sviluppo e l'utilizzo di ChartJs ho trovato alcuni limiti. Il più grande è certamente l'interattività. Non ha una sua struttura HTML perché è un Canvas, quindi non si potranno aggiungere effetti al passaggio del mouse se non con javascript. Proprio per questo ChartJs è quasi come se fosse uno script in grado di produrre immagini di grafici da codice. Creare e inserire un'immagine manualmente richiederebbe molto più tempo.

Nonostante tutto rimane un'ottimo script, adatto appunto solo per scopi promozionali. Esiste anche un plugin Wordpress per creare grafici sfruttando ChartJS.