> ## Content Index
> Fetch the complete content index at: https://www.tasc.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# Grafici semplici, puliti e attraenti in HTML 5
- URL: https://www.tasc.blog/2013/07/02/grafici-semplici-puliti-e-attraenti-in-html-5/
- Published: 2013-07-02T18:19:58.000Z
- Updated: 2014-04-29T08:40:30.000Z
- Author: Alberto Ziveri
- Tags: Tasc & Grafite, Howto, #wp-import, #Import 2026-10-03 09:34

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**](http://www.chartjs.org/?ref=tasc.blog) è 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 ](https://github.com/nnnick/Chart.js?ref=tasc.blog)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**](http://www.chartjs.org/docs/?ref=tasc.blog) 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>.

```

&lt;script&gt;

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

	}

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

&lt;/script&gt;

```

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](http://www.chartjs.org/docs/?ref=tasc.blog).

## 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](http://wordpress.org/plugins/wp-charts/?ref=tasc.blog) per creare grafici sfruttando ChartJS.