callbacks

From b258a3dae735e0d1ea678916eee09b423e4f8704 Mon Sep 17 00:00:00 2001 From: Dan Vanderkam Date: Tue, 1 Dec 2009 09:42:49 -0800 Subject: [PATCH] add highlightCallback, add selPoints to callbacks, callback test --- dygraph.js | 30 ++++++++++++++++++------------ tests/callback.html | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 70 insertions(+), 12 deletions(-) create mode 100644 tests/callback.html diff --git a/dygraph.js b/dygraph.js index c695c9d..f940cad 100644 --- a/dygraph.js +++ b/dygraph.js @@ -578,8 +578,8 @@ Dygraph.prototype.createDragInterface_ = function() { if (regionWidth < 2 && regionHeight < 2 && self.attr_('clickCallback') != null && self.lastx_ != undefined) { - // TODO(danvk): pass along more info about the point. - self.attr_('clickCallback')(event, new Date(self.lastx_)); + // TODO(danvk): pass along more info about the points. + self.attr_('clickCallback')(event, self.lastx_, self.selPoints_); } if (regionWidth >= 10) { @@ -598,6 +598,7 @@ Dygraph.prototype.createDragInterface_ = function() { // Double-clicking zooms back out Dygraph.addEvent(this.hidden_, 'dblclick', function(event) { + if (self.dateWindow_ == null) return; self.dateWindow_ = null; self.drawGraph_(self.rawData_); var minDate = self.rawData_[0][0]; @@ -698,13 +699,17 @@ Dygraph.prototype.mouseMove_ = function(event) { lastx = points[points.length-1].xval; // Extract the points we've selected - var selPoints = []; + this.selPoints_ = []; for (var i = 0; i < points.length; i++) { if (points[i].xval == lastx) { - selPoints.push(points[i]); + this.selPoints_.push(points[i]); } } + if (this.attr_("highlightCallback")) { + this.attr_("highlightCallback")(event, lastx, this.selPoints_); + } + // Clear the previously drawn vertical, if there is one var circleSize = this.attr_('highlightCircleSize'); var ctx = this.canvas_.getContext("2d"); @@ -715,18 +720,18 @@ Dygraph.prototype.mouseMove_ = function(event) { var isOK = function(x) { return x && !isNaN(x); }; - if (selPoints.length > 0) { - var canvasx = selPoints[0].canvasx; + if (this.selPoints_.length > 0) { + var canvasx = this.selPoints_[0].canvasx; // Set the status message to indicate the selected point(s) var replace = this.attr_('xValueFormatter')(lastx, this) + ":"; var clen = this.colors_.length; - for (var i = 0; i < selPoints.length; i++) { - if (!isOK(selPoints[i].canvasy)) continue; + for (var i = 0; i < this.selPoints_.length; i++) { + if (!isOK(this.selPoints_[i].canvasy)) continue; if (this.attr_("labelsSeparateLines")) { replace += "
"; } - var point = selPoints[i]; + var point = this.selPoints_[i]; var c = new RGBColor(this.colors_[i%clen]); replace += " " + point.name + ":" @@ -739,11 +744,12 @@ Dygraph.prototype.mouseMove_ = function(event) { // Draw colored circles over the center of each selected point ctx.save() - for (var i = 0; i < selPoints.length; i++) { - if (!isOK(selPoints[i%clen].canvasy)) continue; + for (var i = 0; i < this.selPoints_.length; i++) { + if (!isOK(this.selPoints_[i%clen].canvasy)) continue; ctx.beginPath(); ctx.fillStyle = this.colors_[i%clen]; - ctx.arc(canvasx, selPoints[i%clen].canvasy, circleSize, 0, 360, false); + ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize, + 0, 360, false); ctx.fill(); } ctx.restore(); diff --git a/tests/callback.html b/tests/callback.html new file mode 100644 index 0000000..89ba63d --- /dev/null +++ b/tests/callback.html @@ -0,0 +1,52 @@ + + + callbacks + + + + + + + +

Hover, click and zoom to test the callbacks:

+ +

+ + + + -- 2.7.4