this.layout_.addDataset(this.attr_("labels")[i], datasets[i]);
}
- if (datasets.length > 0) {
- // TODO(danvk): this method doesn't need to return anything.
- this.computeYAxisRanges_(extremes);
- this.layout_.updateOptions( { yAxes: this.axes_,
- seriesToAxisMap: this.seriesToAxisMap_
- } );
- }
+ this.computeYAxisRanges_(extremes);
+ this.layout_.updateOptions( { yAxes: this.axes_,
+ seriesToAxisMap: this.seriesToAxisMap_
+ } );
this.addXTicks_();
// Save the X axis zoomed status as the updateOptions call will tend to set it errorneously
// Only use valid extremes to stop null data series' from corrupting the scale.
extremeMinY = extremes[series[j]][0];
if (extremeMinY != null) {
- minY = Math.min(extremeMinY, minY);
+ minY = Math.min(extremeMinY, minY);
}
extremeMaxY = extremes[series[j]][1];
if (extremeMaxY != null) {
- maxY = Math.max(extremeMaxY, maxY);
+ maxY = Math.max(extremeMaxY, maxY);
}
}
if (axis.includeZero && minY > 0) minY = 0;
// Ensure we have a valid scale, otherwise defualt to zero for safety.
- if (minY == Infinity) {
- minY = 0;
- }
-
- if (maxY == -Infinity) {
- maxY = 0;
- }
+ if (minY == Infinity) minY = 0;
+ if (maxY == -Infinity) maxY = 0;
// Add some padding and round up to an integer to be human-friendly.
var span = maxY - minY;
* <li>errorBars: changes whether the data contains stddev</li>
* </ul>
*
- * If the dateWindow or valueRange options are specified, the relevant zoomed_x_
- * or zoomed_y_ flags are set, unless the isZoomedIgnoreProgrammaticZoom option is also
- * secified. This allows for the chart to be programmatically zoomed without
- * altering the zoomed flags.
- *
* @param {Object} attrs The new properties and values
*/
Dygraph.prototype.updateOptions = function(attrs) {
"default": "false",
"labels": ["Zooming"],
"type": "boolean",
- "description" : "When this flag is passed along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
+ "description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
}
}
; // </JSON>
'Legend',
'Overall display',
'Rolling Averages',
- 'Value display/formatting'
+ 'Value display/formatting',
+ 'Zooming'
];
var cats = {};
for (var i = 0; i < valid_cats.length; i++) cats[valid_cats[i]] = true;
<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>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <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>
- 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.
+ Max Y Axis:
+ <input type="button" value="↑" onclick="adjustTop(+1)" />
+ <input type="button" value="↓" onclick="adjustTop(-1)" />
</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.
+ Min Y Axis:
+ <input type="button" value="↑" onclick="adjustBottom(+1)" />
+ <input type="button" value="↓" onclick="adjustBottom(-1)" />
</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.
+ Min X Axis:
+ <input type="button" value="←" onclick="adjustFirst(-100000000)" />
+ <input type="button" value="→" onclick="adjustFirst(+100000000)" />
</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.
+ Max X Axis:
+ <input type="button" value="←" onclick="adjustLast(-100000000)" />
+ <input type="button" value="→" onclick="adjustLast(+100000000)" />
</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 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>
+ </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] + "]"
- }
- }
- )
+ <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]);
+ // 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 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 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 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 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 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 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 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 + "]";
- }
+ function showYDimensions(ranges) {
+ var elem = document.getElementById("ydimensions");
+ elem.innerHTML = "valueRange: [" + ranges + "]";
+ }
- </script>
- </body>
+ </script>
+ </body>
</html>
<html>
- <head>
- <title>isZoomedIgnoresProgrammaticZoom 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>
- <h1 id="zoom">Determining Zoom</h1>
- <p>
- It is possible to detect whether a chart has been zoomed in either axis by the use of the <code>isZoomed</code> function.
- If called with no argument, it will report whether <em>either</em> axis has been zoomed.
- Alternatively it can be called with an argument of either <code>'x'</code> or <code>'y'</code> and it will report the status of just that axis.
- </p>
-
- <p>Here's a simple example using <code>drawCallback</code> to display the various zoom states whenever the chart is zoomed:</p>
-
- <div style="width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT</div>
- <div style="width: 750px">
- <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 class="codeoutput" style="float:left;">
- <div id="zoomdiv"></div>
- <script type="text/javascript">
- new Dygraph(
-
- // containing div
- document.getElementById("zoomdiv"),
-
- // CSV or path to a CSV file.
- "Date,Value\n" +
- "2011-01-07,75\n" +
- "2011-01-08,70\n" +
- "2011-01-09,90\n" +
- "2011-01-10,30\n" +
- "2011-01-11,40\n" +
- "2011-01-12,60\n" +
- "2011-01-13,70\n" +
- "2011-01-14,40\n",
- {
- drawCallback: function(me, initial) {
- document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
- document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
- document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
- }
- }
- );
- </script>
- </div>
- </div>
-
- <p>
- <div style="clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML</div>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <title>isZoomedIgnoresProgrammaticZoom 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>
+ <h1 id="zoom">Determining Zoom</h1>
+ <p>
+ It is possible to detect whether a chart has been zoomed in either axis by the use of the <code>isZoomed</code> function.
+ If called with no argument, it will report whether <em>either</em> axis has been zoomed.
+ Alternatively it can be called with an argument of either <code>'x'</code> or <code>'y'</code> and it will report the status of just that axis.
+ </p>
+
+ <p>Here's a simple example using <code>drawCallback</code> to display the various zoom states whenever the chart is zoomed:</p>
+
+ <div style="width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT</div>
+ <div style="width: 750px">
+ <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 class="codeoutput" style="float:left;">
+ <div id="zoomdiv"></div>
+ <script type="text/javascript">
+ new Dygraph(
+
+ // containing div
+ document.getElementById("zoomdiv"),
+
+ // CSV or path to a CSV file.
+ "Date,Value\n" +
+ "2011-01-07,75\n" +
+ "2011-01-08,70\n" +
+ "2011-01-09,90\n" +
+ "2011-01-10,30\n" +
+ "2011-01-11,40\n" +
+ "2011-01-12,60\n" +
+ "2011-01-13,70\n" +
+ "2011-01-14,40\n",
+ {
+ drawCallback: function(me, initial) {
+ document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
+ document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
+ document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
+ }
+ }
+ );
+ </script>
+ </div>
+ </div>
+
+ <p>
+ <div style="clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML</div>
<pre>
new Dygraph(
- // containing div
- document.getElementById("zoomdiv"),
+ // containing div
+ document.getElementById("zoomdiv"),
- // CSV or path to a CSV file.
- "Date,Temperature\n" +
- "2011-01-07,75\n" +
- "2011-01-08,70\n" +
- "2011-01-09,90\n" +
- "2011-01-10,30\n" +
- "2011-01-11,40\n" +
- "2011-01-12,60\n" +
- "2011-01-13,70\n" +
- "2011-01-14,40\n",
- {
- drawCallback: function(me, initial) {
- document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
- document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
- document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
- }
+ // CSV or path to a CSV file.
+ "Date,Temperature\n" +
+ "2011-01-07,75\n" +
+ "2011-01-08,70\n" +
+ "2011-01-09,90\n" +
+ "2011-01-10,30\n" +
+ "2011-01-11,40\n" +
+ "2011-01-12,60\n" +
+ "2011-01-13,70\n" +
+ "2011-01-14,40\n",
+ {
+ drawCallback: function(me, initial) {
+ document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
+ document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
+ document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
}
+ }
);
</pre>
- </p>
-
-
<p>The <a href="tests/zoom.html">Tests for zoom operations</a> show a full example of this in action.</p>
-
- <h3>Programmatic Zoom</h3>
- When a chart is programmatically zoomed by updating either the <code>dateWindow</code>
- or <code>valueRange</code> option, by default the zoomed flags are also updated correspondingly.
- It is possible to prevent this by specifying the <code>isZoomedIgnoreProgrammaticZoom</code> in the same
- call to the <code>updateOptions</code> method.
- </p>
-
The <a href="tests/is-zoomed-ignore-programmatic-zoom.html">is-zoomed-ignore-programmatic-zoom</a> test shows this in operation.
- </p>
- </body>
+ </p>
+
+ <p>The <a href="tests/zoom.html">Tests for zoom operations</a> show a full example of this in action.</p>
+
+ <h3>Programmatic Zoom</h3>
+ <p>
+ When a chart is programmatically zoomed by updating either the <code>dateWindow</code>
+ or <code>valueRange</code> option, by default the zoomed flags are also updated correspondingly.
+ It is possible to prevent this by specifying the <code>isZoomedIgnoreProgrammaticZoom</code> in the same
+ call to the <code>updateOptions</code> method.
+ </p>
+ <p>
+ The <a href="tests/is-zoomed-ignore-programmatic-zoom.html">is-zoomed-ignore-programmatic-zoom</a> test shows this in operation.
+ </p>
+ </body>
</html>
projects / dygraphs.git / commitdiff