From: Dan Vanderkam <danvdk@gmail.com>
Date: Wed, 3 Feb 2010 17:59:28 +0000 (-0800)
Subject: add xAxisRange and a few tests
X-Git-Tag: v1.0.0~741
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=599fb4adc5928be949ee5c7e90b19b0c4cca6e54;p=dygraphs.git
add xAxisRange and a few tests
---
diff --git a/dygraph.js b/dygraph.js
index 1df7cc1..8a303a0 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -254,6 +254,21 @@ Dygraph.prototype.rollPeriod = function() {
return this.rollPeriod_;
};
+/**
+ * Returns the currently-visible x-range. This can be affected by zooming,
+ * panning or a call to updateOptions.
+ * Returns a two-element array: [left, right].
+ * If the Dygraph has dates on the x-axis, these will be millis since epoch.
+ */
+Dygraph.prototype.xAxisRange = function() {
+ if (this.dateWindow_) return this.dateWindow_;
+
+ // The entire chart is visible.
+ var left = this.rawData_[0][0];
+ var right = this.rawData_[this.rawData_.length - 1][0];
+ return [left, right];
+};
+
Dygraph.addEvent = function(el, evt, fn) {
var normed_fn = function(e) {
if (!e) var e = window.event;
@@ -1323,6 +1338,10 @@ Dygraph.prototype.drawGraph_ = function(data) {
this.plotter_.render();
this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
this.canvas_.height);
+
+ if (this.attr_("drawCallback") !== null) {
+ this.attr_("drawCallback")(this);
+ }
};
/**
diff --git a/tests/callback.html b/tests/callback.html
index 7f9d278..b4ba5cd 100644
--- a/tests/callback.html
+++ b/tests/callback.html
@@ -13,6 +13,8 @@
<p>Hover, click and zoom to test the callbacks:</p>
<div id="div_g" style="width:600px; height:300px;"></div>
+ <input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
+ <input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
<div id="status" style="width:100%; height:200px;"></div>
<script type="text/javascript">
@@ -35,7 +37,9 @@
errorBars: true,
highlightCallback: function(e, x, pts) {
- s.innerHTML += "<b>Highlight</b> " + pts_info(x,pts) + "<br/>";
+ if (document.getElementById('highlight').checked) {
+ s.innerHTML += "<b>Highlight</b> " + pts_info(x,pts) + "<br/>";
+ }
},
clickCallback: function(e, x, pts) {
@@ -44,6 +48,10 @@
zoomCallback: function(minX, maxX) {
s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + "]<br/>";
+ },
+
+ drawCallback: function(g) {
+ s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
}
}
);
diff --git a/tests/link-interaction.html b/tests/link-interaction.html
new file mode 100644
index 0000000..c0f89bd
--- /dev/null
+++ b/tests/link-interaction.html
@@ -0,0 +1,86 @@
+<html>
+ <head>
+ <title>noise</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../dygraph-combined.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ </head>
+ <body>
+ <div id="div_g"></div>
+ <b>Zoom:</b>
+ <a href="#" onclick="zoom(3600)">hour</a>
+ <a href="#" onclick="zoom(86400)">day</a>
+ <a href="#" onclick="zoom(604800)">week</a>
+ <a href="#" onclick="zoom(30 * 86400)">month</a>
+ <a href="#" onclick="reset()">full</a>
+ <b>Pan:</b>
+ <a href="#" onclick="pan(-1)">left</a>
+ <a href="#" onclick="pan(+1)">right</a>
+
+ <script type="text/javascript">
+ var r = [ ];
+ var base_time = Date.parse("2008/07/01");
+ var num = 24 * 0.25 * 365;
+ for (var i = 0; i < num; i++) {
+ r.push([ new Date(base_time + i * 3600 * 1000),
+ i + 50 * (i % 60), // line
+ i * (num - i) * 4.0 / num // parabola
+ ]);
+ }
+ var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
+ g = new Dygraph(
+ document.getElementById("div_g"),
+ r, {
+ rollPeriod: 7,
+ // errorBars: true,
+ width: 600,
+ height: 300,
+ labels: ["Date", "a", "b"]
+ }
+ );
+
+ var desired_range = null;
+ function approach_range() {
+ if (!desired_range) return;
+ // go halfway there
+ var range = g.xAxisRange();
+ if (Math.abs(desired_range[0] - range[0]) < 60 &&
+ Math.abs(desired_range[1] - range[1]) < 60) {
+ g.updateOptions({dateWindow: desired_range});
+ // (do not set another timeout.)
+ } else {
+ var new_range;
+ new_range = [0.5 * (desired_range[0] + range[0]),
+ 0.5 * (desired_range[1] + range[1])];
+ g.updateOptions({dateWindow: new_range});
+ animate();
+ }
+ }
+ function animate() {
+ setTimeout(approach_range, 50);
+ }
+
+ function zoom(res) {
+ var w = g.xAxisRange();
+ desired_range = [ w[0], w[0] + res * 1000 ];
+ animate();
+ }
+
+ function reset() {
+ desired_range = orig_range;
+ animate();
+ }
+
+ function pan(dir) {
+ var w = g.xAxisRange();
+ var scale = w[1] - w[0];
+ var amount = scale * 0.25 * dir;
+ desired_range = [ w[0] + amount, w[1] + amount ];
+ animate();
+ }
+ </script>
+ </body>
+</html>