<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>
<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>
+ <li><a href="tests/logscale.html">Log scale tests</a></li>
</ul>
</div>
<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>
+
+ <h3>Programmatic Zoom</h3>
+ <p>
+ When a chart is programmatically zoomed by updating either the <code>dateWindow</code>
+ or <code>valueRange</code> option, by default the zoomed flags are also updated correspondingly.
+ It is possible to prevent this by specifying the <code>noZoomFlagChange</code> in the same
+ call to the <code>updateOptions</code> method.
+ </p>
+ <p>
+ The <a href="tests/no-zoom-change.html">no-zoom-change</a> test shows this in operation.
+ </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>
</td>
</tr>
<tr>
+ <td colspan="4">
+ Changing either of two the above options will cause the corresponding zoom
+ flag (<code>isZoomed()</code>) to be set, unless the <code>noZoomFlagChange</code>
+ option is also specified.
+ </td>
+ </tr>
+ <tr>
<td><strong>labelsSeparateLines</strong></td>
<td><code>boolean</code></td>
<td><code>false</code></td>
</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>
</tr>
+ <tr>
+ <td><strong>logscale</strong></td>
+ <td><code>boolean</code></td>
+ <td><code>false</code></td>
+ <td>
+ When set for a y-axis, the graph shows that axis in y-scale. Any values less than or equal
+ to zero are not displayed.</p>
+
+ Not compatible with showZero, and ignores connectSeparatedPoints. Also, showing log scale
+ with valueRanges that are less than zero will result in an unviewable graph.<br/>
+
+ <div class="tests">Tests: <a href="tests/logscale.html">logscale</a>,
+ <a href="tests/stock.html"> stock</div>
+ </td>
+ </tr>
+
+ <tr>
+ <td><strong>noZoomFlagChange</strong></td>
+ <td><code></code></td>
+ <td><code></code></td>
+ <td>
+ When this flag is passed along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state.
+ This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this.
+ <div class="tests">Tests: <a href="tests/no-zoom-change.html">no-zoom-change</a></div>
+ </tr>
</tbody>
</table>
projects / dygraphs.git / blobdiff