[dygraphs.git] / tests / is-zoomed-ignore-programmatic-zoom.html

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>isZoomedIgnoreProgrammaticZoom 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>
    <!-- Ensure that the documentation generator picks us up: {isZoomedIgnoreProgrammaticZoom:} -->
    <h1>isZoomedIgnoreProgrammaticZoom Option</h1>
    <p>
      By default, when the <code>dateWindow</code> or <code>updateOptions</code>
      of a chart is changed programmatically by a call to <code>updateOptions</code>
      the zoomed flags (<code>isZoomed</code>) are changed. This is the same
      as manually zooming in using the mouse.
    </p>
    <p>
      Sometimes it may be desirable to change the display of the chart by
      manipulating the <code>dateWindow</code> and <code>valueRange</code>
      options but without changing the zoomed flags, for example where manual
      zooming is still required but where it is also desired that the zoomed
      flags drive display elements, but only for manual zooming.
    </p>
    <p>
      In this case <code>isZoomedIgnoreProgrammaticZoom</code> may be specified along with
      either the <code>dateWindow</code> or <code>valueRange</code> values to
      <code>updateOptions</code> and the zoomed flags will remain unaffected.
    </p>
    <p>
      The chart below may be manipulated to change the <code>updateOptions</code>
      using the Max and Min Y axis buttons and the <code>dateWindow</code>
      by using the Max and Min X axis buttons.
    </p>
    <p>
      Toggle the check box below to determine the difference in operation of the zoom flags
      when the date and value windows of the chart are changed using the arrows underneath.
    </p>
    <p><input id="isZoomedIgnoreProgrammaticZoom" type="checkbox" checked=true />Do not change zoom flags (<code>isZoomedIgnoreProgrammaticZoom</code>)</p>

    <div>
      <div style="float: left">
        <p>
          Max Y Axis:
          <input type="button" value="&uarr;" onclick="adjustTop(+1)" />
          <input type="button" value="&darr;" onclick="adjustTop(-1)" />
        </p>
        <p>
          Min Y Axis:
          <input type="button" value="&uarr;" onclick="adjustBottom(+1)" />
          <input type="button" value="&darr;" onclick="adjustBottom(-1)" />
        </p>
        <p>
          Min X Axis:
          <input type="button" value="&larr;" onclick="adjustFirst(-100000000)" />
          <input type="button" value="&rarr;" onclick="adjustFirst(+100000000)" />
        </p>
        <p>
          Max X Axis:
          <input type="button" value="&larr;" onclick="adjustLast(-100000000)" />
          <input type="button" value="&rarr;" onclick="adjustLast(+100000000)" />
        </p>
      </div>
      <div id="div_g" style="width: 600px; height: 300px; float: left"></div>
      <div style="float: left">

      </div>
    </div>
    <div style="display: inline-block">
      <h4> Zoomed Flags</h4>
      <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>
      <h4>Window coordinates (in dates and values):</h4>
      <div id="xdimensions"></div>
      <div id="ydimensions"></div>
    </div>

    <script type="text/javascript">
      g = new Dygraph(
        document.getElementById("div_g"),
        NoisyData,
        {
          errorBars: true,
          zoomCallback : function(minDate, maxDate, yRange) {
            showDimensions(minDate, maxDate, yRange);
          },
          drawCallback: function(me, initial) {
            document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
            document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
            document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
            var x_range = me.xAxisRange()
            var elem = document.getElementById("xdimensions")
            elem.innerHTML = "dateWindow : [" + x_range[0] + ", "+ x_range[1] + "]"
          }
        }
      )

      // Pull an initial value for logging.
      var minDate = g.xAxisRange()[0];
      var maxDate = g.xAxisRange()[1];
      var minValue = g.yAxisRange()[0];
      var maxValue = g.yAxisRange()[1];
      showDimensions(minDate, maxDate, [minValue, maxValue]);

      function showDimensions(minDate, maxDate, yRanges) {
        showXDimensions(minDate, maxDate);
        showYDimensions(yRanges);
      }

      function getNoChange() {
        var options = {}
        var elem = document.getElementById("isZoomedIgnoreProgrammaticZoom")
        if (elem.checked) {
          options.isZoomedIgnoreProgrammaticZoom = true
        }
        return options
      }

      function adjustTop(value) {
        options = getNoChange()
        maxValue += value
        options.valueRange = [minValue, maxValue]
        console.log(options)
        g.updateOptions(options)
      }

      function adjustBottom(value) {
        options = getNoChange()
        minValue += value
        options.valueRange = [minValue, maxValue]
        console.log(options)
        g.updateOptions(options)
      }

      function adjustFirst(value) {
        options = getNoChange()
        minDate += value
        options.dateWindow = [minDate, maxDate]
        console.log(options)
        g.updateOptions(options)
      }

      function adjustLast(value) {
        options = getNoChange()
        maxDate += value
        options.dateWindow = [minDate, maxDate]
        g.updateOptions(options)
      }

      function showXDimensions(first, second) {
        var elem = document.getElementById("xdimensions");
        elem.innerHTML = "dateWindow: [" + first + ", "+ second + "]";
      }

      function showYDimensions(ranges) {
        var elem = document.getElementById("ydimensions");
        elem.innerHTML = "valueRange: [" + ranges + "]";
      }

    </script>
  </body>
</html>
Commit	Line	Data
81856f70	1	<html>
36dfa958 DV	2	<head>
	3	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
	4	<title>isZoomedIgnoreProgrammaticZoom Flag</title>
	5	<!--[if IE]>
	6	<script type="text/javascript" src="../excanvas.js"></script>
	7	<![endif]-->
7e5ddc94 DV	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
36dfa958 DV	14	<script type="text/javascript" src="data.js"></script>
	15	</head>
	16	<body>
	17	<!-- Ensure that the documentation generator picks us up: {isZoomedIgnoreProgrammaticZoom:} -->
	18	<h1>isZoomedIgnoreProgrammaticZoom Option</h1>
	19	<p>
	20	By default, when the <code>dateWindow</code> or <code>updateOptions</code>
	21	of a chart is changed programmatically by a call to <code>updateOptions</code>
	22	the zoomed flags (<code>isZoomed</code>) are changed. This is the same
	23	as manually zooming in using the mouse.
	24	</p>
	25	<p>
	26	Sometimes it may be desirable to change the display of the chart by
	27	manipulating the <code>dateWindow</code> and <code>valueRange</code>
	28	options but without changing the zoomed flags, for example where manual
	29	zooming is still required but where it is also desired that the zoomed
	30	flags drive display elements, but only for manual zooming.
	31	</p>
	32	<p>
	33	In this case <code>isZoomedIgnoreProgrammaticZoom</code> may be specified along with
	34	either the <code>dateWindow</code> or <code>valueRange</code> values to
	35	<code>updateOptions</code> and the zoomed flags will remain unaffected.
	36	</p>
	37	<p>
	38	The chart below may be manipulated to change the <code>updateOptions</code>
	39	using the Max and Min Y axis buttons and the <code>dateWindow</code>
	40	by using the Max and Min X axis buttons.
	41	</p>
	42	<p>
	43	Toggle the check box below to determine the difference in operation of the zoom flags
	44	when the date and value windows of the chart are changed using the arrows underneath.
	45	</p>
	46	<p><input id="isZoomedIgnoreProgrammaticZoom" type="checkbox" checked=true />Do not change zoom flags (<code>isZoomedIgnoreProgrammaticZoom</code>)</p>
	47
	48	<div>
	49	<div style="float: left">
485efa38	50	<p>
36dfa958 DV	51	Max Y Axis:
	52	<input type="button" value="↑" onclick="adjustTop(+1)" />
	53	<input type="button" value="↓" onclick="adjustTop(-1)" />
485efa38 NN	54	</p>
485efa38 NN	55	<p>
36dfa958 DV	56	Min Y Axis:
	57	<input type="button" value="↑" onclick="adjustBottom(+1)" />
	58	<input type="button" value="↓" onclick="adjustBottom(-1)" />
485efa38 NN	59	</p>
485efa38 NN	60	<p>
36dfa958 DV	61	Min X Axis:
	62	<input type="button" value="←" onclick="adjustFirst(-100000000)" />
	63	<input type="button" value="→" onclick="adjustFirst(+100000000)" />
485efa38 NN	64	</p>
485efa38 NN	65	<p>
36dfa958 DV	66	Max X Axis:
	67	<input type="button" value="←" onclick="adjustLast(-100000000)" />
	68	<input type="button" value="→" onclick="adjustLast(+100000000)" />
485efa38	69	</p>
36dfa958 DV	70	</div>
	71	<div id="div_g" style="width: 600px; height: 300px; float: left"></div>
	72	<div style="float: left">
81856f70	73
36dfa958 DV	74	</div>
	75	</div>
	76	<div style="display: inline-block">
	77	<h4> Zoomed Flags</h4>
	78	<p>Zoomed: <span id="zoomed">False</span></p>
	79	<p>Zoomed X: <span id="zoomedX">False</span></p>
	80	<p>Zoomed Y: <span id="zoomedY">False</span></p>
	81	<h4>Window coordinates (in dates and values):</h4>
	82	<div id="xdimensions"></div>
	83	<div id="ydimensions"></div>
	84	</div>
485efa38	85
36dfa958 DV	86	<script type="text/javascript">
	87	g = new Dygraph(
	88	document.getElementById("div_g"),
	89	NoisyData,
	90	{
	91	errorBars: true,
	92	zoomCallback : function(minDate, maxDate, yRange) {
	93	showDimensions(minDate, maxDate, yRange);
	94	},
	95	drawCallback: function(me, initial) {
	96	document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
	97	document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
	98	document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
	99	var x_range = me.xAxisRange()
	100	var elem = document.getElementById("xdimensions")
	101	elem.innerHTML = "dateWindow : [" + x_range[0] + ", "+ x_range[1] + "]"
	102	}
	103	}
	104	)
81856f70	105
36dfa958 DV	106	// Pull an initial value for logging.
	107	var minDate = g.xAxisRange()[0];
	108	var maxDate = g.xAxisRange()[1];
	109	var minValue = g.yAxisRange()[0];
	110	var maxValue = g.yAxisRange()[1];
	111	showDimensions(minDate, maxDate, [minValue, maxValue]);
81856f70	112
36dfa958 DV	113	function showDimensions(minDate, maxDate, yRanges) {
	114	showXDimensions(minDate, maxDate);
	115	showYDimensions(yRanges);
	116	}
81856f70	117
36dfa958 DV	118	function getNoChange() {
	119	var options = {}
	120	var elem = document.getElementById("isZoomedIgnoreProgrammaticZoom")
	121	if (elem.checked) {
	122	options.isZoomedIgnoreProgrammaticZoom = true
	123	}
	124	return options
	125	}
81856f70	126
36dfa958 DV	127	function adjustTop(value) {
	128	options = getNoChange()
	129	maxValue += value
	130	options.valueRange = [minValue, maxValue]
	131	console.log(options)
	132	g.updateOptions(options)
	133	}
81856f70	134
36dfa958 DV	135	function adjustBottom(value) {
	136	options = getNoChange()
	137	minValue += value
	138	options.valueRange = [minValue, maxValue]
	139	console.log(options)
	140	g.updateOptions(options)
	141	}
81856f70	142
36dfa958 DV	143	function adjustFirst(value) {
	144	options = getNoChange()
	145	minDate += value
	146	options.dateWindow = [minDate, maxDate]
	147	console.log(options)
	148	g.updateOptions(options)
	149	}
81856f70	150
36dfa958 DV	151	function adjustLast(value) {
	152	options = getNoChange()
	153	maxDate += value
	154	options.dateWindow = [minDate, maxDate]
	155	g.updateOptions(options)
	156	}
81856f70	157
36dfa958 DV	158	function showXDimensions(first, second) {
	159	var elem = document.getElementById("xdimensions");
	160	elem.innerHTML = "dateWindow: [" + first + ", "+ second + "]";
	161	}
81856f70	162
36dfa958 DV	163	function showYDimensions(ranges) {
	164	var elem = document.getElementById("ydimensions");
	165	elem.innerHTML = "valueRange: [" + ranges + "]";
	166	}
81856f70	167
36dfa958 DV	168	</script>
36dfa958 DV	169	</body>
81856f70	170	</html>