X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=docs%2Findex.html;h=b21c5c2c43552f11f7ca78a85a781eec7899f9c3;hb=10494b48b43d9ca8710d441d3c530c7d546f3edf;hp=bf183150b49207edb5a2f7631e13384b95fc2f8f;hpb=bf5b5f4d1fcf098d97a596749ef662b5f8649c72;p=dygraphs.git

diff --git a/docs/index.html b/docs/index.html
index bf18315..b21c5c2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
     <title>dygraphs JavaScript Visualization Library</title>
     <!--[if IE]>
       <script type="text/javascript" src="excanvas.js"></script>
@@ -19,23 +20,34 @@
         <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>
         <li><a href="http://code.google.com/p/dygraphs/issues/">Issues</a></li>
         <li><a href="http://code.google.com/p/dygraphs/issues/entry">Report Bug</a></li>
+        <li><a href="changes.html">Contribute a change</a></li>
         <li><a href="mailto:dygraphs-users [at] googlegroups.com">Contact</a></li>
       </ul>
 
       <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 +69,9 @@
         <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>
+        <li><a href="tests/logscale.html">Log scale tests</a></li>
       </ul>
     </div>
 
@@ -109,10 +123,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 (69kb) 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>
@@ -344,9 +359,15 @@
 
       <h2 id="ie">Internet Explorer Compatibility</h2>
 
-      <p>The dygraphs library relies heavily on HTML's <code>&lt;canvas&gt;</code> tag, which Microsoft Internet Explorer does not support. Fortunately, some clever engineers created the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which implements the <code>&lt;canvas&gt;</code> tag in IE using VML.</p>
+      <p>The dygraphs library relies heavily on the HTML5 <code>&lt;canvas&gt;</code> tag, which Microsoft Internet Explorer did not traditionally support. To use Microsoft's native canvas implementation in IE9, you need to set an HTML5 doctype on your page:</p>
 
-      <p>You can add IE support to any page using dygraphs by including the following in your page:</p>
+      <pre>
+      &lt;!DOCTYPE html&gt; 
+      </pre>
+
+      <p>When IE9 is in HTML5 mode, dygraphs works just like in other modern browsers.</p>
+
+      <p>If you want to support previous versions of Internet Explorer (IE6&ndash;IE8), you'll need to include the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which emulates the <code>&lt;canvas&gt;</code> tag using VML. You can add excanvas by including this snippet:</p>
 
 <pre>
 &lt;head&gt;
@@ -354,7 +375,7 @@
 &lt;/head&gt;
 </pre>
 
-    <p>This works quite well in practice. Charts are responsive, even under VML emulation.</p>
+    <p>While this sounds like it would be slow, it works well in practice for most charts.</p>
 
     <p>One common gotcha to look out for: make sure you don't have any trailing commas in parameter lists, e.g.</p>
 
@@ -367,7 +388,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 +465,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 +504,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,280 +544,9 @@ 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. To see demonstrations of many of these options, browse the <a href="tests/">dygraphs tests</a> directory.</p>
-
-    <table class="thinborder" width="900">
-      <thead>
-        <tr>
-          <th width="150">Name</th>
-          <th width="200">Values</th>
-          <th width="150">Default</th>
-          <th>Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td><strong>includeZero</strong></td>
-          <td><code>boolean</code></td>
-          <td><code>false</code></td>
-        <td>Usually, dygraphs will use the range of the data plus some padding to set the range of the y-axis. If this option is set, the y-axis will always include zero, typically as the lowest value. This can be used to avoid exaggerating the variance in the data.
-        <div class="tests">Tests: no-range numeric-gviz small-range-zero</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>rollPeriod</strong></td>
-          <td><code>integer &gt;= 1</code></td>
-          <td><code>1</code></td>
-          <td>Number of days over which to average data. Discussed extensively above.
-        <div class="tests">Tests: demo two-series noise</div>
-        </td>
-        </tr>
-        <tr>
-          <td><strong>showRoller</strong></td>
-          <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: callback crosshair fractions isolated-points numeric-gviz underlay-callback</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>colors</strong></td>
-          <td><code>['red', '#00FF00']</code></td>
-          <td><code></code></td>
-          <td>List of colors for the data series. These can be of the form "#AABBCC" or "rgb(255,100,200)" or "yellow", etc. If not specified, equally-spaced points around a color wheel are used.
-          <div class="tests">Tests: color-visibility demo</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>fillGraph</strong></td>
-          <td><code>boolean<br/></code></td>
-          <td><code>false</code></td>
-          <td>Should the area underneath the graph be filled? This option is not
-          compatible with error bars.
-          <div class="tests">Tests: fillGraph</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>visibility</strong></td>
-          <td><code>Array of booleans<br/></code></td>
-          <td><code>[true, true, ...]</code></td>
-          <td>Which series should initially be visible? Once the Dygraph has
-          been constructed, you can access and modify the visibility of each
-          series using the <code>visibility</code> and
-          <code>setVisibility</code> methods.
-          <div class="tests">Tests: visibility color-visibility</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>colorSaturation</strong></td>
-          <td><code>0.0 - 1.0</code></td>
-          <td><code>1.0</code></td>
-          <td>If <strong>colors</strong> is not specified, saturation of the automatically-generated data series colors.
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>colorValue</strong></td>
-          <td><code>float (0.0 &mdash; 1.0)</code></td>
-          <td><code>1.0</code></td>
-          <td>If colors is not specified, value of the data series colors, as in hue/saturation/value. (0.0-1.0, default 0.5)
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>clickCallback</strong></td>
-          <td><code>function(e, date){<br>&nbsp;&nbsp;&nbsp;&nbsp;alert(date);<br>}</code></td>
-          <td><code>null</code></td>
-          <td>A function to call when a data point is clicked. The function should take two arguments, the event object for the click and the date that was clicked. (default null)
-          <div class="tests">Tests: callback</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>zoomCallback</strong></td>
-          <td><code>function(minDate,<br/>maxDate){}</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: callback</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>strokeWidth</strong></td>
-          <td><code>integer</code></td>
-          <td><code>1</code></td>
-          <td>Width of the data lines. This can be used to increase the contrast or some graphs.
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>dateWindow</strong></td>
-          <td><code>[<br>&nbsp;&nbsp;Date.parse('2006-01-01'),<br>&nbsp;&nbsp;(new Date()).valueOf()<br>]</code></td>
-          <td rowspan="2"><code>Full range of the<br/> input is shown</code></td>
-          <td>Initially zoom in on a section of the graph. Is of the form [earliest, latest], where earliest/latest are milliseconds since epoch.
-          <div class="tests">Tests: dateWindow link-interaction</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>valueRange</strong></td>
-          <td><code>[10, 110]</code></td>
-          <td>Explicitly set the vertical range of the graph to [low, high].
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>labelsSeparateLines</strong></td>
-          <td><code>boolean</code></td>
-          <td><code>false</code></td>
-          <td>Put <code>&lt;br/&gt;</code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>.
-          <div class="tests">Tests: customLabel demo</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>labelsDiv</strong></td>
-          <td><code>document.<br/>getElementById('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: demo label-div</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>labelsKMB</strong></td>
-          <td><code>true</code></td>
-          <td><code>false</code></td>
-          <td>Show K/M/B for thousands/millions/billions on y-axis.
-          <div class="tests">Tests: demo labelsKMB no-range</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>labelsKMG2</strong></td>
-          <td><code>true</code></td>
-          <td><code>false</code></td>
-          <td>Show k/M/G for kilo/Mega/Giga on y-axis. This is different than
-          <code>labelsKMB</code> in that it uses base 2, not 10.
-          <div class="tests">Tests: labelsKMB</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>labelsDivWidth</strong></td>
-          <td><code>250</code></td>
-          <td><code></code></td>
-          <td>Width (in pixels) of the div which shows information on the currently-highlighted points.
-          <div class="tests">Tests: customLabel</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>labelsDivStyles</strong></td>
-          <td><code>{}</code></td>
-          <td><code>null</code></td>
-          <td>Additional styles to apply to the currently-highlighted points div. For example, { 'font-weight': 'bold' } will make the labels bold.
-          <div class="tests">Tests: border customLabel</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>highlightCircleSize</strong></td>
-          <td><code>integer</code></td>
-          <td><code>3</code></td>
-          <td>The size in pixels of the dot drawn over highlighted points.
-          <div class="tests">Tests: grid_dot</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>drawPoints</strong></td>
-          <td><code>boolean</code></td>
-          <td><code>false</code></td>
-          <td>Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart.
-          <div class="tests">Tests: draw-points</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>pointSize</strong></td>
-          <td><code>interger</code></td>
-          <td><code>1</code></td>
-          <td>The size of the dot to draw on each point in pixels (see drawPoints). A dot is always drawn when a point is "isolated", i.e. there is a missing point on either side of it. This also controls the size of those dots.
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>pixelsPerXLabel</strong></td>
-          <td rowspan="2"><code>integer</code></td>
-          <td><code>60</code></td>
-          <td rowspan="2">Number of pixels to require between each x- and y-label. Larger values will yield a sparser axis with fewer ticks.
-          <div class="tests">Tests: spacing</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>pixelsPerYLabel</strong></td>
-          <td><code>30</code></td>
-        </tr>
-        <tr>
-          <td><strong>xAxisLabelWidth</strong></td>
-          <td rowspan="2"><code>integer</code></td>
-          <td><code></code></td>
-          <td rowspan="2">Width (in pixels) of the x- and y-axis labels.
-          <div class="tests">Tests: customLabel</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>yAxisLabelWidth</strong></td>
-          <td><code></code></td>
-        </tr>
-        <tr>
-          <td><strong>axisLabelFontSize</strong></td>
-          <td><code>integer</code></td>
-          <td><code>14</code></td>
-          <td>Size of the font (in pixels) to use in the axis labels, both x- and y-axis.
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>rightGap</strong></td>
-          <td><code>integer</code></td>
-          <td><code></code></td>
-          <td>Number of pixels to leave blank at the right edge of the Dygraph. This makes it easier to highlight the right-most data point.
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>errorBars</strong></td>
-          <td><code>boolean</code></td>
-          <td><code>false</code></td>
-          <td>Does the data contain standard deviations? Setting this to true alters the input format (see above).
-          <div class="tests">Tests: noise customLabel draw-points fillGraph fractions</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>sigma</strong></td>
-          <td><code>integer</code></td>
-          <td><code></code></td>
-          <td>When errorBars is set, shade this many standard deviations above/below each point.
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>fractions</strong></td>
-          <td><code>boolean</code></td>
-          <td><code>false</code></td>
-          <td>When set, attempt to parse each cell in the CSV file as "a/b", where a and b are integers. The ratio will be plotted. This allows computation of Wilson confidence intervals (see below).
-          <div class="tests">Tests: fractions</div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>wilsonInterval</strong></td>
-          <td><code>boolean</code></td>
-          <td><code>true</code></td>
-          <td>Use in conjunction with the "fractions" option. Instead of plotting +/- N standard deviations, dygraphs will compute a Wilson confidence interval and plot that. This has more reasonable behavior for ratios close to 0 or 1.
-          <div class="tests">Tests: <font color=red>none</font></div>
-          </td>
-        </tr>
-        <tr>
-          <td><strong>customBars</strong></td>
-          <td><code>boolean</code></td>
-          <td><code>false</code></td>
-          <td>When set, parse each CSV cell as "low;middle;high". Error bars will be drawn for each point between low and high, with the series itself going through middle.
-          <div class="tests">Tests: custom-bars zero-series</div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <p>In addition to the options mentioned above (<code>showRoller</code>, <code>rollPeriod</code>, <code>errorBars</code>, <code>valueRange</code>), there are <i>many</i> others.</p>
+
+    <p>For a full list, see the <a href="options.html">Dygraphs Options Reference</a> page.</p>
 
     <h2>Common Gotchas</h2>
 
@@ -762,6 +561,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>
 
