<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
Crea un DataTable
Tutti i grafici richiedono dati. I grafici di Google Chart Tools richiedono l'aggregazione dei dati in una classe JavaScript
denominata google.visualization.DataTable. Questa classe viene definita nella libreria di visualizzazione Google che hai caricato in precedenza.
DataTable è una tabella bidimensionale con righe e colonne, in cui ogni colonna contiene un tipo di dati, un ID facoltativo e un'etichetta facoltativa. L'esempio precedente crea la seguente tabella:
| type: string label: Topping |
tipo: numero etichetta: sezioni |
|---|---|
| Ai funghi | 3 |
| Cipolle | 1 |
| Olive | 1 |
| Zucchine | 1 |
| Salame piccante | 2 |
Esistono diversi modi per creare un elemento DataTable; puoi visualizzare un elenco e un confronto di
ciascuna tecnica nelle tabelle DataTables e
DataViews. Puoi modificare i dati dopo averli aggiunti e puoi aggiungere, modificare o rimuovere colonne e righe.
Devi organizzare DataTable in un formato previsto: ad esempio, sia i grafici a barre sia i grafici a torta richiedono una tabella a due colonne in cui ogni riga rappresenta una sezione o una barra. La prima colonna è l'etichetta della sezione o della barra, mentre la seconda è il valore della sezione o della barra. Altri grafici richiedono formati di tabella diversi ed eventualmente più complessi. Consulta la documentazione del grafico per informazioni sul formato dei dati richiesto.
Anziché completare una tabella, puoi eseguire query su un sito web che supporta il protocollo dell'origine dati di Chart, ad esempio una pagina di Fogli Google. Con l'oggetto google.visualization.Query, puoi inviare una query a un sito web e ricevere un oggetto DataTable completato che puoi trasmettere nel grafico. Per scoprire come inviare una query, consulta l'argomento avanzato Esecuzione di query su un'origine dati.