Visualisation: diagramme animé

  1. Overview
  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. Notes

Présentation

Graphique dynamique pour explorer plusieurs indicateurs au fil du temps. Le graphique est affiché dans le navigateur à l'aide de Flash.

Remarque pour les développeurs: En raison des paramètres de sécurité Flash, il est possible que cette page (et toutes les visualisations Flash) ne fonctionne pas correctement lorsque vous y accédez à partir d'un emplacement de fichier dans le navigateur (par exemple, fichier:///c:/webhost/monhôte/myviz.html) plutôt qu'à partir d'une URL de serveur Web (par exemple, http://www.monhôte.com/myviz.html). Il s'agit généralement d'un problème de test uniquement. Pour résoudre ce problème, consultez 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 "string" (chaîne) et contenir les noms d'entité (par exemple, "Pommes", "Oranges" ou "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 : "number" (nombre). Exemple: 2008.
    • Mois, jour et année : type de colonne : "date". Les valeurs doivent être des instances JavaScript Date.
    • Week number (Numéro de semaine) : type de colonne : "string" (chaîne). Les valeurs doivent suivre le format AAAAWww, qui est conforme à la norme ISO 8601. Exemple: "2008W03".
    • Quarter (Trimestre) : type de colonne : "string" (chaîne). Les valeurs doivent suivre le format AAAAQq, conformément à la norme ISO 8601. Exemple: "2008Q3".
  • Les colonnes suivantes peuvent être de type "number" ou "string". Les colonnes de nombres s'affichent dans les menus déroulants pour les axes X, Y, Couleur et Taille. Les colonnes de chaîne n'apparaissent que dans le menu déroulant "Couleur". Reportez-vous à l'exemple ci-dessus.

Définir l'état initial

Vous pouvez spécifier que le graphique de mouvement commence par un état spécifique, c'est-à-dire un ensemble d'entités sélectionnées et des personnalisations de vue. Pour ce faire, vous devez d'abord créer et afficher le graphique, effectuer les changements d'état que vous souhaitez afficher (sélectionner des valeurs, modifier les paramètres, etc.), exporter ces paramètres sous forme de chaîne, et enfin utiliser cette chaîne dans votre code, en l'attribuant à l'option "state". Les deux sections suivantes décrivent 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 logarithmique ou linéaire.
  2. Ouvrez le panneau Paramètres en cliquant sur l'icône représentant une clé à molette dans l'angle inférieur droit du graphique.
  3. Cliquez sur le lien Advanced (Avancé) dans le coin inférieur gauche pour ajouter le panneau Advanced (Avancé) à l'ensemble.
  4. Développez le panneau Advanced (Avancé) et copiez le contenu de la zone de texte State dans votre presse-papiers. Remarque: au lieu d'utiliser le menu décrit aux étapes 2 à 4, vous pouvez insérer sur votre page un bouton 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 indiqué ici. Lorsqu'il est transmis à la méthode draw(), le graphique est initialisé sur 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
taille Nombre 300 Hauteur du graphique en pixels.
largeur Nombre 500 Largeur du graphique en pixels.
state chaîne none État d'affichage initial du graphique. Il s'agit d'un objet JSON sérialisé qui décrit le niveau de zoom, les dimensions sélectionnées, les bulles/entités sélectionnées et d'autres descriptions d'état. Pour savoir comment définir cela, consultez la section Définir l'état initial.
showChartButtons boolean true La valeur "false" masque les boutons qui contrôlent le type de graphique (bulles / lignes / colonnes) dans l'angle supérieur droit.
showHeader boolean true La valeur "false" masque l'étiquette de titre des entités (issue de l'étiquette de la première colonne de la table de données).
showSelectListComponent boolean true La valeur "false" masque la liste des entités visibles.
showSidePanel boolean true La valeur "false" masque le panneau de droite.
showXMetricPicker boolean true false masque l'outil de sélection de métriques pour x.
showYMetricPicker boolean true La valeur "false" masque l'outil de sélection de métriques pour y.
showXScalePicker boolean true false masque le sélecteur d'échelle pour x.
showYScalePicker boolean true La valeur "false" masque le sélecteur d'échelle pour y.
showAdvancedPanel boolean true "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 avec les options fournies.
getState() chaîne Renvoie l'state actuel du diagramme de mouvement, sérialisé en 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é lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. ID, message
prêt Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode de dessin, puis ne les appeler qu'après le déclenchement de l'événement. Aucun
changement d'état L'utilisateur a interagi avec le graphique d'une manière ou d'une autre. Appelez getState() pour connaître l'état actuel du graphique. Aucun

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.

Remarques

En raison des paramètres de sécurité Flash, il est possible que cette page (et toutes les visualisations Flash) ne fonctionne pas correctement lorsque vous y accédez à partir d'un emplacement de fichier dans le navigateur (par exemple, fichier:///c:/webhost/monhôte/myviz.html) plutôt qu'à partir d'une URL de serveur Web (par exemple, http://www.monhôte.com/monviz.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 de Macromedia.