Creare grafici con Google Chart tools
Google Chart Tools è un progetto sviluppato da Google che fornisce tutti gil elementi nesessari per realizzare grafici e mostrarli in un sito web.
Le tipologie di grafici a disposizione sono oltre dieci dal semplice grafico a barre, al classico a torta, passando dal grafico a mappa finendo con quello ad albero, per vedere tutte le tipologie puoi consultare la chart gallery
La compatibilità di questi grafici è assicurata dal linguaggio JavaScript con la quale è sviluppata questa libreria oltre e dal supporto di HTML5 e SVG/VML per la rappresentazione del grafico, coprendo così oltre i principali browser anche i dispositivi mobile come Iphone, Ipad e Android.
Come creare un grafico
Nota:Il livello di personalizzazione di questa libreria permette di realizzare grafici molto complessi, nell’esempio sotto vedrai come realizzare un grafico a torta molto semplice in cui mostrare le nazioni più popolate al mondo affiancate dal numero di abitanti.
La prima cosa da fare è incorporare le giuste librerie all’interno della pagina web, tra i tag head, per poter attivare tutti gli strumenti.
<!--Carica le AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Carica le Visualization API e tutti i tipi di galleria
google.load('visualization', '1.0', {'packages':['corechart']});
// Nel caso volessi caricare solamente un tipo di grafico, per esempio grafico a torta
// Puoi usare questa istruzione al posto di quella sopra
var visualization = new google.visualization.PieChart(container);
// Impostare un callback da attvare quanto le visualization API saranno
//caricate dal browser.
google.setOnLoadCallback(drawChart);
</script>Ogni grafico deve essere strutturato tramite l’inserimento di una serie di dati usando la classe JavaScrpit Datatables e altre come addColumn per inserire categorie di classificazione e addRows dove inserire i dati:
// Impostare i dati da cui attingerà il grafico. // Ricordati di inserire tutte le istruzioni dentro la funzione drawchart. function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'nazione'); data.addColumn('number', 'abitanti'); data.addRows([ ['Cina', 1.3 ], ['India', 1.2 ], ['USA', 310 ], ['Indonesia', 239], ['Brasile', 134 ] ]);
Una volta impostati questi parametri potrai cambiare la rappresentazione grafica richiamando una tipologia di grafico piuttosto che un’altra, rendendolo così flessibile al cambiamento con il minimo sforzo.
Il terzo passaggio è impostare titolo e dimensione all’interno della pagina web del grafico utilizzando la variabile option.
// Imposta alcune opzioni fondamentali per la visualizzazione del grafico //titolo e dimensioni. var options = {'title':'Le nazioni più popolate del pianeta', 'width':400, 'height':300};
Il quarto passaggio è impostare la tipologia di grafico e decidere in quale elemento HTML questo deve comparire.
// Impostare il grafico a torta e scegliere dove farlo comparire var chart = new google.visualization.PieChart(document.getElementById('grafico')); chart.draw(data, options); } // Fine della funzione drawchart
Infine dovrai creare, tra i tag body, l’elemento HTML nel quale mostrare il grafico, sopra ho specificato che l’elemento dovrà avere un id di nome grafico, quindi potrei inserire un div come questo sotto:
<body> ... <div id="grafico"><!-- Il grafico verrà inserito dentro questo div e mostrato a tutti gli utenti. --></div> ... </body>
Ora il grafico delle nazioni più popolate al mondo è pronto e dovrebbe essere visualizzato senza alcun problema all’interno della pagina web, ribadisco, questo è un esempio basico, Google Chart Tools è una libreria piena di opzioni da sperimentare sfruttando tutte le API che mette a disposizione.
Ti ricordo inoltre che i grafici possono anche essere popolati tarmite dati provenienti da un database oppure da file esterni.
1 Risposta per Creare grafici con Google Chart tools