X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=docs%2Fannotations.html;h=7a0c1e3adbafaf64e45cb235fd2f3583f4cb205d;hb=f160e4ac8166f74d1f0e5604061564fbca5ba5a5;hp=91fa00410a6f05b6cd7d4d60d2064c0da1f52829;hpb=144034416d8119387dbdc3ce689d7b9fa4b2a0ee;p=dygraphs.git
diff --git a/docs/annotations.html b/docs/annotations.html
index 91fa004..7a0c1e3 100644
--- a/docs/annotations.html
+++ b/docs/annotations.html
@@ -6,6 +6,9 @@
.annotation {
font-size: 12px !important;
}
+ .dygraph-legend {
+ width: 300px;
+ }
dygraphs Annotations
@@ -26,43 +29,41 @@ them.
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'
+ }
+ ] );
+ });
Adding Annotations
@@ -99,14 +100,16 @@ no-op: it simply causes the chart to refresh.
"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>
@@ -126,14 +129,16 @@ no-op: it simply causes the chart to refresh.
"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"
+ }
+ ]);
+ });
@@ -159,6 +164,22 @@ g.setAnnotations(annotations); // causes a redraw
For a more real-life example, see the annotations demo
+Annotations and Data Sources
+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 new Dygraph
and so the call to
+g.setAnnotations
will fail. The best way around this is to use the
+ready()
method:
+
+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([
+ …
+ ]);
+});
+
+
Annotations property reference
These properties can all be set in the dictionary for an annotation. The use of each one is demonstrated on the annotations demo page.
@@ -173,6 +194,8 @@ href="tests/annotation.html">annotations demo
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. |
+tickWidth | Width of the tick mark connecting the point to its flag or icon. |
+tickColor | Color of the tick mark 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 |