Cette page a été traduite par l'API Cloud Translation.

Techniques de dessin de graphique

Cette page liste les différentes manières d'instancier et de dessiner un graphique sur la page. Chaque méthode présente des avantages et des inconvénients, énumérés ci-dessous.

Sommaire

chart.draw()
ChartWrapper
DrawChart()
En savoir plus

chart.draw()

Il s'agit de la méthode de base décrite dans l'exemple Hello Chart! présenté dans cette documentation. Voici les étapes de base :

Charger le chargeur de bibliothèque gstatic, la visualisation Google et les bibliothèques de graphiques
Préparer vos données
Préparer les options de graphique
Instanciez la classe de graphique en transmettant un handle à l'élément de conteneur de page.
Vous pouvez éventuellement vous inscrire pour recevoir tous les événements du graphique. Si vous avez l'intention d'appeler des méthodes sur le graphique, écoutez l'événement "ready" (prêt).
Appelez chart.draw() en transmettant les données et les options.

Avantages :

Vous contrôlez entièrement chaque étape du processus.
Vous pouvez vous inscrire pour écouter tous les événements générés par le graphique.

Inconvénients :

Verbose
Vous devez charger explicitement toutes les bibliothèques de graphiques requises.
Si vous envoyez des requêtes, vous devez implémenter manuellement le rappel, en vérifier la réussite, extraire le DataTable renvoyé et le transmettre au graphique.

Exemple :

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

ChartWrapper

ChartWrapper est une classe pratique qui gère le chargement de toutes les bibliothèques de graphiques appropriées pour vous et simplifie également l'envoi de requêtes aux sources de données des outils de graphique.

Avantages :

Beaucoup moins de code
Charge toutes les bibliothèques de graphiques requises pour vous
Facilite l'interrogation des sources de données en créant l'objet Query et en gérant le rappel à votre place.
Transmettez l'ID de l'élément conteneur pour qu'il appelle getElementByID pour vous.
Les données peuvent être envoyées dans différents formats: sous la forme d'un tableau de valeurs, d'une chaîne littérale JSON ou d'un handle DataTable.

Inconvénients :

ChartWrapper ne propage actuellement que les événements "select", "ready" et "error". Pour obtenir d'autres événements, vous devez disposer d'un handle vers le graphique encapsulé et vous y abonner. Consultez la documentation ChartWrapper pour obtenir des exemples.

Exemples :

Voici un exemple de graphique à colonnes contenant des données construites localement sous forme de tableau. Vous ne pouvez pas spécifier de libellés de graphique ni de valeurs de date et d'heure à l'aide de la syntaxe de tableau, mais vous pouvez créer manuellement un objet DataTable avec ces valeurs et le transmettre à la propriété dataTable.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Voici un exemple de graphique en courbes qui récupère ses données en interrogeant une feuille de calcul Google Sheets. Notez que le code n'a pas besoin de gérer le rappel.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Combiné au chargement automatique, cet algorithme permet d'obtenir un code très compact:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Utiliser l'éditeur de graphique avec ChartWrapper

Vous pouvez utiliser la boîte de dialogue de l'éditeur de graphique intégrée à Google Sheets pour créer un graphique, puis demander la chaîne ChartWrapper sérialisée qui représente le graphique. Vous pouvez ensuite copier et coller cette chaîne, et l'utiliser comme décrit ci-dessus dans ChartWrapper.

Vous pouvez intégrer un éditeur de graphiques à votre propre page et proposer des méthodes permettant aux utilisateurs de se connecter à d'autres sources de données et de renvoyer la chaîne ChartWrapper. Pour en savoir plus, consultez la documentation de référence sur ChartEditor.

DrawChart()

DrawChart est une méthode statique globale qui encapsule un élément ChartWrapper.

Avantages :

Identique à ChartWrapper, mais un peu plus court à utiliser.

Inconvénients :

Ne renvoie pas de handle au wrapper, vous ne pouvez donc gérer aucun événement.

<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Plus d'infos

Documentation de référence sur ChartEditor
Documentation générique sur chart.draw()
Documentation de référence sur ChartWrapper
Documentation de référence sur DrawChart