From e9fe4a2ff545eaaf9e350c03673f825db2a5269e Mon Sep 17 00:00:00 2001 From: Dan Vanderkam Date: Tue, 8 Mar 2011 16:20:40 -0500 Subject: [PATCH] factor out logic for generating the html legend --- dygraph-canvas.js | 10 ++++----- dygraph.js | 66 +++++++++++++++++++++++++++++-------------------------- 2 files changed, 39 insertions(+), 37 deletions(-) diff --git a/dygraph-canvas.js b/dygraph-canvas.js index f463e39..2f8821e 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -739,8 +739,6 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { } // create paths - var isOK = function(x) { return x && !isNaN(x); }; - var ctx = context; if (errorBars) { if (fillGraph) { @@ -768,7 +766,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { for (var j = 0; j < this.layout.points.length; j++) { var point = this.layout.points[j]; if (point.name == setName) { - if (!isOK(point.y)) { + if (!Dygraph.isOK(point.y)) { prevX = NaN; continue; } @@ -833,7 +831,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { for (var j = 0; j < this.layout.points.length; j++) { var point = this.layout.points[j]; if (point.name == setName) { - if (!isOK(point.y)) { + if (!Dygraph.isOK(point.y)) { prevX = NaN; continue; } @@ -880,7 +878,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { for (var j = 0; j < points.length; j++) { var point = points[j]; if (point.name == setName) { - if (!isOK(point.canvasy)) { + if (!Dygraph.isOK(point.canvasy)) { if (stepPlot && prevX != null) { // Draw a horizontal line to the start of the missing data ctx.beginPath(); @@ -896,7 +894,7 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { // A point is "isolated" if it is non-null but both the previous // and next points are null. var isIsolated = (!prevX && (j == points.length - 1 || - !isOK(points[j+1].canvasy))); + !Dygraph.isOK(points[j+1].canvasy))); if (!prevX) { prevX = point.canvasx; diff --git a/dygraph.js b/dygraph.js index e343548..4f9216d 100644 --- a/dygraph.js +++ b/dygraph.js @@ -1553,6 +1553,32 @@ Dygraph.prototype.idxToRow_ = function(idx) { return -1; }; +Dygraph.isOK = function(x) { + return x && !isNaN(x); +}; + +Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) { + var displayDigits = this.numXDigits_ + this.numExtraDigits_; + var html = this.attr_('xValueFormatter')(x, displayDigits) + ":"; + + var fmtFunc = this.attr_('yValueFormatter'); + var showZeros = this.attr_("labelsShowZeroValues"); + var sepLines = this.attr_("labelsSeparateLines"); + for (var i = 0; i < this.selPoints_.length; i++) { + var pt = this.selPoints_[i]; + if (pt.yval == 0 && !showZeros) continue; + if (!Dygraph.isOK(pt.canvasy)) continue; + if (sepLines) html += "
"; + + var c = new RGBColor(this.plotter_.colors[pt.name]); + var yval = fmtFunc(pt.yval, displayDigits); + html += " " + + pt.name + ":" + + yval; + } + return html; +}; + /** * Draw dots over the selectied points in the data series. This function * takes care of cleanup of previously-drawn dots. @@ -1574,46 +1600,24 @@ Dygraph.prototype.updateSelection_ = function() { 2 * maxCircleSize + 2, this.height_); } - var isOK = function(x) { return x && !isNaN(x); }; - 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')( - this.lastx_, this.numXDigits_ + this.numExtraDigits_) + ":"; - var fmtFunc = this.attr_('yValueFormatter'); - var clen = this.colors_.length; - if (this.attr_('showLabelsOnHighlight')) { - // Set the status message to indicate the selected point(s) - for (var i = 0; i < this.selPoints_.length; i++) { - if (!this.attr_("labelsShowZeroValues") && this.selPoints_[i].yval == 0) continue; - if (!isOK(this.selPoints_[i].canvasy)) continue; - if (this.attr_("labelsSeparateLines")) { - replace += "
"; - } - var point = this.selPoints_[i]; - var c = new RGBColor(this.plotter_.colors[point.name]); - var yval = fmtFunc(point.yval, this.numYDigits_ + this.numExtraDigits_); - replace += " " - + point.name + ":" - + yval; - } - - this.attr_("labelsDiv").innerHTML = replace; + var html = this.generateLegendHTML_(this.lastx_, this.selPoints_); + this.attr_("labelsDiv").innerHTML = html; } // Draw colored circles over the center of each selected point + var canvasx = this.selPoints_[0].canvasx; ctx.save(); for (var i = 0; i < this.selPoints_.length; i++) { - if (!isOK(this.selPoints_[i].canvasy)) continue; - var circleSize = - this.attr_('highlightCircleSize', this.selPoints_[i].name); + var pt = this.selPoints_[i]; + if (!Dygraph.isOK(pt.canvasy)) continue; + + var circleSize = this.attr_('highlightCircleSize', pt.name); ctx.beginPath(); - ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name]; - ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize, - 0, 2 * Math.PI, false); + ctx.fillStyle = this.plotter_.colors[pt.name]; + ctx.arc(canvasx, pt.canvasy, circleSize, 0, 2 * Math.PI, false); ctx.fill(); } ctx.restore(); -- 2.7.4