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