Webmaster Superhero

Google Charts è un tool per visualizzare i dati nelle pagine web attraverso l'uso di grafici interattivi. Per iniziare ti servono un editor qualsiasi - va bene anche Brackets - e un browser con collegamento a internet per osservare il risultato.

Apri con l'editor la pagina in cui vuoi inserire il grafico e copia questo codice nel body:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart','table']});
    google.setOnLoadCallback(drawChart);
</script>

Il primo script carica la libreria JSAPI e va inserito nella pagina una sola volta, indipendentemente da quanti e quali grafici vuoi mostrare.
La prima riga del secondo script carica la versione 1.0 della libreria di Google Visualization e indica i packages da includere, in questo caso corechart e table; anche questa istruzione va inclusa un'unica volta.
La successiva riga del secondo script chiama la function che useremo per creare la DataTable e popolarla con i dati.

Immagina di disporre dei dati di un sondaggio sul CMS preferito da un campione di 1012 utenti e di volerli pubblicare usando un grafico a torta. Torna all'ultimo script e aggiungi dentro il seguente codice, che serve a creare la DataTable e a popolarla con i dati del sondaggio:

	function drawChart() {
	    var data = new google.visualization.DataTable();
	    data.addColumn('string', 'CMS');
	    data.addColumn('number', 'Preferenze');
	    data.addRows([
		['WordPress', 659],
		['Joomla!', 186],
		['Drupal', 79], 
		['Typo3', 31],
		['Altro', 57]
	    ]);

Il nome della function è drawChart, lo stesso che compare tra parentesi in setOnLoadCallback.
Con la prima addColumn indichi che la prima colonna contiene i nomi dei CMS, che sono dati di tipo stringa; con la seconda addColumn indichi che la seconda colonna contiene il numero di preferenze; con addRows inserisci una riga per ogni CMS specificandone il nome e il numero delle preferenze.

Con Google Charts i grafici possono essere personalizzati nei minimi dettagli grazie alle configuration options, che permettono di definire proprietà come il colore di sfondo, l'area del disegno e le dimensioni del font. Le opzioni sono davvero tante e variano a seconda del tipo di grafico, ma non serve definirle tutte poiché i valori di default conducono in molti casi ad un risultato soddisfacente.

Per definire il titolo di un grafico a torta aggiungi questa riga all'interno della function drawChart():

var options = {'title':'Sondaggio: il CMS preferito dagli utenti'};

Sei giunto all'ultima riga dello script, quella che ti permette di disegnare il grafico specificandone il tipo, l'elemento che dovrà ospitarlo e le opzioni da abbinare:

    var pie = new google.visualization.PieChart(document.getElementById('pie_div'));
    pie.draw(data, options);
}

L'ultima parentesi serve a chiudere la function.
Adesso non resta che creare l'elemento con id="pie_div" dove vuoi che venga inserito il grafico:

<div id="pie_div"></div>

Google mette a disposizione 29 chart types tra cui word trees (diagrammi ad albero), geochart (mappe di paesi, continenti o regioni), timeline e table. Per usarli carica le singole librerie (packages) come hai fatto per corechart e table.

Per disegnare un Pie Chart ti basta corechart, che include anche Bar Charts e Column Charts. Se invece vuoi aggiungere la tabella dei dati del sondaggio, avendo già caricato la libreria table e popolato la DataTable non ti resta che disegnare la tabella e aggiungere il div con l'elemento che la contiene. Nello script quindi aggiungi:

var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data);

Aggiungi poi il div con l'elemento id="table_div":

<div id="table_div"></div>

Se vuoi inserire un link all'immagine png della torta, integra lo script con questo codice:

google.visualization.events.addListener(pie, 'ready', function () {
    pie_div.innerHTML = '<img src="' + pie.getImageURI() + '">';
});
document.getElementById('pie_png').outerHTML = '<a href="' + pie.getImageURI() + '">Salva il grafico</a>';

Aggiungi poi l'elemento id="pie_png" per mostrare il link:

<div id='pie_png'></div>

Ricapitolando, ecco il contenuto del body della pagina che include il grafico a torta, il link per salvare la png e la tabella con i dati:

<div id="pie_div"></div>
<div id="pie_png"></div>
<div id="table_div"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1.0', {'packages':['corechart','table']});
    google.setOnLoadCallback(drawChart);
    
    function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'CMS');
	data.addColumn('number', 'Preferenze');
	data.addRows([
	    ['WordPress', 659],
	    ['Joomla!', 186],
	    ['Drupal', 79], 
	    ['Typo3', 31],
	    ['Altro', 57]
	]);
	
	var options = {'title':'Sondaggio: il CMS preferito dagli utenti'};
	var pie = new google.visualization.PieChart(document.getElementById('pie_div'));
	pie.draw(data, options);
	
	var table = new google.visualization.Table(document.getElementById('table_div'));
	table.draw(data);
	
	google.visualization.events.addListener(pie, 'ready', function () {
	    pie_div.innerHTML = '<img src="' + pie.getImageURI() + '">';
	});
	document.getElementById('pie_png').outerHTML = '<a href="' + pie.getImageURI() + '">Salva il grafico</a>';
    }
</script>