Visualisation: graphique d'images génériques

Important:La section "Graphiques d'images" de Google Outils de création de graphiques a été officiellement abandonnée depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.

  1. Overview
  2. Exemples
  3. Loading
  4. Format des données
  5. Options de configuration
  6. Méthodes
  7. Événements
  8. Règles concernant les données
  9. Localization

Présentation

Le graphique d'images génériques est un wrapper générique pour tous les graphiques produits par l'API de création de graphiques Google. Veuillez lire la documentation de l'API Chart avant d'essayer d'utiliser cette visualisation. Notez que vous pouvez envoyer jusqu'à 16 000 de données à l'aide de cette visualisation, contrairement à la limite de 2 000 dans les appels directs à l'API Chart.

Toutes les données sont transmises aux graphiques à l'aide d'un DataTable ou DataView. En outre, certains libellés sont transmis sous forme de colonnes dans la table de données.

Tous les autres paramètres d'URL de l'API de création de graphiques (à l'exception de chd) sont transmis en tant qu'options.

Par: Google

Exemples

Voici des exemples de différents types de graphiques.

Graphique en courbes

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

Graphique à barres verticales

Notez que dans les graphiques à barres encapsulées, vous n'avez pas besoin de spécifier chxt='x' comme vous le feriez si vous appelez vous-même le graphique. Si vous ne spécifiez pas d'axe, le graphique d'images génériques tente de configurer correctement le graphique par défaut.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

Graphique à secteurs

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

Graphique en radar

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

Graphique géographique

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

Chargement...

Le nom du package google.charts.load est "imagechart".

  google.charts.load('current', {'packages': ['imagechart']});

Le nom de classe de la visualisation est google.visualization.ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

Format des données

Il existe deux formats de données généralisées: un pour les graphiques cartographiques et un pour tous les autres. Notez que le seul format numérique accepté pour les données est le type Nombre JavaScript.

Remarque : Vous ne devez pas encoder en URL les valeurs de chaîne transmises en tant que données ou options.

Graphiques cartographiques

Un graphique de carte utilise une table de données avec deux colonnes obligatoires:

Pour en savoir plus, consultez la documentation sur les graphiques cartographiques.

Graphiques non cartographiques

Les graphiques non cartographiques utilisent une table de données avec deux colonnes facultatives (une au début et une à la fin) et une ou plusieurs colonnes de données intermédiaires:

  • Première colonne – [facultatif, chaîne] Chaque entrée représente un libellé utilisé sur l'axe X (équivalent au paramètre chl ou chxl) pour les graphiques compatibles.
  • Colonnes suivantes : un nombre illimité de colonnes numériques, chacune représentant une série de données.
  • Dernières colonnes : [facultatif, chaîne] N'importe quel nombre de colonnes de chaîne après les colonnes de données, où chaque entrée représente un libellé de point de données pour les graphiques compatibles. Si vous souhaitez utiliser cette colonne, vous devez spécifier l'option annotationColumns.

Les données seront affichées de différentes manières en fonction du type de graphique. Consultez la documentation correspondant à votre graphique.

Remarque sur les index de colonnes:La visualisation Generic Image Chart (Graphique d'images génériques) supprime les colonnes de chaîne de la table de données avant de l'envoyer au service de l'API Chart. Par conséquent, les index de colonne dans les options, les méthodes et les événements définis sur cette page incluent les colonnes de chaîne dans le nombre d'index. En revanche, les index de colonne des options gérées par le service de l'API Chart (par exemple, l'option chm) ignorent les colonnes de chaîne dans le nombre d'index.

Options de configuration

Les options suivantes sont définies pour cette visualisation. Définissez-les dans l'objet "options" transmis à la méthode draw() de la visualisation. Les options suivantes ne sont pas toutes compatibles avec tous les types de graphiques. Consultez la documentation de votre type de graphique à images statiques. Vous pouvez transmettre n'importe quel paramètre d'URL de l'API Chart en tant qu'option. Par exemple, le paramètre d'URL chg=50,50 d'une visualisation sous forme de graphique serait spécifié comme suit: options['chg'] = '50,50'.

Remarque concernant les couleurs:Les options de couleur telles que colors, color et backgroundColor sont spécifiées dans le format de couleur de l'API Chart. Ce format est semblable au format #RRGGBB, sauf qu'il inclut un quatrième nombre hexadécimal facultatif pour indiquer la transparence. Les couleurs lisibles par l'humain, telles que "rouge", "vert", "bleu", etc., ne sont pas acceptées. Le format de couleur de l'API Chart n'inclut pas le symbole # au début, mais les options de visualisation du graphique d'image générique acceptent les codes couleur avec ou sans signe #.

Nom Type Par défaut Description
annotationColumns Array<object> none

Étiquettes de points de données pour différents types de graphiques. Il s'agit d'un tableau d'objets, chacun attribuant une étiquette formatée à un point de données du graphique. Cette option n'est disponible que pour les graphiques qui acceptent les points de données (consultez l'article associé pour savoir lesquels) et la table de données doit comporter au moins l'une des colonnes de libellé de chaîne.

Chaque objet du tableau possède les propriétés suivantes:

  • column [nombre] : index basé sur zéro de la colonne contenant le texte utilisé dans l'annotation. Il n'est pas nécessaire d'inclure une valeur dans chaque ligne de cette colonne.
  • positionColumn [nombre] : index basé sur zéro de la colonne contenant le point de données étiqueté. La valeur par défaut est la première colonne de données.
  • color [chaîne] : couleur du texte de l'annotation dans le format de couleur de l'API Chart. La valeur par défaut est "#000000" (noir).
  • size [nombre] : taille de la police de l'annotation, en pixels.
  • priority [chaîne] : "low", "medium" ou "high", spécifiant le calque dans lequel le libellé doit être dessiné. La valeur par défaut est "medium" (moyenne), ce qui signifie que le libellé est dessiné après les barres et les lignes, mais avant les autres libellés.
  • type [chaîne] : "text" ou "flag". "text" crée une annotation en texte brut et "flag" crée une annotation de bulle.

Exemple : Cet extrait définit une étiquette de texte noire de 12 pixels, dont le texte provient de la colonne 0 et est attribué au point de données dans la colonne 2 de la même ligne : options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
backgroundColor chaîne '#FFFFFF' (blanc) Couleur d'arrière-plan du graphique dans le format de couleurs de l'API Chart
color chaîne Auto Spécifie une couleur de base à utiliser pour toutes les séries. Chaque série correspond à un dégradé de la couleur spécifiée. Les couleurs sont spécifiées dans le format de couleurs de l'API Chart. Ignoré si colors est spécifié.
colors Tableau<chaîne> Auto Utilisez cette option pour attribuer des couleurs spécifiques à chaque série de données. Les couleurs sont spécifiées dans le format de couleurs de l'API Chart. La couleur i est utilisée pour la colonne de données i, en encadrant le début jusqu'au début s'il y a plus de colonnes de données que de couleurs. Si les variantes d'une seule couleur sont acceptables pour toutes les séries, utilisez plutôt l'option color.
enableEvents boolean false Entraîne la génération d'événements déclenchés par l'utilisateur dans les graphiques, tels qu'un clic ou le survol de la souris. Compatible uniquement avec des types de graphiques spécifiques. Consultez la section Événements ci-dessous.
fill boolean false Si la valeur est "true", la zone sous chaque ligne est remplie. Disponible uniquement pour les graphiques en courbes.
firstHiddenColumn Nombre none

Un index de colonne de données. La colonne indiquée, ainsi que toutes les colonnes suivantes, ne seront pas utilisées pour dessiner les principaux éléments d'une série de graphiques (tels que les lignes d'un graphique en courbes ou les barres d'un graphique à barres), mais plutôt comme données pour les repères et autres annotations. Notez que les colonnes de chaîne sont incluses dans ce nombre d'index.
taille Nombre 200 Hauteur du graphique, en pixels. Si la valeur est manquante ou n'est pas comprise dans une plage acceptable, la hauteur de l'élément conteneur est utilisée. Si elle se trouve également en dehors de la plage acceptable, la hauteur par défaut sera utilisée.
étiquettes chaîne "none" (aucune)

[Graphique à secteurs uniquement] Étiquette, le cas échéant, à afficher pour chaque secteur. Choisissez l'une des valeurs suivantes:

  • "none" : aucun libellé.
  • "value" : affiche la valeur du secteur sous forme de libellé.
  • "name" : affiche le nom de la tranche (nom de la colonne) sous forme de libellé.
légende chaîne 'droite' Emplacement d'affichage d'une légende relative au graphique. Spécifiez l'une des valeurs suivantes: "top", "bottom", "left", "right" ou "none". Ignoré dans les graphiques qui ne comportent pas de légendes (comme les graphiques de carte).
max Nombre Valeur maximale des données Valeur maximale affichée sur la balance. Ignoré pour les graphiques à secteurs. La valeur par défaut est la valeur de données maximale, sauf pour les graphiques à barres, où la valeur par défaut est la valeur de données maximale. Cette valeur est ignorée pour les graphiques à barres lorsque la table comporte plusieurs colonnes de données.
min Nombre Valeur minimale des données Valeur minimale affichée sur l'échelle. Ignoré pour les graphiques à secteurs. La valeur par défaut est la valeur minimale des données, sauf pour les graphiques à barres où la valeur par défaut est zéro. Cette valeur est ignorée pour les graphiques à barres lorsque la table comporte plusieurs colonnes de données.
showCategoryLabels boolean true Permet d'afficher ou non les libellés sur l'axe des catégories (lignes). Disponible uniquement pour les graphiques en courbes et à barres.
showValueLabels boolean true "True" affiche une étiquette sur l'axe des valeurs. Disponible uniquement pour les graphiques en courbes et à barres.
singleColumnDisplay Nombre none Affiche uniquement la colonne de données spécifiée. Ce nombre est un index de base zéro dans la table, où zéro est la première colonne de données. La couleur attribuée à une seule colonne est la même que lorsque toutes les colonnes sont affichées. Cet outil ne peut pas être utilisé avec des graphiques à secteurs ou des cartes.
titre chaîne Chaîne vide Titre du graphique. S'il n'est pas spécifié, aucun titre ne s'affiche. Le paramètre de graphique équivalent est chtt.
valueLabelsInterval Nombre Auto Intervalle auquel afficher les libellés de l'axe des valeurs. Par exemple, si min correspond à 0, max à 100 et valueLabelsInterval à 20, le graphique affichera les libellés des axes (0, 20, 40, 60, 80 100).
largeur Nombre 400 Largeur du graphique, en pixels. Si la valeur est manquante ou n'est pas comprise dans une plage acceptable, la largeur de l'élément conteneur est utilisée. Si elle se situe également en dehors de la plage acceptable, la largeur par défaut sera utilisée.

Méthodes

Méthode Type renvoyé Description
draw(data, options) Aucun Dessine la carte.
getImageUrl() Chaîne Renvoie l'URL de l'API Google Chart utilisée pour demander le graphique. Notez qu'il peut comporter plus de 2 000 caractères. Pour en savoir plus, consultez l'API Google Chart.

Événements

Si vous définissez la propriété enableEvents sur "true", les graphiques correspondants génèrent des événements pour les événements utilisateur répertoriés dans le tableau ci-dessous. Tous ces événements renvoient un objet event avec les propriétés suivantes:

  • type : chaîne représentant le type d'événement.
  • region : identifiant de la région concernée. Ajoutez le paramètre chof=json au type de graphique brut pour afficher la liste des noms disponibles. Pour en savoir plus, consultez chof=json.
Nom Description type Valeur
error Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. ID, message
onmouseover Déclenché lorsque l'utilisateur pointe sur un élément du graphique. "passage de la souris"
onmouseout Déclenché lorsque l'utilisateur éloigne la souris d'un élément du graphique. "mouseout" (prise de la souris)
onclick Déclenché lorsqu'un utilisateur clique sur un élément du graphique.

"cliquer"

Quels graphiques sont compatibles avec les événements ?

Tous les graphiques compatibles avec le paramètre chof=json peuvent générer des événements (c'est-à-dire tous les graphiques, à l'exception des graphiques spéciaux, tels que les codes QR).

Exemple de gestion des événements

Voici un exemple illustrant une barre qui enregistre les clics de souris.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

Règles concernant les données

Les données sont envoyées au service de l'API Google Chart.

Localisation

Cette visualisation est compatible avec toute localisation acceptée par le service Google Charts.