| | 1 | <html> |
| | 2 | <head> |
| | 3 | <link rel="stylesheet" href="../css/dygraph.css"> |
| | 4 | <title>isZoomedIgnoresProgrammaticZoom Flag</title> |
| | 5 | <!-- |
| | 6 | For production (minified) code, use: |
| | 7 | <script type="text/javascript" src="dygraph-combined.js"></script> |
| | 8 | --> |
| | 9 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
| | 10 | |
| | 11 | <script type="text/javascript" src="data.js"></script> |
| | 12 | </head> |
| | 13 | <body> |
| | 14 | <h1 id="zoom">Determining Zoom</h1> |
| | 15 | <p> |
| | 16 | It is possible to detect whether a chart has been zoomed in either axis by the use of the <code>isZoomed</code> function. |
| | 17 | If called with no argument, it will report whether <em>either</em> axis has been zoomed. |
| | 18 | 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. |
| | 19 | </p> |
| | 20 | |
| | 21 | <p>Here's a simple example using <code>drawCallback</code> to display the various zoom states whenever the chart is zoomed:</p> |
| | 22 | |
| | 23 | <div style="width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT</div> |
| | 24 | <div style="width: 750px"> |
| | 25 | <div style="float: right"> |
| | 26 | <p>Zoomed: <span id="zoomed">False</span><p/> |
| | 27 | <p>Zoomed X: <span id="zoomedX">False</span><p/> |
| | 28 | <p>Zoomed Y: <span id="zoomedY">False</span><p/> |
| | 29 | </div> |
| | 30 | <div class="codeoutput" style="float:left;"> |
| | 31 | <div id="zoomdiv"></div> |
| | 32 | <script type="text/javascript"> |
| | 33 | var g = new Dygraph( |
| | 34 | |
| | 35 | // containing div |
| | 36 | document.getElementById("zoomdiv"), |
| | 37 | |
| | 38 | // CSV or path to a CSV file. |
| | 39 | "Date,Value\n" + |
| | 40 | "2011-01-07,75\n" + |
| | 41 | "2011-01-08,70\n" + |
| | 42 | "2011-01-09,90\n" + |
| | 43 | "2011-01-10,30\n" + |
| | 44 | "2011-01-11,40\n" + |
| | 45 | "2011-01-12,60\n" + |
| | 46 | "2011-01-13,70\n" + |
| | 47 | "2011-01-14,40\n", |
| | 48 | { |
| | 49 | drawCallback: function(me, initial) { |
| | 50 | document.getElementById("zoomed").innerHTML = "" + me.isZoomed(); |
| | 51 | document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x"); |
| | 52 | document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y"); |
| | 53 | } |
| | 54 | } |
| | 55 | ); |
| | 56 | </script> |
| | 57 | </div> |
| | 58 | </div> |
| | 59 | |
| | 60 | <p> |
| | 61 | <div style="clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML</div> |
| | 62 | |
| | 63 | <pre> |
| | 64 | new Dygraph( |
| | 65 | |
| | 66 | // containing div |
| | 67 | document.getElementById("zoomdiv"), |
| | 68 | |
| | 69 | // CSV or path to a CSV file. |
| | 70 | "Date,Temperature\n" + |
| | 71 | "2011-01-07,75\n" + |
| | 72 | "2011-01-08,70\n" + |
| | 73 | "2011-01-09,90\n" + |
| | 74 | "2011-01-10,30\n" + |
| | 75 | "2011-01-11,40\n" + |
| | 76 | "2011-01-12,60\n" + |
| | 77 | "2011-01-13,70\n" + |
| | 78 | "2011-01-14,40\n", |
| | 79 | { |
| | 80 | drawCallback: function(me, initial) { |
| | 81 | document.getElementById("zoomed").innerHTML = "" + me.isZoomed(); |
| | 82 | document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x"); |
| | 83 | document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y"); |
| | 84 | } |
| | 85 | } |
| | 86 | ); |
| | 87 | </pre> |
| | 88 | </p> |
| | 89 | |
| | 90 | <p>The <a href="zoom.html">Tests for zoom operations</a> show a full example of this in action.</p> |
| | 91 | |
| | 92 | <h3>Programmatic Zoom</h3> |
| | 93 | <p> |
| | 94 | When a chart is programmatically zoomed by updating either the <code>dateWindow</code> |
| | 95 | or <code>valueRange</code> option, by default the zoomed flags are also updated correspondingly. |
| | 96 | It is possible to prevent this by specifying the <code>isZoomedIgnoreProgrammaticZoom</code> in the same |
| | 97 | call to the <code>updateOptions</code> method. |
| | 98 | </p> |
| | 99 | <p> |
| | 100 | The <a href="tests/is-zoomed-ignore-programmatic-zoom.html">is-zoomed-ignore-programmatic-zoom</a> test shows this in operation. |
| | 101 | </p> |
| | 102 | </body> |
| | 103 | </html> |
projects / dygraphs.git / blame_incremental