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

<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>isZoomed method</title>
    <script type="text/javascript" src="../dist/dygraph.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>
  </body>
</html>
Commit	Line	Data
e5152598	1	<html>
36dfa958	2	<head>
fd6b8dad	3	<link rel="stylesheet" href="../dist/dygraph.css">
87f78fb2	4	<title>isZoomed method</title>
fbd6834a	5	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	6
36dfa958 DV	7	<script type="text/javascript" src="data.js"></script>
	8	</head>
	9	<body>
	10	<h1 id="zoom">Determining Zoom</h1>
	11	<p>
	12	It is possible to detect whether a chart has been zoomed in either axis by the use of the <code>isZoomed</code> function.
	13	If called with no argument, it will report whether <em>either</em> axis has been zoomed.
	14	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.
	15	</p>
87f78fb2	16
36dfa958	17	<p>Here's a simple example using <code>drawCallback</code> to display the various zoom states whenever the chart is zoomed:</p>
87f78fb2	18
36dfa958 DV	19	<div style="width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT</div>
	20	<div style="width: 750px">
	21	<div style="float: right">
	22	<p>Zoomed: <span id="zoomed">False</span><p/>
	23	<p>Zoomed X: <span id="zoomedX">False</span><p/>
	24	<p>Zoomed Y: <span id="zoomedY">False</span><p/>
	25	</div>
	26	<div class="codeoutput" style="float:left;">
	27	<div id="zoomdiv"></div>
	28	<script type="text/javascript">
f6fbf9e0	29	var g = new Dygraph(
87f78fb2	30
36dfa958 DV	31	// containing div
36dfa958 DV	32	document.getElementById("zoomdiv"),
87f78fb2	33
36dfa958 DV	34	// CSV or path to a CSV file.
	35	"Date,Value\n" +
	36	"2011-01-07,75\n" +
	37	"2011-01-08,70\n" +
	38	"2011-01-09,90\n" +
	39	"2011-01-10,30\n" +
	40	"2011-01-11,40\n" +
	41	"2011-01-12,60\n" +
	42	"2011-01-13,70\n" +
	43	"2011-01-14,40\n",
	44	{
	45	drawCallback: function(me, initial) {
	46	document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
	47	document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
	48	document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
	49	}
	50	}
	51	);
	52	</script>
	53	</div>
	54	</div>
87f78fb2	55
36dfa958 DV	56	<p>
36dfa958 DV	57	<div style="clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML</div>
e5152598 NN	58
	59	<pre>
	60	new Dygraph(
	61
36dfa958 DV	62	// containing div
36dfa958 DV	63	document.getElementById("zoomdiv"),
e5152598	64
36dfa958 DV	65	// CSV or path to a CSV file.
	66	"Date,Temperature\n" +
	67	"2011-01-07,75\n" +
	68	"2011-01-08,70\n" +
	69	"2011-01-09,90\n" +
	70	"2011-01-10,30\n" +
	71	"2011-01-11,40\n" +
	72	"2011-01-12,60\n" +
	73	"2011-01-13,70\n" +
	74	"2011-01-14,40\n",
	75	{
	76	drawCallback: function(me, initial) {
	77	document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
	78	document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
	79	document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
e5152598	80	}
36dfa958	81	}
e5152598 NN	82	);
e5152598 NN	83	</pre>
36dfa958	84	</p>
87f78fb2	85
48e614ac	86	<p>The <a href="zoom.html">Tests for zoom operations</a> show a full example of this in action.</p>
36dfa958	87	</body>
e5152598	88	</html>