tests/is-zoomed.html

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