X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=docs%2Findex.html;h=b9eff5433f3653d0e82312a4e29a2067b9c6e1e5;hb=f99d913cd73b0d91850c09985237f6683713cdd2;hp=d2002db8a39bf8dec3ec05427032308669600cab;hpb=2322a4ca8913b5ba4fba6cdef393355b1a1a0741;p=dygraphs.git

diff --git a/docs/index.html b/docs/index.html
index d2002db..b9eff54 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -19,9 +19,16 @@
         <li><a href="#baseball">Baseball chart</a></li>
         <li><a href="#stock">Stock chart</a></li>
         <li><a href="#options">Options Reference</a></li>
+        <li><a href="#gwt">GWT Compatibility</a></li>
         <li><a href="#policy">Data Policy</a></li>
       </ul>
 
+      <h2>Features</h2>
+      <ul>
+        <li><a href="data.html">Data Formats</a></li>
+        <li><a href="annotations.html">Annotations</a></li>
+      </ul>
+
       <h2>Project</h2>
       <ul>
         <li><a href="http://github.com/danvk/dygraphs">Source</a></li>
@@ -32,10 +39,13 @@
 
       <h2>Gallery</h2>
       <ul>
+        <li><a href="tests/">(browse demos)</a></li>
         <li><a href="tests/demo.html">Basic Demo</a></li>
         <li><a href="tests/gviz.html">GViz Demo</a></li>
         <li><a href="tests/plotter.html">Equation Plotter</a></li>
         <li><a href="tests/perf.html">Performance Test</a></li>
+        <li><a href="tests/annotation.html">Annotations</a></li>
+        <li><a href="tests/annotation-gviz.html">Annotations (GViz)</a></li>
         <li><a href="tests/fillGraph.html">Filled Chart</a></li>
         <li><a href="tests/perf.html">Fractions</a></li>
         <li><a href="tests/visibility.html">Visibility</a></li>
@@ -57,7 +67,8 @@
         <li><a href="tests/negative.html">Negative Numbers</a></li>
         <li><a href="tests/noise.html">Noisy Data</a></li>
         <li><a href="tests/two-series.html">Multiple Series</a></li>
-        <li><a href="tests/underlay-callback.html">Custom Underlay / background</a></li>
+        <li><a href="tests/highlighted-region.html">Custom Underlay / background</a></li>
+        <li><a href="tests/zoom.html">Tests for zoom operations</a></li>
       </ul>
     </div>
 
@@ -109,10 +120,11 @@
       <ul>
         <li>Plots time series without using an external server or Flash</li>
         <li>Works in Internet Explorer (using excanvas)</li>
-        <li>Lightweight (45kb) and responsive</li>
+        <li>Lightweight (57kb) and responsive</li>
         <li>Displays values on mouseover (this makes it easily discoverable)</li>
         <li>Supports error bands around data series</li>
         <li>Interactive zoom</li>
+        <li>Displays Annotations on the chart</li>
         <li>Adjustable averaging period</li>
         <li>Can intelligently chart fractions</li>
         <li>Customizable click-through actions</li>
@@ -367,7 +379,15 @@ new Dygraph(el, data, {
 
     <h2 id="gviz">GViz Data</h2>
 
-    <p>The <a href="http://code.google.com/apis/visualization/documentation/index.html">Google Visualization API</a> provides a standard interface for describing data. Once you've specified your data using this API, you can plug in any GViz-compatible visualization. dygraphs is such a visualization.</p>
+    <p>The <a
+      href="http://code.google.com/apis/visualization/documentation/index.html">Google
+      Visualization API</a> provides a standard interface for describing data.
+    Once you've specified your data using this API, you can plug in any
+    GViz-compatible visualization. dygraphs is such a visualization. In
+    particular, it can be used as a drop-in replacement for the
+    AnnotatedTimeline visualization used on Google Finance and other sites. To
+    see how this works, check out the <a href="tests/annotation-gviz.html">gviz
+      annotation demo.</a></p>
 
     <p>For a simple demonstration of how to use dygraphs a GViz visualization, see <a href="http://danvk.org/dygraphs/tests/gviz.html">http://danvk.org/dygraphs/tests/gviz.html</a>. dygraphs can also be used as a GViz gadget. This allows it to be embedded inside of a Google Spreadsheet. For a demonstration of this, see <a   href="http://spreadsheets.google.com/ccc?key=0Anx1yCqeL8YUdDR1c3pPREhraGhkWmdhaURjOXRncXc&amp;hl=en">this spreadsheet</a>. The URL for the gadget is <code><a href="http://danvk.org/dygraphs/gadget.xml">http://danvk.org/dygraphs/gadget.xml</a></code>.</p>
 
@@ -436,9 +456,38 @@ new Dygraph(el, data, {
     <label for="0"> Nominal</label>
     <input type=checkbox id=1 onClick="stockchange(this)" checked>
     <label for="1"> Real</label>
+    <input type=checkbox id=ann onClick="annotationschange(this)" checked>
+    <label for="ann"> Annotations</label>
     </p>
 
     <script type="text/javascript">
+      var stock_annotations = [
+        {
+          series: "Real",
+          x: "1929-08-15",
+          shortText: "A",
+          text: "1929 Stock Market Peak"
+        },
+        {
+          series: "Nominal",
+          x: "1987-08-15",
+          shortText: "B",
+          text: "1987 Crash"
+        },
+        {
+          series: "Nominal",
+          x: "1999-12-15",
+          shortText: "C",
+          text: "1999 (.com) Peak"
+        },
+        {
+          series: "Nominal",
+          x: "2007-10-15",
+          shortText: "D",
+          text: "All-Time Market Peak"
+        }
+      ];
+
     // From http://www.econstats.com/eqty/eq_d_mi_3.csv
       stockchart = new Dygraph(
         document.getElementById('dow_chart'),
@@ -446,13 +495,25 @@ new Dygraph(el, data, {
         {
           showRoller: true,
           customBars: true,
-          labelsKMB: true
+          labelsKMB: true,
+          drawCallback: function(g, is_initial) {
+            if (!is_initial) return;
+            g.setAnnotations( stock_annotations );
+          }
         }
       );
 
       function stockchange(el) {
         stockchart.setVisibility(el.id, el.checked);
       }
+
+      function annotationschange(el) {
+        if (el.checked) {
+          stockchart.setAnnotations(stock_annotations);
+        } else {
+          stockchart.setAnnotations([]);
+        }
+      }
     </script>
 <!--
 
@@ -474,7 +535,7 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
 
     <h2 id="options">Other Options</h2>
 
-    <p>These are the options that can be passed in through the optional third parameter of the Dygraph constructor. Under each option is a set of links to tests which demonstrate its use.</p>
+    <p>These are the options that can be passed in through the optional third parameter of the Dygraph constructor. Under each option is a set of links to tests which demonstrate its use. While we attempt to keep this list up-to-date, a more complete list can be found in the <code>Dygraph.DEFAULT_ATTRS</code> map in <code>dygraph.js</code> and the <code>this.options</code> map in <code>dygraph-canvas.js</code>.</p>
 
     <table class="thinborder" width="900">
       <thead>
@@ -507,7 +568,7 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
           <td><code>boolean</code></td>
           <td><code>false</code></td>
           <td>If the rolling average period text box should be shown.
-          <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/crosshair.html">crosshair</a> <a href="tests/fractions.html">fractions</a> <a href="tests/isolated-points.html">isolated-points</a> <a href="tests/numeric-gviz.html">numeric-gviz</a> <a href="tests/underlay-callback.html">underlay-callback</a> </div>
+          <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/crosshair.html">crosshair</a> <a href="tests/fractions.html">fractions</a> <a href="tests/isolated-points.html">isolated-points</a> <a href="tests/numeric-gviz.html">numeric-gviz</a> <a href="tests/underlay-callback.html">underlay-callback</a> <a href="tests/highlighted-region.html">highlighted-region</a></div>
           </td>
         </tr>
         <tr>
@@ -564,10 +625,10 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
         </tr>
         <tr>
           <td><strong>zoomCallback</strong></td>
-          <td><code>function(minDate,<br/>maxDate){}</code></td>
+          <td><code>function(minDate,<br/>maxDate,<br/>yRanges){}</code></td>
           <td><code>null</code></td>
-          <td>A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch.
-          <div class="tests">Tests: <a href="tests/callback.html">callback</a> </div>
+          <td>A function to call when the zoom window is changed (either by zooming in or out). minDate and maxDate are milliseconds since epoch. yRanges is an array of [bottom, top] pairs, one for each y-axis.
+          <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/zoom.html">zoom</a></div>
           </td>
         </tr>
         <tr>
@@ -603,10 +664,18 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
         </tr>
         <tr>
           <td><strong>labelsDiv</strong></td>
-          <td><code>document.<br/>getElementById('foo')</code></td>
+          <td><code style="font-size: small">document.getElementById('foo')</code><br/>or<br/><code>'foo'</code></td>
           <td><code>null</code></td>
-          <td>Show data labels in an external div, rather than on the graph.
-          <div class="tests">Tests: <a href="tests/demo.html">demo</a> <a href="tests/label-div.html">label-div</a> </div>
+          <td style="vertical-align:top">Show data labels in an external div, rather than on the graph.  This value can either be a div element or a div id.
+          <div class="tests">Tests: <a href="tests/label-div.html">label-div</a> </div>
+          </td>
+        </tr>
+        <tr>
+          <td><strong>labelsShowZeroValues</strong></td>
+          <td><code>boolean</code></td>
+          <td><code>true</code></td>
+          <td>Show zero value labels in the labelsDiv.
+          <div class="tests">Tests: <a href="tests/label-div.html">label-div</a> </div>
           </td>
         </tr>
         <tr>
@@ -699,6 +768,23 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
           </td>
         </tr>
         <tr>
+          <td><strong>xAxisLabelFormatter</strong></td>
+          <td><code>function(date, granularity)</code></td>
+          <td><code>Dygraph.dateAxisFormatter</code></td>
+          <td>Function to call to format values along the x axis.
+            <div class="tests">Tests: <a href="tests/x-axis-formatter.html">xAxisLabelFormatter</a></div>
+          </td>
+        </tr>
+        <tr>
+          <td><strong>yAxisLabelFormatter</strong></td>
+          <td><code>function(x)</code></td>
+          <td><code>yValueFormatter</code></td>
+          <td>
+            Function used to format values along the Y axis. By default it uses the same as the <code>yValueFormatter</code> unless specified.
+            <div class="tests">Tests: <a href="tests/y-axis-formatter.html">yAxisLabelFormatter</a></div>
+          </td>
+        </tr>
+        <tr>
           <td><strong>rightGap</strong></td>
           <td><code>integer</code></td>
           <td><code></code></td>
@@ -767,14 +853,37 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
 
         <tr>
           <td><strong>highlightCallback</strong></td>
-          <td><code>function(event, x, points)</code></td>
-          <td><code>null</td>
+          <td><code>function(event, x, points,row)</code></td>
+          <td><code>null</code></td>
           <td>When set, this callback gets called every time a new point is highlighted. The parameters are the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted points: <code>[ {name: 'series', yval: y-value}, &hellip; ]</code>
           <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/crosshair.html">crosshair</a> </div>
           </td>
         </tr>
 
         <tr>
+          <td><strong>unhighlightCallback</strong></td>
+          <td><code>function(event)</code></td>
+          <td><code>null</code></td>
+          <td>When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph.  The parameter is the mouseout event.
+            <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/crosshair.html">crosshair</a> </div>
+          </td>
+        </tr>
+
+        <tr>
+          <td><strong>underlayCallback</strong></td>
+          <td><code>function(canvas, area, dygraph)</code></td>
+          <td><code>null</code></td>
+          <td>When set, this callback gets called before the chart is drawn. It
+            allows you to draw underneath the chart. See the tests for more
+            details on how to use this.
+            <div class="tests">Tests:
+              <a href="tests/underlay-callback.html">underlay-callback</a>
+              <a href="tests/highlighted-region.html">highlighted-region</a>
+            </div>
+          </td>
+        </tr>
+
+        <tr>
           <td><strong>strokeWidth</strong></td>
           <td><code>0.5, 2.0</code></td>
           <td><code>1.0</code></td>
@@ -796,6 +905,46 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
           <td><code>320</code></td>
         </tr>
 
+        <tr>
+          <td><strong>stepPlot</strong></td>
+          <td><code>boolean</code></td>
+          <td><code>false</code></td>
+          <td>
+            When set, display the graph as a step plot instead of a line plot.
+            <div class="tests">Tests: <a href="tests/steps.html">steps</a></div>
+          </td>
+        </tr>
+
+        <tr>
+          <td><strong>xValueFormatter</strong></td>
+          <td><code>function(x)</code></td>
+          <td></td>
+          <td>
+            Function to provide a custom display format the X value for mouseover.
+          </td>
+        </tr>
+
+        <tr>
+          <td><strong>yValueFormatter</strong></td>
+          <td><code>function(x)</code></td>
+          <td>(Round to 2 decimal places)</td>
+          <td>
+            Function to provide a custom display format for the Y value for mouseover.
+            <div class="tests">Tests: <a href="tests/y-axis-formatter.html">yAxisLabelFormatter</a></div>
+          </td>
+        </tr>
+
+        <tr>
+          <td><strong>avoidMinZero</strong></td>
+          <td><code>boolean</code></td>
+          <td><code>false</code></td>
+          <td>
+            When set, the heuristic that fixes the Y axis at zero for a data set with the minimum Y value of zero is disabled.
+            This is particularly useful for data sets that contain many zero values, especially for step plots which may otherwise have lines not visible running along the bottom axis.
+            <div class="tests">Tests: <a href="tests/avoidMinZero.html">avoidMinZero</a></div>
+          </td>
+        </tr>
+
       </tbody>
     </table>
 
@@ -812,6 +961,26 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
       <li>Make sure you don't have any trailing commas in your call to the Dygraph constructor or in the options parameter. Firefox, Chrome and Safari ignore these but they can cause a graph to not display in Internet Explorer.</li>
     </ul>
 
+    <h2 id="gwt">GWT Compatibility</h2>
+    <p>There is currently no GWT wrapper around Dygraphs, however there is a class that can be used to easily load Dygraphs into the browser.  To use it, include the generated dygraph-gwt.jar file in your classpath and add the following line to your GWT module:</p>
+
+<pre>
+&lt;inherits name=&quot;org.danvk.dygraphs&quot;/&gt;    
+</pre>
+
+    <p>Call org.danvk.Dygraphs.install() when your application starts to install the JavaScript code into the browser.  You can use <a href="http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html">JSNI</a> to call Dygraphs from your GWT code, as in the example below.  The example uses the <a href="http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted">Visualization API for GWT</a> and the <a href="#gviz">Dygraphs GViz API.</a></p>
+
+<pre>
+  public static native JavaScriptObject drawDygraph(Element element, DataTable dataTable, double minY, double maxY) /*-{
+    var chart = new $wnd.Dygraph.GVizChart(element);
+    chart.draw(dataTable,
+      {
+        valueRange: [minY, maxY]
+      });
+    return chart;
+  }-*/;
+</pre>
+
     <h2 id="policy">Data Policy</h2>
     <p>dygraphs is purely client-side JavaScript. It does not send your data to any servers &ndash; the data is processed entirely in the client's browser.</p>