Prepara i dati

<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 il wrapping dei dati in una classe JavaScript chiamata google.visualization.DataTable. Questa classe è definita nella libreria Google Visualization che hai caricato in precedenza.

Una DataTable è una tabella bidimensionale con righe e colonne, in cui ogni colonna ha un tipo di dati, un ID facoltativo e un'etichetta facoltativa. L'esempio precedente crea la seguente tabella:

tipo: stringa
etichetta: Topping		 tipo: numero
etichetta: Sezioni
Funghi 3
Cipolle 1
Olive 1
Zucchine 1
Salame piccante 2

Esistono diversi modi per creare un DataTable; puoi visualizzare un elenco e un confronto di ogni tecnica in DataTables e DataView. Puoi modificare i dati dopo averli aggiunti e aggiungere, modificare o rimuovere colonne e righe.

Devi organizzare l'elemento DataTable del grafico nel formato previsto dal grafico: ad esempio, i grafici a barre e a torta richiedono una tabella a due colonne in cui ogni riga rappresenta una sezione o una barra. La prima colonna contiene la sezione o l'etichetta a barre e la seconda colonna il valore della sezione o della barra. Altri grafici richiedono formati di tabella diversi e forse più complessi. Consulta la documentazione del grafico per conoscere il formato dei dati richiesto.

Anziché compilare personalmente una tabella, puoi eseguire una query su un sito web che supporta il protocollo dell'origine dati degli strumenti dei grafici, ad esempio una pagina di Fogli di lavoro Google. Utilizzando l'oggetto google.visualization.Query, puoi inviare una query a un sito web e ricevere un oggetto DataTable compilato che puoi trasmettere nel grafico. Consulta l'argomento avanzato Esecuzione di query su un'origine dati per scoprire come inviare una query.

 

Ulteriori informazioni