Présentation
Graphique linéaire de séries temporelles interactif avec des annotations facultatives.
La chronologie annotée utilise désormais automatiquement les graphiques d'annotations à la place.
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 explicitement la hauteur et la largeur de l'élément conteneur 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
Le graphique peut comporter une ou plusieurs lignes. Chaque ligne représente une position X sur le graphique, c'est-à-dire une heure spécifique. Chaque ligne est décrite par un ensemble d'une à trois colonnes.
- La première colonne est de type
dateoudatetime, et spécifie la valeur X du point sur le graphique. Si cette colonne est de typedate(et nondatetime), la plus petite résolution temporelle sur l'axe X portera sur un jour. - Chaque ligne de données est ensuite décrite par un ensemble d'une à trois colonnes supplémentaires, comme décrit ci-dessous :
- Valeur Y - [Required, Number] La première colonne de chaque ensemble décrit la valeur de la ligne au moment correspondant à la première colonne. L'étiquette de colonne s'affiche sur le graphique en tant que titre de cette ligne.
- Titre de l'annotation : [facultatif, chaîne] si une colonne de chaîne suit la colonne de valeurs et que l'option
displayAnnotationsest définie sur "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 un nombre très élevé, le titre pourrait être "Jour le plus chaud jamais enregistré". - Texte de l'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. Vous devez définir l'option
displayAnnotationssur "true" pour utiliser cette colonne. Vous pouvez utiliser des balises HTML, si vous définissezallowHtmlsurtrue. Il n'y a pratiquement aucune limite de taille, mais notez que les entrées trop longues peuvent dépasser la section d'affichage. Vous n'êtes pas obligé d'avoir cette colonne, même si vous disposez d'une colonne de titre d'annotation pour ce point. L'étiquette de colonne n'est pas utilisée par le graphique. Par exemple, s'il s'agit de la journée la plus chaude au moment de l'enregistrement, vous pouvez dire quelque chose comme "Le jour le plus proche était de 10 degrés plus froid le jour suivant".
Options de configuration
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| allowHtml | boolean | false | Si elle est définie sur "true", tout texte d'annotation incluant des balises HTML est affiché au format HTML. |
| allowRedraw | boolean | false | Active une technique de redessin plus efficace pour le deuxième appel à
|
| allValuesSuffix | chaîne | none | Suffixe à ajouter à toutes les valeurs des échelles et de la légende. |
| annotationsWidth | Nombre | 25 | Largeur (en pourcentage) de la zone d'annotations par rapport à la totalité de la zone du graphique. La valeur doit être comprise 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 dans un format de couleur HTML valide. Par exemple, "rouge" ou "#00cc00". |
| dateFormat | chaîne | 'MMMM dd, yyyy' ou 'HH:mm MMMM dd, yyyy', en fonction du type de la première colonne (date ou date/heure, respectivement). | Format utilisé pour afficher les informations de date dans l'angle supérieur droit. Le format de ce champ est celui spécifié par la classe Java SimpleDateFormat. |
| displayAnnotations | boolean | false | Si elle est définie sur "true", le graphique affichera des annotations en plus des valeurs sélectionnées. Lorsque cette option est définie sur "true", deux colonnes de chaîne d'annotation facultatives peuvent être ajoutées après chaque colonne numérique, l'une pour le titre de l'annotation et l'autre pour le texte de l'annotation. |
| displayAnnotationsFilter | boolean | false | Si elle est définie sur "true", le graphique affiche une commande de filtrage pour filtrer les annotations. Utilisez cette option lorsqu'il existe de nombreuses annotations. |
| displayDateBarSeparator | boolean | true | Permet d'afficher ou non un petit séparateur de barre ( | ) entre les valeurs de la série et la date dans la légende, où "true" signifie "oui". |
| displayExactValues | boolean | false | Permet d'afficher ou non 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 définie sur "false", 56123.45 peut s'afficher sous la forme "56.12k". |
| displayLegendDots | boolean | true | Permet d'afficher ou non des points à côté des valeurs dans le texte de la légende, où "true" signifie "oui". |
| displayLegendValues | boolean | true | Permet d'afficher ou non les valeurs en surbrillance dans la légende, où "true" signifie "oui". |
| displayRangeSelector | boolean | true | Permet d'afficher ou non la zone de sélection de la plage de zoom (la zone située au 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, mise à l'échelle pour s'adapter à la hauteur du sélecteur de zoom. |
| displayZoomButtons | boolean | true | Permet d'afficher ou non les liens de zoom ("1d 5d 1m", etc.), où "false" signifie non. |
| fill | Nombre | 0 | Nombre compris entre 0 et 100 (inclus) spécifiant la valeur alpha du remplissage sous chaque ligne du graphique linéaire. 100 correspond à un remplissage opaque à 100 %, et 0 à aucun remplissage. La couleur de remplissage est la même que celle de la ligne située au-dessus. |
| highlightDot | chaîne | "le plus proche" | Le point de la série à mettre en surbrillance et les valeurs correspondantes à afficher dans la légende. Sélectionnez l'une des valeurs suivantes:
|
| legendPosition | chaîne | "sameRow" | Permet de placer la légende colorée sur la même ligne avec les boutons de zoom et la date ("sameRow"), ou sur une nouvelle ligne ("newRow"). |
| max | Nombre | 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é pour afficher la coche principale suivante au-dessus du point de données maximal. Cette valeur sera prioritaire sur la valeur maximale de l'axe Y déterminée par scaleType. |
| min | Nombre | automatique | Valeur minimale à afficher sur l'axe Y. Si le point de données minimal est inférieur à cette valeur, ce paramètre est ignoré, et le graphique est ajusté pour afficher la coche principale suivante en dessous du point de données minimal. Cette valeur sera prioritaire sur la valeur minimale de l'axe Y déterminée par scaleType. |
| numberFormats | Chaîne ou carte de paires nombre:chaîne | automatique | Spécifie les modèles de format numérique à utiliser pour mettre en forme 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 |
| scaleColumns | Tableau de nombres | Automatique | Spécifie les valeurs à afficher sur les coches de l'axe Y dans le graphique. Par défaut, une seule échelle s'affiche sur le côté droit, ce qui s'applique aux deux séries. Toutefois, vous pouvez mettre à l'échelle différents côtés du graphique pour obtenir différentes valeurs de série. Cette option utilise un tableau de zéro à trois nombres spécifiant l'indice (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:
Lorsque vous affichez plusieurs échelles, il est recommandé de définir l'option |
| scaleType | chaîne | "fixe" | Définit les valeurs maximale et minimale affichées sur l'axe Y. Les options suivantes sont disponibles:
Si vous spécifiez les options minimale et/ou maximale, elles sont prioritaires sur les valeurs minimale et maximale déterminées par votre type d'échelle. |
| épaisseur | Nombre | 0 | Nombre compris entre 0 et 10 (inclus) spécifiant l'épaisseur des lignes, où 0 est le plus fin. |
| Wmode | chaîne | "window" (fenêtre) | Paramètre Mode fenêtre (wmode) du graphique Flash. Les valeurs disponibles sont: "opaque", "window" ou "transparent". |
| zoomEndTime | Date | none | Définit la date et l'heure de fin de la plage de zoom sélectionnée. |
| zoomStartTime | 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 | Permet de dessiner le graphique. Vous pouvez accélérer le temps de réponse pour le second appel à draw() et les appels ultérieurs à l'aide de la propriété allowRedraw. |
getSelection() |
Tableau d'éléments de sélection | Implémentation standard de getSelection(). 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, chacun d'entre eux étant un objet Date, représentant la sélection de temps 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 la première et la dernière heure de la plage visible sélectionnée. Définissez start sur "null" pour inclure toutes les données de la date la plus proche à la date end. Définissez end sur "null" pour inclure toutes les données allant du début à la dernière date. |
showDataColumns(columnIndexes) |
none | Affiche les séries de données spécifiées du graphique, après leur masquage à 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 setVisibleChartRange.Remarque: Il est recommandé 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 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 draw, puis ne les appeler qu'après le déclenchement de l'événement. |
Aucun |
| select | Lorsque l'utilisateur clique sur un indicateur d'annotation (repère), la cellule correspondante dans la table de données est sélectionnée. La visualisation déclenche ensuite cet événement. | Aucun |
Remarque: En raison de certaines limites, il est possible qu'aucun événement ne soit généré si vous accédez à la page dans votre navigateur sous forme de fichier (par exemple, "file://") plutôt que sur un serveur (par exemple, "http://www").
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/monviz.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.