Techniques de dessin de graphique

Cette page liste les différentes façons d'instancier et de dessiner un graphique. Chacune présente des avantages et des inconvénients, comme indiqué ci-dessous.

Contenus

  1. chart.draw()
  2. Wrapper de graphique
  3. DrawChart()
  4. En savoir plus

chart.draw()

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

  1. Charger le chargeur de bibliothèques statiques, Google Visualization et les bibliothèques de graphiques
  2. Préparer vos données
  3. Préparer les options du graphique
  4. Instanciez la classe du graphique en transmettant un handle à l'élément conteneur de la page.
  5. Vous pouvez également vous inscrire pour recevoir les événements du graphique. Si vous souhaitez appeler des méthodes sur le graphique, écoutez l'événement "ready".
  6. 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 :

  • Détaillé
  • Vous devez charger explicitement toutes les bibliothèques de graphiques requises.
  • Si vous envoyez des requêtes, vous devez les implémenter manuellement pour le rappel, vérifier si l'opération a réussi, extraire les DataTable renvoyés, puis les 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>

Wrapper du graphique

ChartWrapper est une classe de commodité qui gère le chargement de toutes les bibliothèques de graphiques appropriées et simplifie 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
  • Il est beaucoup plus facile d'interroger Datasources en créant l'objet Query et en gérant le rappel pour vous
  • Transmettez l'ID de l'élément conteneur, qui appelle "getElementByID".
  • Les données peuvent être envoyées dans différents formats: en tant que tableau de valeurs, chaîne littérale JSON ou identifiant 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. Pour obtenir des exemples, consultez la documentation sur ChartWrapper.

Exemples :

Voici un exemple de graphique à colonnes avec des données construites localement spécifiées sous forme de tableau. Vous ne pouvez pas spécifier de libellés de graphique ou de valeurs datetime à 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 obtient ses données en interrogeant une feuille de calcul Google. 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ées au chargement automatique, il 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 concevoir 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 graphique sur votre propre page et présenter 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.

 

GraphiqueDrawChart()

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

Avantages :

  • Identique à ChartWrapper, mais légèrement plus court à utiliser.

Inconvénients :

  • Ne renvoie pas d'identifiant dans le wrapper. Vous ne pouvez donc pas gérer d'événements.
<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