.annotation {
font-size: 12px !important;
}
+ .dygraph-legend {
+ width: 300px;
+ }
</style>
<h2>dygraphs Annotations</h2>
showRoller: true,
customBars: true,
labelsKMB: true,
- labelsDivWidth: 300,
- drawCallback: function(g, is_initial) {
- if (!is_initial) return;
-
- g.setAnnotations( [
- {
- series: "Real",
- x: "1929-08-15",
- shortText: "A",
- text: "1929 Stock Market Peak",
- cssClass: 'annotation'
- },
- {
- series: "Nominal",
- x: "1987-08-15",
- shortText: "B",
- text: "1987 Crash",
- cssClass: 'annotation'
- },
- {
- series: "Nominal",
- x: "1999-12-15",
- shortText: "C",
- text: "1999 (.com) Peak",
- cssClass: 'annotation'
- },
- {
- series: "Nominal",
- x: "2007-10-15",
- shortText: "D",
- text: "All-Time Market Peak",
- cssClass: 'annotation'
- }
- ] );
- }
}
);
+
+ stockchart.ready(function(g) {
+ g.setAnnotations( [
+ {
+ series: "Real",
+ x: "1929-08-15",
+ shortText: "A",
+ text: "1929 Stock Market Peak",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "1987-08-15",
+ shortText: "B",
+ text: "1987 Crash",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "1999-12-15",
+ shortText: "C",
+ text: "1999 (.com) Peak",
+ cssClass: 'annotation'
+ },
+ {
+ series: "Nominal",
+ x: "2007-10-15",
+ shortText: "D",
+ text: "All-Time Market Peak",
+ cssClass: 'annotation'
+ }
+ ] );
+ });
</script>
<h3>Adding Annotations</h3>
"2008-05-09,80\n"
);
- g.setAnnotations([
- {
- series: "Temperature",
- x: "2008-05-08",
- shortText: "L",
- text: "Coldest Day"
- }
- ]);
+ g.ready(function() {
+ g.setAnnotations([
+ {
+ series: "Temperature",
+ x: "2008-05-08",
+ shortText: "L",
+ text: "Coldest Day"
+ }
+ ]);
+ });
</script>
</pre>
</div>
"2008-05-08,70\n" +
"2008-05-09,80\n"
);
- g.setAnnotations([
- {
- series: "Temperature",
- x: "2008-05-08",
- shortText: "L",
- text: "Coldest Day"
- }
- ]);
+ g.ready(function() {
+ g.setAnnotations([
+ {
+ series: "Temperature",
+ x: "2008-05-08",
+ shortText: "L",
+ text: "Coldest Day"
+ }
+ ]);
+ });
</script>
</div>
</div>
<p>For a more real-life example, see the <a
href="tests/annotation.html">annotations demo</a></p>
+<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>
<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>tickWidth</code></td><td>Width of the tick mark connecting the point to its flag or icon.</td></tr>
+<tr><td><code>tickColor</code></td><td>Color of the tick mark 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>