dcos-dygraphs
Version:
dygraphs is a fast, flexible open source JavaScript charting library.
167 lines (152 loc) • 6.08 kB
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="../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>