<!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>
<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>
<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>
rollPeriod: 14,
showRoller: true,
customBars: true,
- yAxisLabelWidth: 30
+ yAxisLabelWidth: 30,
+ title: 'Temperatures in New York vs. San Francisco',
+ ylabel: 'Temperature (F)'
}
);
</script>
<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>
<h2 id="ie">Internet Explorer Compatibility</h2>
- <p>The dygraphs library relies heavily on HTML's <code><canvas></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><canvas></code> tag in IE using VML.</p>
+ <p>The dygraphs library relies heavily on the HTML5 <code><canvas></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>
+
+<pre>
+<!DOCTYPE html>
+</pre>
- <p>You can add IE support to any page using dygraphs by including the following in your page:</p>
+ <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–IE8), you'll need to include the <a href="http://code.google.com/p/explorercanvas/">excanvas</a> library, which emulates the <code><canvas></code> tag using VML. You can add excanvas by including the following snippet:</p>
<pre>
-<head>
- <!--[if IE]><script src="excanvas.js"></script><![endif]-->
-</head>
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <!--[if IE]><script src="path/to/excanvas.js"></script><![endif]-->
+ </head>
</pre>
- <p>This works quite well in practice. Charts are responsive, even under VML emulation.</p>
+<p>(This is surprisingly tricky because the HTML5 doctype breaks excanvas in IE8. See <a href="https://groups.google.com/group/dygraphs-users/browse_thread/thread/c60709e04bc7fe5f#">this discussion</a> for details.)</p>
+
+ <p>While VML emulation 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>
<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>
<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>
<!--
<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: <a href="tests/no-range.html">no-range</a> <a href="tests/numeric-gviz.html">numeric-gviz</a> <a href="tests/small-range-zero.html">small-range-zero</a> </div>
- </td>
- </tr>
- <tr>
- <td><strong>rollPeriod</strong></td>
- <td><code>integer >= 1</code></td>
- <td><code>1</code></td>
- <td>Number of days over which to average data. Discussed extensively above.
- <div class="tests">Tests: <a href="tests/demo.html">demo</a> <a href="tests/two-series.html">two-series</a> <a href="tests/noise.html">noise</a> </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: <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>
- </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: <a href="tests/color-visibility.html">color-visibility</a> <a href="tests/demo.html">demo</a> </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: <a href="tests/fillGraph.html">fillGraph</a> </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: <a href="tests/visibility.html">visibility</a> <a href="tests/color-visibility.html">color-visibility</a> </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 — 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> 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: <a href="tests/callback.html">callback</a> </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: <a href="tests/callback.html">callback</a> </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> Date.parse('2006-01-01'),<br> (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: <a href="tests/dateWindow.html">dateWindow</a> <a href="tests/link-interaction.html">link-interaction</a> </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><br/></code> between lines in the label string. Often used in conjunction with <strong>labelsDiv</strong>.
- <div class="tests">Tests: <a href="tests/customLabel.html">customLabel</a> <a href="tests/demo.html">demo</a> </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: <a href="tests/demo.html">demo</a> <a href="tests/label-div.html">label-div</a> </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: <a href="tests/demo.html">demo</a> <a href="tests/labelsKMB.html">labelsKMB</a> <a href="tests/no-range.html">no-range</a> </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: <a href="tests/labelsKMB.html">labelsKMB</a> </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: <a href="tests/customLabel.html">customLabel</a> </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: <a href="tests/border.html">border</a> <a href="tests/customLabel.html">customLabel</a> </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: <a href="tests/grid_dot.html">grid_dot</a> </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: <a href="tests/draw-points.html">draw-points</a> </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: <a href="tests/spacing.html">spacing</a> </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: <a href="tests/customLabel.html">customLabel</a> </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: <a href="tests/noise.html">noise</a> <a href="tests/customLabel.html">customLabel</a> <a href="tests/draw-points.html">draw-points</a> <a href="tests/fillGraph.html">fillGraph</a> <a href="tests/fractions.html">fractions</a> </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: <a href="tests/fractions.html">fractions</a> </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: <a href="tests/custom-bars.html">custom-bars</a> <a href="tests/zero-series.html">zero-series</a> </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>
<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