[dygraphs.git] / tests / no-zoom-change.html

<html>
    <head>
        <title>zoom</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>
        <h3>Click the buttons to change the date and value windows of the chart.</h3>
        <h4>Window coordinates (in dates and values):</h4>
        <div id="xdimensions"></div> <div id="ydimensions"></div>
        <br />
        <div>
            <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>
            <input id="noZoomFlagChange" type="checkbox" checked=true>Do not change zoom
        </div>

        <div style="float: right">
            <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/>
        </div>
        <div style="float: left">
            <p><input type="button" value="&uarr;" onclick="adjustTop(+1)"></p>
            <p><input type="button" value="&darr;" onclick="adjustTop(-1)"></p>
            <p>
                <input type="button" value="&larr;" onclick="adjustFirst(-100000000)">
                    <input type="button" value="&rarr;" onclick="adjustFirst(+100000000)">
            </p>
            <p><input type="button" value="&uarr;" onclick="adjustBottom(+1)"></p>
            <p><input type="button" value="&darr;" onclick="adjustBottom(-1)"></p>
        </div>
        <div id="div_g" style="width: 600px; height: 300px; float: left"></div>
        <div style="float: left">
            <p>
                <input type="button" value="&larr;" onclick="adjustLast(-100000000)">
                <input type="button" value="&rarr;" onclick="adjustLast(+100000000)">
            </p>
        </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("noZoomFlagChange")
                if (elem.checked) {
                    options.noZoomFlagChange = 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>
	2	<head>
	3	<title>zoom</title>
	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>
	14	<h3>Click the buttons to change the date and value windows of the chart.</h3>
	15	<h4>Window coordinates (in dates and values):</h4>
	16	<div id="xdimensions"></div> <div id="ydimensions"></div>
	17	<br />
	18	<div>
	19	<p>
	20	Toggle the check box below to determine the difference in operation of the zoom flags
	21	when the date and value windows of the chart are changed using the arrows underneath.
	22	</p>
	23	<input id="noZoomFlagChange" type="checkbox" checked=true>Do not change zoom
	24	</div>
	25
	26	<div style="float: right">
	27	<p>Zoomed: <span id="zoomed">False</span><p/>
	28	<p>Zoomed X: <span id="zoomedX">False</span><p/>
	29	<p>Zoomed Y: <span id="zoomedY">False</span><p/>
	30	</div>
	31	<div style="float: left">
	32	<p><input type="button" value="↑" onclick="adjustTop(+1)"></p>
	33	<p><input type="button" value="↓" onclick="adjustTop(-1)"></p>
	34	<p>
	35	<input type="button" value="←" onclick="adjustFirst(-100000000)">
	36	<input type="button" value="→" onclick="adjustFirst(+100000000)">
	37	</p>
	38	<p><input type="button" value="↑" onclick="adjustBottom(+1)"></p>
	39	<p><input type="button" value="↓" onclick="adjustBottom(-1)"></p>
	40	</div>
	41	<div id="div_g" style="width: 600px; height: 300px; float: left"></div>
	42	<div style="float: left">
	43	<p>
	44	<input type="button" value="←" onclick="adjustLast(-100000000)">
	45	<input type="button" value="→" onclick="adjustLast(+100000000)">
	46	</p>
	47	</div>
	48	<script type="text/javascript">
	49	g = new Dygraph(
	50	document.getElementById("div_g"),
	51	NoisyData,
	52	{
	53	errorBars: true,
	54	zoomCallback : function(minDate, maxDate, yRange) {
	55	showDimensions(minDate, maxDate, yRange);
	56	},
	57	drawCallback: function(me, initial) {
	58	document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
	59	document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
	60	document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
	61	var x_range = me.xAxisRange()
	62	var elem = document.getElementById("xdimensions")
	63	elem.innerHTML = "dateWindow : [" + x_range[0] + ", "+ x_range[1] + "]"
	64	}
65	}
66	)
67
68	// Pull an initial value for logging.
69	var minDate = g.xAxisRange()[0];
70	var maxDate = g.xAxisRange()[1];
71	var minValue = g.yAxisRange()[0];
72	var maxValue = g.yAxisRange()[1];
73	showDimensions(minDate, maxDate, [minValue, maxValue]);
74
75	function showDimensions(minDate, maxDate, yRanges) {
76	showXDimensions(minDate, maxDate);
77	showYDimensions(yRanges);
78	}
79
80	function getNoChange() {
81	var options = {}
82	var elem = document.getElementById("noZoomFlagChange")
83	if (elem.checked) {
84	options.noZoomFlagChange = true
85	}
86	return options
87	}
88
89	function adjustTop(value) {
90	options = getNoChange()
91	maxValue += value
92	options.valueRange = [minValue, maxValue]
93	console.log(options)
94	g.updateOptions(options)
95	}
96
97	function adjustBottom(value) {
98	options = getNoChange()
99	minValue += value
100	options.valueRange = [minValue, maxValue]
101	console.log(options)
102	g.updateOptions(options)
103	}
104
105	function adjustFirst(value) {
106	options = getNoChange()
107	minDate += value
108	options.dateWindow = [minDate, maxDate]
109	console.log(options)
110	g.updateOptions(options)
111	}
112
113	function adjustLast(value) {
114	options = getNoChange()
115	maxDate += value
116	options.dateWindow = [minDate, maxDate]
117	g.updateOptions(options)
118	}
119
120	function showXDimensions(first, second) {
121	var elem = document.getElementById("xdimensions");
122	elem.innerHTML = "dateWindow : [" + first + ", "+ second + "]";
123	}
124
125	function showYDimensions(ranges) {
126	var elem = document.getElementById("ydimensions");
127	elem.innerHTML = "valueRange : [" + ranges + "]";
128	}
129
130	</script>
131	</body>
132	</html>