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

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