Visualisation: diagramme animé

  1. Présentation
  2. Exemple
  3. Loading
  4. Définir l'état initial
  5. Format des données
  6. Options de configuration
  7. Méthodes
  8. Événements
  9. Règles concernant les données
  10. Remarques

Présentation

Graphique dynamique permettant d'explorer plusieurs indicateurs dans le temps Le graphique est affiché dans le navigateur à l'aide de Flash.

Remarque à l'attention des développeurs : en raison des paramètres de sécurité de Flash, cela (et toutes les visualisations Flash) peut ne pas fonctionner correctement lorsqu'on y accède depuis un emplacement de fichier dans le navigateur (par exemple, file:///c:/webhost/myhost/myviz.html) plutôt que depuis une URL de serveur Web (par exemple, http://www.myhost.com/myviz.html). Il s'agit généralement d'un problème de test uniquement. Vous pouvez résoudre ce problème comme décrit sur le site Web d'Adobe.

Exemple

(Notez que le code suivant ne fonctionnera pas s'il est chargé en tant que fichier local. Il doit être chargé à partir d'un serveur Web.)

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

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sales');
        data.addColumn('number', 'Expenses');
        data.addColumn('string', 'Location');
        data.addRows([
          ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
          ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
          ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
          ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
          ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
          ['Bananas', new Date (1989,6,1), 788,  617, 'West']
        ]);

        var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 600, height:300});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 600px; height: 300px;"></div>
  </body>
</html>

Chargement...

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

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

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

  var visualization = new google.visualization.MotionChart(container);

Format des données

  • La première colonne doit être de type "chaîne" et contenir les noms des entités (par exemple, "Pommes", "Oranges", "Bananes" dans l'exemple ci-dessus.
  • La deuxième colonne doit contenir des valeurs temporelles. L'heure peut être exprimée dans l'un des formats suivants :
    • Année – Type de colonne : "nombre". Exemple: 2008.
    • Mois, jour et année – Type de colonne : "date". Les valeurs doivent être des instances Date JavaScript.
    • Week number (Numéro de semaine) – Type de colonne : "string" (chaîne). Les valeurs doivent respecter le format AAAAWww, qui est conforme à la norme ISO 8601. Exemple : "2008W03".
    • Trimestre : type de colonne : "chaîne". Les valeurs doivent utiliser le format AAAAQq, qui est conforme à la norme ISO 8601. Exemple : "2008T3".
  • Les colonnes suivantes peuvent être de type "nombre" ou "chaîne". Les colonnes de nombres s'affichent dans les menus déroulants des axes X, Y, Couleur et Taille. Les colonnes de type chaîne ne s'affichent que dans le menu déroulant "Couleur". Voir l'exemple ci-dessus.

Définition de l'état initial

Vous pouvez spécifier que le diagramme animé commence par un état spécifique, c'est-à-dire un ensemble d'entités sélectionnées et de personnalisations de vue. Pour ce faire, vous devez d'abord créer et afficher le graphique, effectuer les changements d'état que vous souhaitez que le graphique affiche (sélectionner les valeurs, modifier les paramètres, etc.), puis exporter ces paramètres en tant que chaîne et enfin utiliser cette chaîne dans votre code, en l'attribuant à l'option "État". Les deux sections suivantes expliquent comment exporter et utiliser le code d'état.

  1. Ouvrez un graphique fonctionnel et définissez les paramètres que vous souhaitez capturer. Les paramètres que vous pouvez spécifier incluent les niveaux d'opacité, le zoom et la mise à l'échelle linéaire/journalière.
  2. Ouvrez le panneau des paramètres en cliquant sur l'icône représentant une clé à molette dans le coin inférieur droit du graphique.
  3. Cliquez sur le lien Avancé dans l'angle inférieur gauche pour ajouter le panneau Avancé à l'ensemble.
  4. Développez le panneau Advanced (Avancé) et copiez le contenu de la zone de texte State (État) dans le presse-papiers. (Remarque: au lieu d'utiliser le menu décrit dans les étapes 2 à 4, vous pouvez insérer un bouton sur votre page qui appelle getState() et affiche l'état actuel dans une zone de message.)
  5. Attribuez la chaîne d'état que vous avez copiée à l'étape précédente au paramètre d'options "state" dans votre code, comme illustré ici. Une fois transmis à la méthode draw(), le graphique est initialisé à l'état spécifié au démarrage.
var options = {};
options['state'] =
'{"iconKeySettings":[],"stateVersion":3,"time":"notime","xAxisOption":"_NOTHING","playDuration":15,"iconType":"BUBBLE","sizeOption":"_NOTHING","xZoomedDataMin":null,"xZoomedIn":false,"duration":{"multiplier":1,"timeUnit":"none"},"yZoomedDataMin":null,"xLambda":1,"colorOption":"_NOTHING","nonSelectedAlpha":0.4,"dimensions":{"iconDimensions":[]},"yZoomedIn":false,"yAxisOption":"_NOTHING","yLambda":1,"yZoomedDataMax":null,"showTrails":true,"xZoomedDataMax":null};';

options['width'] = 600;
options['height'] = 400;
chart.draw(data, options);

Options de configuration

Nom Type Par défaut Description
hauteur number (nombre) 300 Hauteur du graphique en pixels.
largeur number (nombre) 500 Largeur du graphique en pixels.
state chaîne none État initial du graphique. Il s'agit d'un objet JSON sérialisé qui décrit le niveau de zoom, les dimensions, les bulles/entités sélectionnées et d'autres descriptions d'état. Pour savoir comment procéder, consultez la section Définir l'état initial.
showChartButtons booléen true La valeur "false" masque les boutons qui contrôlent le type de graphique (bulles / lignes / colonnes) en haut à droite.
showHeader booléen true La valeur "false" masque le libellé de titre des entités (dérivé du libellé de la première colonne du tableau de données).
showSelectListComponent booléen true La valeur "false" masque la liste des entités visibles.
showSidePanel booléen true La valeur "false" masque le panneau de droite.
ÉmissionXMetricPicker booléen true La valeur "false" permet de masquer le sélecteur de métriques pour x.
Sélecteur d'émissions booléen true La valeur "false" permet de masquer le sélecteur de métriques pour "y".
showXScalePicker booléen true La valeur "false" masque le sélecteur d'échelle pour x.
sélecteur de sélecteur d'échelle booléen true La valeur "false" masque le sélecteur d'échelle pour "y".
Afficher le panneau avancé booléen true La valeur "false" désactive le compartiment des options dans le panneau des paramètres.

Méthodes

Méthode Type renvoyé Description
draw(data, options) none Dessine le graphique à l'aide des options fournies.
getState() chaîne Renvoie l'état actuel du diagramme animé, sérialisé en une chaîne JSON. Pour attribuer cet état au graphique, attribuez cette chaîne à l'option state dans la méthode draw(). Cette valeur est souvent utilisée pour spécifier un état de graphique personnalisé au démarrage, au lieu d'utiliser l'état par défaut.

Événements

Nom Description Propriétés
error Déclenché en cas d'erreur lors de la tentative d'affichage du graphique identifiant, message
prêt Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode de dessin et ne les appeler qu'après le déclenchement de l'événement. Aucune
changement d'état L'utilisateur a interagi d'une manière ou d'une autre avec le graphique. Appelez getState() pour connaître l'état actuel du graphique. Aucune

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.

Remarques

Du fait des paramètres de sécurité Flash, cette méthode (et toutes les visualisations Flash) risque de ne pas fonctionner correctement lorsqu'on accède à partir d'un fichier dans le navigateur (par exemple, file:///c:/webhost/myhost/myviz.html) plutôt qu'à partir d'une URL de serveur Web (par exemple, http://www.myhost.com/myviz.html). Il s'agit généralement d'un problème de test uniquement. Vous pouvez résoudre ce problème comme décrit sur le site Web Macromedia.