Grafici con Google Chart

Un’esigenza che si manifesta molto spesso è quella di creare dei grafici in modo dinamico,
senza ovviamente ricorrere a delle immagini da inserire nel proprio sito.
Esistno da tempo molte soluzioni ma per lo più consentono di realizzare istogrammi o altri grafici molto semplici.
Attraverso Google Chart possiamo realizzare grafici anche complessi senza troppo sforzo.

Vediamo un esempio di grafico a torta, la soluzione viene proposta in svg (adottano VML per le vecchie versioni di IE ):
come prima cosa bisogna inserire il collegamento alla libreria:

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>

e poi passiamo alla parte di javascript:
come prima cosa carichiamo il package corretto:

google.load(‘visualization’, ’1.0′, {‘packages’:['corechart']});

ora impostiamo un callback quando l’applicazione viene caricata in modo da leggere i dati e fare le operazioni necessarie:

 google.setOnLoadCallback(disegnaGrafico);

Quindi creiamo il nostro oggetto:

var data = new google.visualization.DataTable();

Aggiungiamo la colonna che funzionerà da etichetta:

data.addColumn(‘string’, ‘Browser’);

e aggiungiamo una seconda etichetta numerica

data.addColumn(‘number’, ‘Slices’);

e ora i dati:

data.addRows([

['Firefox', 86],

['Chrome', 54],

['Internet explorer', 17],

['Safari', 15],

['Opera', 1]

]);

Non resta che settare titolo e dimensioni

var options = {‘title’:'Statistiche Browser’,'width’:400,’height’:300};

e implentare il nostro oggetto collegandolo al div che lo ospiterà:

var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

L’esempio