<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>
<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>
<h3 id="demo">A demo is worth a thousand words:</h3>
- <p style="font-size:0.8em">(Mouse over to highlight individual values. Click and drag to zoom. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)</p>
+ <p style="font-size:0.8em">(Mouse over to highlight individual values. Click and drag to zoom in both axes. Double-click to zoom back out. Change the number and hit enter to adjust the averaging period.)</p>
<div id="title" style="width:800px; margin: 1em;text-align:center; font-weight: bold; font-size: 125%;">Temperatures in New York vs. San Francisco</div>
<li>Lightweight (45kb) 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>Interactive zoom and pan</li>
<li>Adjustable averaging period</li>
<li>Can intelligently chart fractions</li>
<li>Customizable click-through actions</li>
<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>
</tr>
<tr>
<td><strong>zoomCallback</strong></td>
- <td><code>function(minDate,<br/>maxDate){}</code></td>
+ <td><code>function(minDate,<br/>maxDate,<br/>minValue,<br/>maxValue){}</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. minValue and maxValue are y-axis range values.
+ <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/zoom.html">zoom</a></div>
</td>
</tr>
<tr>
</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>
<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>
+<inherits name="org.danvk.dygraphs"/>
+</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 – the data is processed entirely in the client's browser.</p>
projects / dygraphs.git / blobdiff