+<h3>Annotations and Data Sources</h3>
+<p>When you pass a URL as the data source to dygraphs, it must issue a request
+for the data before drawing the chart. This means that the chart data is not yet
+available immediately after you call <code>new Dygraph</code> and so the call to
+<code>g.setAnnotations</code> will fail. The best way around this is to use the
+<code>ready()</code> method:</p>
+
+<pre>g = new Dygraph(div, "path/to/data.csv");
+g.ready(function() {
+ // This is called when data.csv comes back and the chart draws.
+ g.setAnnotations([
+ …
+ ]);
+});
+</pre>
+
+<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>
+
+<pre>g.updateOptions( {
+ annotationClickHandler: function(annotation, point, dygraph, event) {
+ // ... access/modify annotation.series, annotation.x, ...
+ }
+}); </pre>