- <pre>
- var annotations = g.annotations();
- annotations.splice(1,1); // remove the second annotation
- annotations[0].series = "Series 2";
- g.setAnnotations(annotations); // causes a redraw
- </pre>
-
- <p>For a more real-life example, see the <a
- href="tests/annotation.html">annotations demo</a></p>
-
- <h3>Annotations property reference</h3>
- <p>These properties can all be set in the dictionary for an annotation. The use of each one is demonstrated on the <a href="tests/annotation.html">annotations demo</a> page.</p>
-
- <table class="thinborder">
- <tr> <td><b>Property</b></td><td><b>Description</b></td> </tr>
- <tr><td><code>series</code></td> <td><i>Required</i> The name of the series to which the annotated point belongs.</td></tr>
- <tr><td><code>x</code></td><td><i>Required</i> 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".</td></tr>
- <tr><td><code>shortText</code></td><td>Text that will appear on the annotation's flag.</td></tr>
- <tr><td><code>text</code></td><td>A longer description of the annotation which will appear when the user hovers over it.</td></tr>
- <tr><td><code>icon</code></td><td>Specify in place of <code>shortText</code> to mark the annotation with an image rather than text. If you specify this, you must specify <code>width</code> and <code>height</code>.</td></tr>
- <tr><td><code>width</code></td><td>Width (in pixels) of the annotation flag or icon.</td></tr>
- <tr><td><code>height</code></td><td>Height (in pixels) of the annotation flag or icon.</td></tr>
- <tr><td><code>cssClass</code></td><td>CSS class to use for styling the annotation.</td></tr>
- <tr><td><code>tickHeight</code></td><td>Height of the tick mark (in pixels) connecting the point to its flag or icon.</td></tr>
- <tr><td><code>attachAtBottom</code></td><td>If true, attach annotations to the x-axis, rather than to actual points.</td></tr>
- <tr><td><code>clickHandler</code></td> <td>See Handlers, below</td></tr>
- <tr><td><code>mouseOverHandler</code></td><td>See Handlers, below</td></tr>
- <tr><td><code>mouseOutHandler</code></td> <td>See Handlers, below</td></tr>
- <tr><td><code>dblClickHandler</code></td> <td>See Handlers, below</td></tr>
- </table>
-
- <h3>Annotation event handlers</h3>
-
- <p>dygraphs lets you attach event handlers to your annotations. These can be
- specified globally (for all annotations) or on a per-annotation basis:</p>
-
- <table class="thinborder">
- <tr><td><b>Per-point field</b></td><td><b>Global option</b></td></tr>
- <tr><td><code>clickHandler</code></td> <td><code>annotationClickHandler</code></td></tr>
- <tr><td><code>mouseOverHandler</code></td><td><code>annotationMouseOverHandler</code></td></tr>
- <tr><td><code>mouseOutHandler</code></td> <td><code>annotationMouseOutHandler</code></td></tr>
- <tr><td><code>dblClickHandler</code></td> <td><code>annotationDblClickHandler</code></td></tr>
- </table>
-
- <p>These event handlers all take the same parameters:</p>