+++ /dev/null
-<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="↑" onclick="adjustTop(+1)" />
- <input type="button" value="↓" onclick="adjustTop(-1)" />
- </p>
- <p>
- Min Y Axis:
- <input type="button" value="↑" onclick="adjustBottom(+1)" />
- <input type="button" value="↓" onclick="adjustBottom(-1)" />
- </p>
- <p>
- Min X Axis:
- <input type="button" value="←" onclick="adjustFirst(-100000000)" />
- <input type="button" value="→" onclick="adjustFirst(+100000000)" />
- </p>
- <p>
- Max X Axis:
- <input type="button" value="←" onclick="adjustLast(-100000000)" />
- <input type="button" value="→" 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>
projects / dygraphs.git / blobdiff