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

<html>
    <head>
        <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 NN	1	<html>
81856f70 NN	2	<head>
e5152598	3	<title>isZoomedIgnoreProgrammaticZoom Flag</title>
81856f70 NN	4	<!--[if IE]>
	5	<script type="text/javascript" src="../excanvas.js"></script>
	6	<![endif]-->
	7	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	8	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	9	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	10	<script type="text/javascript" src="../dygraph.js"></script>
	11	<script type="text/javascript" src="data.js"></script>
	12	</head>
	13	<body>
e5152598 NN	14	<!-- Ensure that the documentation generator picks us up: {isZoomedIgnoreProgrammaticZoom:} -->
e5152598 NN	15	<h1>isZoomedIgnoreProgrammaticZoom Option</h1>
485efa38 NN	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>
e5152598	30	In this case <code>isZoomedIgnoreProgrammaticZoom</code> may be specified along with
485efa38 NN	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>
e5152598	43	<p><input id="isZoomedIgnoreProgrammaticZoom" type="checkbox" checked=true />Do not change zoom flags (<code>isZoomedIgnoreProgrammaticZoom</code>)</p>
485efa38	44
81856f70	45	<div>
485efa38 NN	46	<div style="float: left">
	47	<p>
	48	Max Y Axis:
	49	<input type="button" value="↑" onclick="adjustTop(+1)" />
	50	<input type="button" value="↓" onclick="adjustTop(-1)" />
	51	</p>
	52	<p>
	53	Min Y Axis:
	54	<input type="button" value="↑" onclick="adjustBottom(+1)" />
	55	<input type="button" value="↓" onclick="adjustBottom(-1)" />
	56	</p>
	57	<p>
	58	Min X Axis:
	59	<input type="button" value="←" onclick="adjustFirst(-100000000)" />
	60	<input type="button" value="→" onclick="adjustFirst(+100000000)" />
	61	</p>
	62	<p>
	63	Max X Axis:
	64	<input type="button" value="←" onclick="adjustLast(-100000000)" />
	65	<input type="button" value="→" onclick="adjustLast(+100000000)" />
	66	</p>
	67	</div>
	68	<div id="div_g" style="width: 600px; height: 300px; float: left"></div>
	69	<div style="float: left">
81856f70	70
485efa38	71	</div>
81856f70	72	</div>
485efa38 NN	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>
81856f70	81	</div>
485efa38	82
81856f70 NN	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	)
	102
	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]);
	109
	110	function showDimensions(minDate, maxDate, yRanges) {
	111	showXDimensions(minDate, maxDate);
	112	showYDimensions(yRanges);
	113	}
	114
	115	function getNoChange() {
	116	var options = {}
e5152598	117	var elem = document.getElementById("isZoomedIgnoreProgrammaticZoom")
81856f70	118	if (elem.checked) {
e5152598	119	options.isZoomedIgnoreProgrammaticZoom = true
81856f70 NN	120	}
	121	return options
	122	}
	123
	124	function adjustTop(value) {
	125	options = getNoChange()
	126	maxValue += value
	127	options.valueRange = [minValue, maxValue]
	128	console.log(options)
	129	g.updateOptions(options)
	130	}
	131
	132	function adjustBottom(value) {
	133	options = getNoChange()
	134	minValue += value
	135	options.valueRange = [minValue, maxValue]
	136	console.log(options)
	137	g.updateOptions(options)
	138	}
	139
	140	function adjustFirst(value) {
	141	options = getNoChange()
	142	minDate += value
	143	options.dateWindow = [minDate, maxDate]
	144	console.log(options)
	145	g.updateOptions(options)
	146	}
	147
	148	function adjustLast(value) {
	149	options = getNoChange()
	150	maxDate += value
	151	options.dateWindow = [minDate, maxDate]
	152	g.updateOptions(options)
	153	}
	154
	155	function showXDimensions(first, second) {
	156	var elem = document.getElementById("xdimensions");
485efa38	157	elem.innerHTML = "dateWindow: [" + first + ", "+ second + "]";
81856f70 NN	158	}
	159
	160	function showYDimensions(ranges) {
	161	var elem = document.getElementById("ydimensions");
485efa38	162	elem.innerHTML = "valueRange: [" + ranges + "]";
81856f70 NN	163	}
	164
	165	</script>
	166	</body>
	167	</html>