factor out logic for generating the html legend

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index f463e39..2f8821e 100644 (file)
--- 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 (file)
--- 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 += "<br/>";
+
+    var c = new RGBColor(this.plotter_.colors[pt.name]);
+    var yval = fmtFunc(pt.yval, displayDigits);
+    html += " <b><font color='" + c.toHex() + "'>"
+      + pt.name + "</font></b>:"
+      + 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 += "<br/>";
-        }
-        var point = this.selPoints_[i];
-        var c = new RGBColor(this.plotter_.colors[point.name]);
-        var yval = fmtFunc(point.yval, this.numYDigits_ + this.numExtraDigits_);
-        replace += " <b><font color='" + c.toHex() + "'>"
-                + point.name + "</font></b>:"
-                + 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();