Disegna il grafico 

<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>

L'ultimo passaggio consiste nel disegnare il grafico. Per prima cosa devi creare un'istanza della classe di grafico che vuoi utilizzare, quindi devi chiamare draw() sulla classe.

Creare un'istanza per il grafico

Ogni tipo di grafico è basato su una classe diversa, elencata nella documentazione del grafico. Ad esempio, il grafico a torta si basa sulla classe google.visualization.PieChart, il grafico a barre sulla classe google.visualization.BarChart e così via. Sia i grafici a torta che a barre sono inclusi nel pacchetto corechart che hai caricato all'inizio di questo tutorial. Tuttavia, se vuoi una mappa ad albero o un grafico geografico sulla tua pagina, devi anche caricare i pacchetti "mappa ad albero" o "mappa geografica".

I costruttori dei grafici di Google utilizzano un singolo parametro, ovvero un riferimento all'elemento DOM in cui tracciare la visualizzazione.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

Disegna il tuo grafico

Dopo aver preparato i dati e le opzioni, puoi iniziare a creare il grafico.

Per contenere il grafico, la pagina deve contenere un elemento HTML (di solito un <div>). Devi trasmettere al grafico un riferimento a questo elemento, quindi assegna al grafico un ID che puoi utilizzare per recuperare un riferimento tramite document.getElementById(). Tutto ciò che è contenuto in questo elemento sarà sostituito dal grafico quando verrà disegnato. Valuta se devi ridimensionare esplicitamente questo elemento <div>, ma per il momento specifica le dimensioni del grafico nell'HTML di <div>.

Ogni grafico supporta un metodo draw() che accetta due valori: un oggetto DataTable (o DataView) che contiene i tuoi dati e un oggetto facoltativo per le opzioni del grafico. L'oggetto options non è obbligatorio e puoi ignorarlo o passare un valore nullo per utilizzare le opzioni predefinite del grafico.

Dopo aver chiamato draw(), il grafico verrà disegnato sulla pagina. Devi chiamare il metodo draw() ogni volta che modifichi i dati o le opzioni e vuoi aggiornare il grafico.

Il metodo draw() è asincrono, ovvero restituisce immediatamente, ma l'istanza che restituisce potrebbe non essere immediatamente disponibile. In molti casi non è un problema; alla fine il grafico verrà disegnato. Tuttavia, se vuoi impostare o recuperare i valori di un grafico dopo aver chiamato draw(), devi attendere che generi l'evento pronto, che indica che è completato. Parleremo dell'ascolto di eventi nella pagina successiva.

Risoluzione dei problemi

Se il grafico non disegna sulla pagina, ecco alcuni approcci che potrebbero aiutarti a risolvere i problemi:

  • Controlla che non ci siano errori di battitura. Ricorda che JavaScript è una lingua che fa distinzione tra maiuscole e minuscole.
  • Cerca nel gruppo di discussione dell'API Google Visualization. Se non riesci a trovare un post che risponda alla tua domanda, pubblicala nel gruppo insieme a un link a una pagina web che dimostri il problema.

 

 

 

Ulteriori informazioni