Fix two inconsistencies in dygraph-externs.js (#859)

[dygraphs.git] / docs / annotations.html

diff --git a/docs/annotations.html b/docs/annotations.html
index 91fa004..7a0c1e3 100644 (file)
--- a/docs/annotations.html
+++ b/docs/annotations.html
@@ -6,6 +6,9 @@
   .annotation {
     font-size: 12px !important;
   }
+  .dygraph-legend {
+    width: 300px;
+  }
 </style>
 
 <h2>dygraphs Annotations</h2>
@@ -26,43 +29,41 @@ them.</p>
       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>
@@ -99,14 +100,16 @@ no-op: it simply causes the chart to refresh.</p>
     &quot;2008-05-09,80\n&quot;
   );
 
-  g.setAnnotations([
-  {
-    series: &quot;Temperature&quot;,
-    x: &quot;2008-05-08&quot;,
-    shortText: &quot;L&quot;,
-    text: &quot;Coldest Day&quot;
-  }
-  ]);
+  g.ready(function() {
+    g.setAnnotations([
+    {
+      series: &quot;Temperature&quot;,
+      x: &quot;2008-05-08&quot;,
+      shortText: &quot;L&quot;,
+      text: &quot;Coldest Day&quot;
+    }
+    ]);
+  });
 &lt;/script&gt;
 </pre>
 </div>
@@ -126,14 +129,16 @@ no-op: it simply causes the chart to refresh.</p>
       "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>
@@ -159,6 +164,22 @@ g.setAnnotations(annotations);  // causes a redraw
 <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([
+    &hellip;
+  ]);
+});
+</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>
 
@@ -173,6 +194,8 @@ href="tests/annotation.html">annotations demo</a></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>