tests/is-zoomed.html

   1 <html>
   2   <head>
   3     <link rel="stylesheet" href="../css/dygraph.css">
   4     <title>isZoomed method</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(&quot;zoomdiv&quot;),
  68
  69   // CSV or path to a CSV file.
  70   &quot;Date,Temperature\n&quot; +
  71   &quot;2011-01-07,75\n&quot; +
  72   &quot;2011-01-08,70\n&quot; +
  73   &quot;2011-01-09,90\n&quot; +
  74   &quot;2011-01-10,30\n&quot; +
  75   &quot;2011-01-11,40\n&quot; +
  76   &quot;2011-01-12,60\n&quot; +
  77   &quot;2011-01-13,70\n&quot; +
  78   &quot;2011-01-14,40\n&quot;,
  79   {
  80     drawCallback: function(me, initial) {
  81     document.getElementById(&quot;zoomed&quot;).innerHTML = &quot;&quot; + me.isZoomed();
  82     document.getElementById(&quot;zoomedX&quot;).innerHTML = &quot;&quot; + me.isZoomed(&quot;x&quot;);
  83     document.getElementById(&quot;zoomedY&quot;).innerHTML = &quot;&quot; + me.isZoomed(&quot;y&quot;);
  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   </body>
  92 </html>