<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>
<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/highlighted-region.html">Custom Underlay / background</a></li>
+ <li><a href="tests/zoom.html">Tests for zoom operations</a></li>
</ul>
</div>
<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>
<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&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>
<li>Where the error bars do not overlap, we can say with 95% confidence that the series differ. There is a better than 95% chance that Ichiro was a better hitter than his team as a whole in 2004, the year he won the batting title.</li>
</ul>
+ <h2 id="zoom">Determining Zoom</h2>
+
+ <p>
+ It is possible to detect whether a chart has been zoomed in either axis by the use of the <code>isZoomed</code> function.
+ If called with no argument, it will report whether <em>either</em> axis has been zoomed.
+ Alternatively it can be called with an argument of either <code>'x'</code> or <code>'y'</code> and it will report the status of just that axis.
+ </p>
+
+ <p>Here's a simple example using <code>drawCallback</code> to display the various zoom states whenever the chart is zoomed:</p>
+
+ <div style="width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT</div>
+ <div style="width: 750px">
+ <div style="float: right">
+ <p>Zoomed: <span id="zoomed">False</span><p/>
+ <p>Zoomed X: <span id="zoomedX">False</span><p/>
+ <p>Zoomed Y: <span id="zoomedY">False</span><p/>
+ </div>
+ <div class="codeoutput" style="float:left;">
+ <div id="zoomdiv"></div>
+ <script type="text/javascript">
+ new Dygraph(
+
+ // containing div
+ document.getElementById("zoomdiv"),
+
+ // CSV or path to a CSV file.
+ "Date,Value\n" +
+ "2011-01-07,75\n" +
+ "2011-01-08,70\n" +
+ "2011-01-09,90\n" +
+ "2011-01-10,30\n" +
+ "2011-01-11,40\n" +
+ "2011-01-12,60\n" +
+ "2011-01-13,70\n" +
+ "2011-01-14,40\n",
+ {
+ drawCallback: function(me, initial) {
+ document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
+ document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
+ document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
+ }
+ }
+ );
+ </script>
+ </div>
+ </div>
+
+ <p>
+ <div style="clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML</div>
+
+<pre>
+ new Dygraph(
+
+ // containing div
+ document.getElementById("zoomdiv"),
+
+ // CSV or path to a CSV file.
+ "Date,Temperature\n" +
+ "2011-01-07,75\n" +
+ "2011-01-08,70\n" +
+ "2011-01-09,90\n" +
+ "2011-01-10,30\n" +
+ "2011-01-11,40\n" +
+ "2011-01-12,60\n" +
+ "2011-01-13,70\n" +
+ "2011-01-14,40\n",
+ {
+ drawCallback: function(me, initial) {
+ document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
+ document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
+ document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
+ }
+ }
+ );
+</pre>
+ </p>
+
+ <p>The <a href="tests/zoom.html">Tests for zoom operations</a> show a full example of this in action.</p>
+
<h2 id="stock">One last demo</h2>
<p>This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.</p>
<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'),
{
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>
<!--
</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>
</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>
</tr>
<tr>
<td><strong>pointSize</strong></td>
- <td><code>interger</code></td>
+ <td><code>integer</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><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.
+ <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 behaviour for ratios close to 0 or 1.
<div class="tests">Tests: <font color=red>none</font></div>
</td>
</tr>
<tr>
<td><strong>highlightCallback</strong></td>
- <td><code>function(event, x, points)</code></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}, … ]</code>
<div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/crosshair.html">crosshair</a> </div>
</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>
projects / dygraphs.git / blobdiff