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. Devi prima creare un'istanza di una classe del grafico che vuoi utilizzare, quindi devi chiamare draw() per l'istanza.

Creare un'istanza del 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 si basa sulla classe google.visualization.BarChart e così via. Entrambi i grafici a torta e a barre sono inclusi nel pacchetto corechart che hai caricato all'inizio di questo tutorial. Tuttavia, se vuoi visualizzare una mappa ad albero o un grafico geografico nella pagina, devi caricare anche i pacchetti "Mappa ad albero" o "mappa geografica".

I costruttori del grafico Google utilizzano un singolo parametro: un riferimento all'elemento DOM in cui disegnare la visualizzazione.

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

Disegnare il tuo grafico

Dopo aver preparato i dati e le opzioni, puoi tracciare il grafico.

La pagina deve avere un elemento HTML (in genere un <div>) che contenga il grafico. Devi trasmettere al grafico un riferimento a questo elemento, quindi assegnagli un ID che puoi utilizzare per recuperare un riferimento utilizzando document.getElementById(). Tutto ciò che si trova all'interno di questo elemento verrà sostituito dal grafico quando viene disegnato. Valuta se devi impostare esplicitamente le dimensioni di questo elemento <div>, ma per il momento specifica le dimensioni del grafico nell'HTML <div>.

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

Dopo aver chiamato draw(), il grafico verrà tracciato 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 restituita potrebbe non essere immediatamente disponibile. In molti casi non è un problema; il grafico verrà tracciato alla fine. Tuttavia, se vuoi impostare o recuperare i valori in un grafico dopo aver chiamato draw(), devi attendere che venga generato l'evento pronto, che indica che è stato completato. Parleremo degli eventi nella prossima pagina.

Risoluzione dei problemi

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

  • Cerca gli errori di battitura. Ricorda che JavaScript è un linguaggio sensibile alle maiuscole.
    • Utilizzare un debugger JavaScript. In Firefox, puoi utilizzare la console JavaScript, il Venkman Debugger o il componente aggiuntivo GOOG. In Chrome, puoi utilizzare gli strumenti per sviluppatori (Maiusc + Ctl + J).
  • Cerca nel gruppo di discussione dell'API Google Optimization. Se non riesci a trovare un post che risponda alla tua domanda, pubblicalo nel gruppo insieme a un link a una pagina web che dimostra il problema.

 

 

 

Scopri di più