Dessiner le graphique 

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

La dernière étape consiste à dessiner le graphique. Vous devez d'abord instancier une instance de la classe de graphique que vous souhaitez utiliser, puis appeler draw() sur cette classe.

Instancier votre graphique

Chaque type de graphique est basé sur une classe différente, répertoriée dans la documentation du graphique. Par exemple, le graphique à secteurs est basé sur la classe google.visualization.PieChart, le graphique à barres est basé sur la classe google.visualization.BarChart, et ainsi de suite. Les graphiques à secteurs et à barres sont inclus dans le package Corechart que vous avez chargé au début de ce tutoriel. Toutefois, si vous souhaitez afficher une carte proportionnelle ou un graphique géographique sur votre page, vous devez charger également les packages "treemap" ou "geomap".

Les constructeurs de graphiques Google n'utilisent qu'un seul paramètre: une référence à l'élément DOM dans lequel dessiner la visualisation.

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

Dessiner votre graphique

Une fois que vous avez préparé vos données et vos options, vous êtes prêt à dessiner votre graphique.

Votre page doit contenir un élément HTML (généralement un <div>) pour contenir votre graphique. Vous devez transmettre à votre graphique une référence à cet élément. Vous devez donc lui attribuer un ID que vous pouvez utiliser pour récupérer une référence à l'aide de document.getElementById(). Tout ce qui se trouve à l'intérieur de cet élément sera remplacé par le graphique une fois qu'il sera dessiné. Déterminez si vous devez dimensionner explicitement cet élément <div>, mais pour l'instant, spécifiez la taille du graphique dans le code HTML <div>.

Chaque graphique accepte une méthode draw() qui accepte deux valeurs: un objet DataTable (ou DataView) qui contient vos données, et un objet d'options de graphique facultatif. L'objet options n'est pas obligatoire. Vous pouvez l'ignorer ou transmettre la valeur "null" pour utiliser les options par défaut du graphique.

Une fois que vous avez appelé draw(), le graphique s'affiche sur la page. Vous devez appeler la méthode draw() chaque fois que vous modifiez les données ou les options et que vous souhaitez mettre à jour le graphique.

La méthode draw() est asynchrone, c'est-à-dire qu'elle renvoie immédiatement un résultat, mais que l'instance qu'elle renvoie peut ne pas être immédiatement disponible. Dans de nombreux cas, cela ne pose pas de problème, car le graphique finira par être dessiné. Toutefois, si vous souhaitez définir ou récupérer des valeurs sur un graphique après avoir appelé draw(), vous devez attendre qu'il génère l'événement "ready", qui indique qu'il est renseigné. Nous aborderons l'écoute des événements sur la page suivante.

Dépannage

Si votre graphique ne dessine pas sur la page, voici quelques approches qui peuvent vous aider à résoudre vos problèmes:

  • Vérifiez qu'il ne contient pas de fautes de frappe. Rappelez-vous que le langage JavaScript est sensible à la casse.
  • Effectuez une recherche dans le groupe de discussion sur l'API Google Visualization. Si vous ne trouvez pas de message qui réponde à votre question, publiez-la au groupe avec un lien vers une page Web qui illustre le problème.

 

 

 

Plus d'infos