Barre d'outils

  1. Overview
  2. Exemple
  3. Utilisation
    1. Types de sortie
    2. Syntaxe
  4. Règles concernant les données

Présentation

Vous pouvez ajouter un élément de barre d'outils à n'importe quelle visualisation pour permettre à l'utilisateur d'exporter les données sous-jacentes dans un fichier CSV ou un tableau HTML, ou pour fournir le code permettant d'intégrer la visualisation dans une page Web ou un gadget arbitraire.

Par: Google

Exemple

Sélectionnez l'une des options de la barre d'outils.

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['corechart']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

Utilisation

Ajoutez une barre d'outils à votre page en appelant la méthode google.visualization.drawToolbar() et en la renseignant avec les types d'exportations autorisés et les données requises pour chacun.

Pour utiliser une barre d'outils, votre visualisation doit obtenir ses données à partir d'une URL. Vous ne pouvez pas transmettre d'objets DataTable ou DataView renseignés manuellement. Vous transmettrez l'URL des données utilisées pour renseigner votre visualisation dans la méthode drawToolbar().

Si vous souhaitez fournir un composant iGoogle ou un iFrame intégrable contenant le gadget, vous devez disposer de l'URL d'une version de la visualisation composée de gadgets.

Types de sortie

La barre d'outils peut proposer à l'utilisateur un ou plusieurs des types de sortie suivants, selon la configuration de la barre d'outils dans la méthode drawToolbar():

  • Une simple version CSV des données (que votre navigateur affiche ou propose de télécharger et d'enregistrer, en fonction de la configuration de votre navigateur) et/ou
  • Un tableau HTML contenant les données, ouvert dans une nouvelle fenêtre de navigateur, et/ou
  • du code <iframe> HTML pour intégrer cette visualisation dans une page Web ; et/ou
  • Lien vers la page permettant à l'utilisateur d'intégrer ce gadget à sa page iGoogle.

Syntaxe

google.visualization.drawToolbar(container, components)

Paramètres

conteneur
Poignée d'un élément DOM sur la page. L'API ajoutera la barre d'outils à cet élément. Ce paramètre est semblable au paramètre de conteneur pour une visualisation standard. Vous devez placer la barre d'outils à côté de la visualisation qui l'utilise.
composants
Tableau d'objets, chacun décrivant un format dans lequel les données ou la visualisation peuvent être exportées. La barre d'outils présente les options à l'utilisateur dans l'ordre ajouté au tableau. Chaque objet est associé à une propriété de type décrivant le format, ainsi qu'à une ou plusieurs propriétés supplémentaires, selon le type :
  • type: 'csv' : cette option exporte les données dans un fichier de valeurs séparées par des virgules. Une boîte de dialogue "Enregistrer sous" s'ouvre dans le navigateur.
    • datasource : chaîne – URL de la source de données.
  • type: html' : cette option exporte les données dans un tableau HTML. La page contenant le tableau de données s'ouvre dans une nouvelle fenêtre du navigateur.
    • datasource: chaîne de l'URL de la source de données.
  • type: igoogle : cette option permet à l'utilisateur d'ajouter la visualisation à sa page iGoogle. Une page "Ajouter à iGoogle" s'ouvre dans le navigateur. N'utilisez cette option que si la visualisation est disponible dans une version avec gadgets.
    • datasource: chaîne de l'URL de la source de données.
    • gadget: chaîne d'URL XML de la version utilisant des gadgets. Notez que la visualisation à laquelle la barre d'outils est associée ne doit pas nécessairement correspondre à la version gadget.
    • userprefs: objet de préférences facultatif adapté à cette visualisation, spécifiant les préférences de visualisation.
  • type: htmlcode : cette option crée un bloc de code HTML que l'utilisateur peut intégrer à une page Web pour afficher la visualisation dans un iFrame. Une fenêtre pop-up contenant l'élément HTML exact du gadget s'ouvre dans le navigateur.N'utilisez cette option que si la visualisation est disponible dans une version avec gadget.
    • datasource: chaîne de l'URL de la source de données.
    • gadget: chaîne de l'URL XML du gadget.
    • userprefs: objet de préférences facultatif adapté à cette visualisation, spécifiant les préférences de visualisation.
    • style: chaîne facultative pour le style de l'iFrame. Par exemple: "width: 300px; height: 500px;".

Exemple

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

Règles concernant les données

L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur. Pour certains composants, les données proviennent de la source de données associée à la barre d'outils.

Localisation

La barre d'outils n'est actuellement compatible qu'avec l'anglais américain.