[dygraphs.git] / tests / is-zoomed.html

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>isZoomedIgnoresProgrammaticZoom Flag</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

    <script type="text/javascript" src="data.js"></script>
  </head>
  <body>
    <h1 id="zoom">Determining Zoom</h1>
    <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">
        var g = 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(&quot;zoomdiv&quot;),

  // CSV or path to a CSV file.
  &quot;Date,Temperature\n&quot; +
  &quot;2011-01-07,75\n&quot; +
  &quot;2011-01-08,70\n&quot; +
  &quot;2011-01-09,90\n&quot; +
  &quot;2011-01-10,30\n&quot; +
  &quot;2011-01-11,40\n&quot; +
  &quot;2011-01-12,60\n&quot; +
  &quot;2011-01-13,70\n&quot; +
  &quot;2011-01-14,40\n&quot;,
  {
    drawCallback: function(me, initial) {
    document.getElementById(&quot;zoomed&quot;).innerHTML = &quot;&quot; + me.isZoomed();
    document.getElementById(&quot;zoomedX&quot;).innerHTML = &quot;&quot; + me.isZoomed(&quot;x&quot;);
    document.getElementById(&quot;zoomedY&quot;).innerHTML = &quot;&quot; + me.isZoomed(&quot;y&quot;);
    }
  }
  );
</pre>
    </p>
  
    <p>The <a href="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>isZoomedIgnoreProgrammaticZoom</code> in the same
      call to the <code>updateOptions</code> method.
    </p>
    <p>
      The <a href="tests/is-zoomed-ignore-programmatic-zoom.html">is-zoomed-ignore-programmatic-zoom</a> test shows this in operation.
    </p>
  </body>
</html>
Commit	Line	Data
	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("zoomdiv"),
	71
	72	// CSV or path to a CSV file.
	73	"Date,Temperature\n" +
	74	"2011-01-07,75\n" +
	75	"2011-01-08,70\n" +
	76	"2011-01-09,90\n" +
	77	"2011-01-10,30\n" +
	78	"2011-01-11,40\n" +
	79	"2011-01-12,60\n" +
	80	"2011-01-13,70\n" +
	81	"2011-01-14,40\n",
	82	{
	83	drawCallback: function(me, initial) {
	84	document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
	85	document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
	86	document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
	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>