Préparer les données 

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

 

Créer un élément DataTable

Tous les graphiques ont besoin de données. Les graphiques des outils de graphique Google nécessitent que les données soient encapsulées dans une classe JavaScript appelée google.visualization.DataTable. Cette classe est définie dans la bibliothèque de visualisation Google que vous avez chargée précédemment.

Une DataTable est une table bidimensionnelle avec des lignes et des colonnes, où chaque colonne possède un type de données, un ID et un libellé facultatifs. L'exemple ci-dessus crée la table suivante:

type: chaîne
label: Topping		 type: nombre
label: segments
Des champignons 3
Oignons 1
Olives 1
La courgette 1
Pepperoni 2

Il existe plusieurs façons de créer un DataTable. Vous pouvez consulter la liste et la comparaison de chaque technique dans DataTables et DataViews. Vous pouvez modifier vos données après les avoir ajoutées, et ajouter, modifier ou supprimer des colonnes et des lignes.

Vous devez organiser les données DataTable de votre graphique dans un format attendu par le graphique. Par exemple, les graphiques à barres et les graphiques à secteurs nécessitent un tableau à deux colonnes dans lequel chaque ligne représente une tranche ou une barre. La première colonne est le libellé de la tranche ou de la barre, et la deuxième colonne la valeur de la tranche ou de la barre. D'autres nécessitent des formats de table différents et éventuellement plus complexes. Consultez la documentation de votre graphique pour connaître le format de données requis.

Plutôt que de remplir un tableau vous-même, vous pouvez interroger un site Web qui prend en charge le protocole de source de données Chart Tools (par exemple, une page de feuilles de calcul Google). L'objet google.visualization.Query vous permet d'envoyer une requête à un site Web et de recevoir un objet DataTable renseigné que vous pouvez transmettre dans votre graphique. Pour savoir comment envoyer une requête, consultez la section avancée Interroger une source de données.

 

Plus d'infos