X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=docs%2Fannotations.html;fp=docs%2Fannotations.html;h=805f8aa850a3f7a4e1e04e612ddfd93bb612ba26;hb=534f1a05ad8cc13d6e22e76ac03e468744924a4d;hp=0000000000000000000000000000000000000000;hpb=33030f33c02e30364172a94b0dd7bdb6528b0f17;p=dygraphs.git diff --git a/docs/annotations.html b/docs/annotations.html new file mode 100644 index 0000000..805f8aa --- /dev/null +++ b/docs/annotations.html @@ -0,0 +1,210 @@ + +
+dygraphs lets you add annotations (markers) to individual points on your + chart. These markers have a short bit of text or an icon that's displayed + over the chart, plus a longer description that appears when you hover over + them.
+ +There are two methods which are used to add, remove and modify annotations:
+ +setAnnotations(array) |
+ Set the list of annotations currently displayed. This overwrites + existing annotations and redraws the dygraph. | +
annotations |
+ Returns an array of the currently-displayed annotations. | +
Calling dygraph.setAnnotations(dygraph.annotations())
is a
+ no-op: it simply causes the chart to refresh.
Let's say we have a simple chart and wish to add an annotation. Here's how:
+ ++<script type="text/javascript"> + g = new Dygraph( + document.getElementById("graphdiv"), + "Date,Temperature\n" + + "2008-05-07,75\n" + + "2008-05-08,70\n" + + "2008-05-09,80\n" + ); + + g.setAnnotations([ + { + series: "Temperature", + x: "2008-05-08", + shortText: "L", + text: "Coldest Day" + } + ]); +</script> ++
Annotations are JavaScript dictionaries. The series
and x
fields are required: they indicate which point the annotation should be attached to. If specified, shortText
will appear on the annotation "flag". If you don't specify shortText
, you can specify icon
instead to display a small picture. The text
parameter specifies hovertext. If you highlight the annotation and leave the mouse still, it will appear.
To remove or modify existing annotations, call the
+ annotations
method to get an array of annotations. Modify that
+ array, then pass it back in to setAnnotations
. For example, this
+ code deletes the second annotation and changes the series to which the first
+ is attached:
+ var annotations = g.annotations(); + annotations.splice(1,1); // remove the second annotation + annotations[0].series = "Series 2"; + g.setAnnotations(annotations); // causes a redraw ++ +
For a more real-life example, see the annotations demo
+ +These properties can all be set in the dictionary for an annotation. The use of each one is demonstrated on the annotations demo page.
+ +Property | Description |
series | Required The name of the series to which the annotated point belongs. |
x | Required The x value of the point. This should be the same as the value you specified in your CSV file, e.g. "2010-09-13". |
shortText | Text that will appear on the annotation's flag. |
text | A longer description of the annotation which will appear when the user hovers over it. |
icon | Specify in place of shortText to mark the annotation with an image rather than text. If you specify this, you must specify width and height . |
width | Width (in pixels) of the annotation flag or icon. |
height | Height (in pixels) of the annotation flag or icon. |
cssClass | CSS class to use for styling the annotation. |
tickHeight | Height of the tick mark (in pixels) connecting the point to its flag or icon. |
attachAtBottom | If true, attach annotations to the x-axis, rather than to actual points. |
clickHandler | See Handlers, below |
mouseOverHandler | See Handlers, below |
mouseOutHandler | See Handlers, below |
dblClickHandler | See Handlers, below |
dygraphs lets you attach event handlers to your annotations. These can be + specified globally (for all annotations) or on a per-annotation basis:
+ +Per-point field | Global option |
clickHandler | annotationClickHandler |
mouseOverHandler | annotationMouseOverHandler |
mouseOutHandler | annotationMouseOutHandler |
dblClickHandler | annotationDblClickHandler |
These event handlers all take the same parameters:
+ ++ g.updateOptions( { + annotationClickHandler: function(annotation, point, dygraph, event) { + // ... access/modify annotation.series, annotation.x, ... + } + }); ++ +
Again, check out the annotations demo + for concrete examples of usage of all these handlers.
+ + +