Présentation
Graphique linéaire linéaire interactif avec des annotations facultatives.
La chronologie annotée utilise désormais automatiquement des graphiques d'annotations.
Exemple
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
Important : Pour utiliser cette visualisation, vous devez spécifier la hauteur et la largeur de l'élément conteneur explicitement sur votre page. Par exemple: <div id="chart_div"
style="width:400; height:250"></div>.
Chargement...
Le nom du package google.charts.load est "annotatedtimeline"
google.charts.load("current", {packages: ['annotatedtimeline']});
Le nom de classe de la visualisation est google.visualization.AnnotatedTimeLine
var visualization = new google.visualization.AnnotatedTimeLine(container);
Format des données
Vous pouvez afficher une ou plusieurs lignes sur votre graphique. Chaque ligne représente une position X sur le graphique, c'est-à-dire un moment spécifique. Chaque ligne est décrite par un ensemble de une à trois colonnes.
- La première colonne est de type
dateoudatetimeet spécifie la valeur X du point sur le graphique. Si cette colonne est de typedate(et nondatetime), la résolution temporelle la plus faible sur l'axe X sera d'un jour. - Chaque ligne de données est ensuite décrite par un ensemble de une à trois colonnes supplémentaires, comme décrit ci-dessous :
- Valeur Y - [obligatoire, nombre]. La première colonne de chaque ensemble décrit la valeur de la ligne au moment correspondant à partir de la première colonne. Le libellé de la colonne est affiché sur le graphique en tant que titre de la ligne.
- Titre d'annotation - [Facultatif, chaîne] Si une colonne de chaîne suit la colonne de valeur et que l'option
displayAnnotationsest "true", cette colonne contient un titre court décrivant ce point. Par exemple, si cette ligne représente la température au Brésil et que ce point est très élevé, le titre pourrait être "Jour le plus chaud enregistré". - Texte d'annotation - [Chaîne facultative] S'il existe une deuxième colonne de chaîne pour cette série, la valeur de la cellule sera utilisée comme texte descriptif supplémentaire pour ce point. Pour utiliser cette colonne, vous devez définir l'option
displayAnnotationssur "true". Vous pouvez utiliser des tags HTML si vous définissezallowHtmlsurtrue. Il n'y a pas de limite de taille, mais notez que les entrées trop longues risquent de dépasser la section d'affichage. Vous n'êtes pas obligé d'avoir cette colonne, même si vous avez une colonne de titre d'annotation pour ce point. Le libellé de colonne n'est pas utilisé par le graphique. Par exemple, s'il s'agissait du jour le plus chaud de l'enregistrement, vous pourriez dire "Le jour le plus proche a eu 10 degrés de moins".
Options de configuration
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| allowHtml | booléen | false | Si ce paramètre est défini sur "true", tout texte d'annotation comprenant des balises HTML sera rendu HTML. |
| allowRedraw | booléen | false | Permet une technique de redimensionnement plus efficace pour les deuxièmes appels et les appels ultérieurs à
|
| allValuesSuffix | chaîne | none | Suffixe à ajouter à toutes les valeurs des échelles et de la légende. |
| annotationsWidth | number (nombre) | 25 | Largeur (en pourcentage) de la zone d'annotations, sur l'ensemble de la zone du graphique. Veuillez saisir un nombre compris entre 5 et 80. |
| colors | Tableau de chaînes | Couleurs par défaut | Couleurs à utiliser pour les lignes et les libellés du graphique. Tableau de chaînes. Chaque élément est une chaîne au format de couleur HTML valide. Par exemple, "rouge" ou "#00cc00". |
| Format de date | chaîne | "MMMM dd, yyyy" ou "HH:mm MMMM dd, yyyy", selon le type de la première colonne (date ou date/heure, respectivement). | Format utilisé pour afficher les informations de date en haut à droite. Le format de ce champ est spécifié par la classe java SimpleDateFormat. |
| Annotations display | booléen | false | Si la valeur est "true", le graphique affiche des annotations sur les valeurs sélectionnées. Lorsque cette option est définie sur "true", après chaque colonne numérique, vous pouvez ajouter deux colonnes de chaîne d'annotation facultatives, une pour le titre de l'annotation et une pour le texte de l'annotation. |
| Filtre d'annotations display | booléen | false | Si ce paramètre est défini sur "true", le graphique affiche un filtre pour filtrer les annotations. Utilisez cette option lorsqu'il existe de nombreuses annotations. |
| DisplayDateBarSeparator | booléen | true | Indique s'il faut afficher un petit séparateur de barre ( | ) entre les valeurs de la série et la date de la légende, où "true" signifie "oui". |
| ValeursDisplayDisplayExactes | booléen | false | Indique s'il faut afficher une version raccourcie et arrondie des valeurs en haut du graphique, afin d'économiser de l'espace. La valeur "false" indique que c'est le cas. Par exemple, si la valeur est "false", 56123.45 peut être affiché sous la forme 56.12k. |
| displayLegendDots | booléen | true | Indique s'il faut afficher les points à côté des valeurs dans la légende, où "true" signifie "oui". |
| displayLegendValues | booléen | true | Indique s'il faut afficher les valeurs mises en surbrillance dans la légende, où "true" signifie "oui". |
| sélecteur de plage d'affichage | booléen | true | Indique s'il faut afficher la zone de sélection de la plage de zoom (zone en bas du graphique), où "false" signifie "non". Le contour du sélecteur de zoom est une version d'échelle logarithmique de la dernière série du graphique, adaptée à la hauteur du sélecteur de zoom. |
| displayZoomButton | booléen | true | Indique s'il faut afficher les liens de zoom ("1d 5d 1m", etc.), où "false" signifie "non". |
| fill | number (nombre) | 0 | Nombre compris entre 0 et 100 (inclus) spécifiant l'alpha de remplissage sous chaque ligne du graphique linéaire. La valeur 100 correspond à un remplissage opaque à 100 %, la valeur 0 à aucun remplissage. La couleur de remplissage est identique à celle de la ligne située au-dessus. |
| point_point | chaîne | "le plus proche" | Point sur la série à mettre en surbrillance, et valeurs correspondantes à afficher dans la légende. Sélectionnez l'une des valeurs suivantes:
|
| position de la légende | chaîne | "sameRow" | Permet de placer la légende colorée sur la même ligne à l'aide des boutons de zoom et de la date ("sameRow"), ou sur une nouvelle ligne ("newRow"). |
| max | number (nombre) | Prétraitement automatique | Valeur maximale à afficher sur l'axe Y. Si le point de données maximal dépasse cette valeur, ce paramètre est ignoré, et le graphique est ajusté de manière à afficher la prochaine coche majeure au-dessus du point de données maximal. Elle aura priorité sur le maximum de l'axe Y déterminé par scaleType. |
| min | number (nombre) | Prétraitement automatique | Valeur minimale à afficher sur l'axe Y. Si le point de données minimal est inférieur à cette valeur, ce paramètre sera ignoré, et le graphique sera ajusté pour afficher la prochaine coche majeure sous le point de données minimal. Cela aura priorité sur le minimum de l'axe Y déterminé par scaleType. |
| formats numériques | Chaîne ou mappage de paires "number:String" | Prétraitement automatique | Spécifie les formats de format numérique à utiliser pour formater les valeurs en haut du graphique. Les formats doivent être au format spécifié par la classe java DecimalFormat.
Si cette option est spécifiée, l'option |
| Colonnes d'échelle | Tableau de nombres | Automatic | Spécifie les valeurs à afficher sur les coches de l'axe Y du graphique. Par défaut, une seule échelle s'affiche du côté droit, ce qui s'applique aux deux séries. Toutefois, vous pouvez adapter différents côtés du graphique à différentes valeurs de série. Cette option utilise un tableau de zéro à trois chiffres spécifiant l'index (basé sur zéro) de la série à utiliser comme valeur d'échelle. L'emplacement de ces valeurs dépend du nombre de valeurs que vous incluez dans votre tableau:
Si vous affichez plusieurs échelles, il est recommandé de définir l'option |
| Type d'évolutivité | chaîne | 'fixed' [fixe] | Définit les valeurs minimale et maximale affichées sur l'axe Y. Les options suivantes sont disponibles:
Si vous spécifiez les options minimale et/ou maximale, elles seront prioritaires sur les valeurs minimale et maximale déterminées par votre type d'échelle. |
| épaisseur | number (nombre) | 0 | Nombre compris entre 0 et 10 (inclus) spécifiant l'épaisseur des lignes, où 0 correspond à la valeur la plus fine. |
| Wmode | chaîne | fenêtre | Paramètre Mode fenêtre (wmode) pour le graphique Flash. Les valeurs disponibles sont "opaque" ou "window" ou "transparent". |
| Heure de fin du zoom | Date | none | Définit la date/l'heure de fin de la plage de zoom sélectionnée. |
| Heure de début du zoom | Date | none | Définit la date et l'heure de début de la plage de zoom sélectionnée. |
Méthodes
| Méthode | Type renvoyé | Description |
|---|---|---|
draw(data, options) |
none | Dessine le graphique. Vous pouvez accélérer le temps de réponse pour les deuxièmes appels et les appels ultérieurs à draw() en utilisant la propriété allowRedraw. |
getSelection() |
Tableau d'éléments de sélection | Implémentation getSelection() standard. Les éléments sélectionnés sont des éléments de cellule. L'utilisateur ne peut sélectionner qu'une seule cellule à la fois. |
getVisibleChartRange() |
Un objet avec les propriétés start et end |
Renvoie un objet avec les propriétés start et end, chacune d'entre elles étant un objet Date représentant la sélection de l'heure actuelle. |
hideDataColumns(columnIndexes) |
none | Masque la série de données spécifiée du graphique. Accepte un paramètre qui peut être un nombre ou un tableau de nombres, dans lequel 0 fait référence à la première série de données, etc. |
setVisibleChartRange(start, end) |
none | Définit la plage visible (zoom) sur la plage spécifiée.
Accepte deux paramètres de type Date qui représentent les première et dernière heures de la plage visible souhaitée. Définissez start sur null pour inclure tous les éléments compris entre la première date et end, et end sur null pour inclure toutes les valeurs comprises entre start et la dernière date. |
showDataColumns(columnIndexes) |
none | Affiche la série de données spécifiée du graphique, après qu'elles ont été masquées à l'aide de la méthode hideDataColumns.
Accepte un paramètre qui peut être un nombre ou un tableau de nombres, dans lequel 0 fait référence à la première série de données, etc. |
Événements
| Nom | Description | Propriétés |
|---|---|---|
| changement de plage | La plage de zoom a été modifiée. Déclenché après que l'utilisateur a modifié la période visible, mais pas après un appel à la méthode setVisibleChartRangeRemarque: Nous vous recommandons de ne pas utiliser les propriétés de l'événement, mais de les obtenir en appelant la méthode getVisibleChartRange. |
|
| 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 draw et ne les appeler qu'après le déclenchement de l'événement. |
Aucune |
| select | Lorsque l'utilisateur clique sur un indicateur (repère), la cellule correspondante dans la table de données est sélectionnée. La visualisation déclenche ensuite cet événement. | Aucune |
Remarque : En raison de certaines limitations, des événements peuvent ne pas être générés si vous accédez à la page dans votre navigateur en tant que fichier (par exemple, "file://") plutôt que sur un serveur (par exemple, "http://www").
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
Avec les paramètres de sécurité Flash, cette méthode ainsi que toutes les visualisations Flash peuvent 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 Macromedia.