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

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