Barre d'outils

  1. Présentation
  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 à une visualisation pour permettre à l'utilisateur d'exporter les données sous-jacentes dans un fichier CSV ou une table HTML, ou de fournir du 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(), en indiquant les types d'exportation autorisés et les données requises pour chacune d'elles.

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 allez transmettre l'URL des données utilisées pour insérer 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 d'une URL pour une version interactive de la visualisation.

Types de sortie

La barre d'outils permet à l'utilisateur de choisir un ou plusieurs des types de sortie suivants, en fonction de la configuration de votre barre d'outils dans la méthode drawToolbar():

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

Syntaxe

google.visualization.drawToolbar(container, components)

Paramètres

conteneur
Poignée vers un élément DOM sur la page. L'API insère la barre d'outils dans 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ésentera les options à l'utilisateur dans l'ordre ajouté au tableau. Chaque objet possède une propriété de type décrivant le format et une ou plusieurs propriétés supplémentaires, en fonction du type :
  • type: 'csv' : cette option exporte les données dans un fichier de valeurs séparées par une virgule. Une boîte de dialogue "Enregistrer sous" s'ouvre dans le navigateur.
    • datasource : string : URL de la source de données
  • type: html' : cette option exporte les données vers une table HTML. La page contenant le tableau de données s'ouvre dans une nouvelle fenêtre du navigateur.
    • datasource : chaîne d'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. Utilisez cette méthode uniquement si la visualisation est disponible dans une version interactive.
    • datasource: chaîne d'URL de la source de données
    • gadget : chaîne d'URL xml de la version gadget. Notez que la visualisation à laquelle la barre d'outils est associée ne doit pas nécessairement être la version interactive.
    • userprefs: objet facultatif de préférences 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 cadre 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 interactive.
    • datasource: chaîne d'URL de la source de données
    • gadget : chaîne d'URL du fichier XML du gadget.
    • userprefs: objet facultatif de préférences adapté à cette visualisation, spécifiant les préférences de visualisation.
    • style: chaîne facultative du style du cadre iFrame. 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 relatives aux données

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

Localisation

Pour le moment, la barre d'outils n'est disponible qu'en anglais américain.