X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=3eaa18e7e412478834aa5deb76ea445ec043985e;hb=50360fd082e74dd47cdc95b96892fef7f2067ce9;hp=2c4b14e63e95622df2c1a2b4d007bc24ae88aa72;hpb=5e50289f13c7cb60ae5a15daba20c29ac6f8f38d;p=dygraphs.git

diff --git a/dygraph.js b/dygraph.js
index 2c4b14e..3eaa18e 100644
--- a/dygraph.js
+++ b/dygraph.js
@@ -92,6 +92,9 @@ Dygraph.DEFAULT_ATTRS = {
   labelsSeparateLines: false,
   labelsKMB: false,
   labelsKMG2: false,
+  showLabelsOnHighlight: true,
+
+  yValueFormatter: null,
 
   strokeWidth: 1.0,
 
@@ -116,6 +119,7 @@ Dygraph.DEFAULT_ATTRS = {
   customBars: false,
   fillGraph: false,
   fillAlpha: 0.15,
+  connectSeparatedPoints: false,
 
   stackedGraph: false,
   hideOverlayOnMouseOut: true
@@ -143,8 +147,8 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
  * Initializes the Dygraph. This creates a new DIV and constructs the PlotKit
  * and interaction <canvas> inside of it. See the constructor for details
  * on the parameters.
+ * @param {Element} div the Element to render the graph into.
  * @param {String | Function} file Source data
- * @param {Array.<String>} labels Names of the data series
  * @param {Object} attrs Miscellaneous other options
  * @private
  */
@@ -208,7 +212,7 @@ Dygraph.prototype.__init__ = function(div, file, attrs) {
 
   this.attrs_ = {};
   Dygraph.update(this.attrs_, Dygraph.DEFAULT_ATTRS);
-  
+
   this.boundaryIds_ = [];
 
   // Make a note of whether labels will be pulled from the CSV file.
@@ -560,7 +564,7 @@ Dygraph.prototype.getColors = function() {
 Dygraph.findPosX = function(obj) {
   var curleft = 0;
   if(obj.offsetParent)
-    while(1) 
+    while(1)
     {
       curleft += obj.offsetLeft;
       if(!obj.offsetParent)
@@ -885,7 +889,7 @@ Dygraph.prototype.mouseMove_ = function(event) {
   var idx = -1;
   for (var i = 0; i < points.length; i++) {
     var dist = Math.abs(points[i].canvasx - canvasx);
-    if (dist > minDist) break;
+    if (dist > minDist) continue;
     minDist = dist;
     idx = i;
   }
@@ -896,9 +900,22 @@ Dygraph.prototype.mouseMove_ = function(event) {
 
   // Extract the points we've selected
   this.selPoints_ = [];
-  for (var i = 0; i < points.length; i++) {
+  var cumulative_sum = 0;  // used only if we have a stackedGraph.
+  var l = points.length;
+  for (var i = 0; i < l; i++) {
     if (points[i].xval == lastx) {
-      this.selPoints_.push(points[i]);
+      if (!this.attr_("stackedGraph")) {
+        this.selPoints_.push(points[i]);
+      } else {
+        // Clone the point, since we need to 'unstack' it below. Stacked points
+        // are in reverse order.
+        var p = {};
+        for (var k in points[l - i - 1]) {
+          p[k] = points[l - i -1][k];
+        }
+        p.yval -= cumulative_sum;
+        cumulative_sum += p.yval;
+      }
     }
   }
 
@@ -907,25 +924,13 @@ Dygraph.prototype.mouseMove_ = function(event) {
     if (px !== null && lastx != px) {
       // only fire if the selected point has changed.
       this.lastHighlightCallbackX = lastx;
-      if (!this.attr_("stackedGraph")) {
-        this.attr_("highlightCallback")(event, lastx, this.selPoints_);
-      } else {
-        // "unstack" the points.
-        var callbackPoints = this.selPoints_.map(
-            function(p) { return {xval: p.xval, yval: p.yval, name: p.name} });
-        var cumulative_sum = 0;
-        for (var j = callbackPoints.length - 1; j >= 0; j--) {
-          callbackPoints[j].yval -= cumulative_sum;
-          cumulative_sum += callbackPoints[j].yval;
-        }
-        this.attr_("highlightCallback")(event, lastx, callbackPoints);
-      }
+      this.attr_("highlightCallback")(event, lastx, this.selPoints_);
     }
   }
 
   // Save last x position for callbacks.
   this.lastx_ = lastx;
-  
+
   this.updateSelection_();
 };
 
@@ -950,27 +955,34 @@ Dygraph.prototype.updateSelection_ = function() {
 
     // Set the status message to indicate the selected point(s)
     var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":";
+    var fmtFunc = this.attr_('yValueFormatter');
     var clen = this.colors_.length;
-    for (var i = 0; i < this.selPoints_.length; i++) {
-      if (!isOK(this.selPoints_[i].canvasy)) continue;
-      if (this.attr_("labelsSeparateLines")) {
-        replace += "<br/>";
+
+    if (this.attr_('showLabelsOnHighlight')) {
+      // Set the status message to indicate the selected point(s)
+      for (var i = 0; i < this.selPoints_.length; i++) {
+        if (!isOK(this.selPoints_[i].canvasy)) continue;
+        if (this.attr_("labelsSeparateLines")) {
+          replace += "<br/>";
+        }
+        var point = this.selPoints_[i];
+        var c = new RGBColor(this.colors_[i%clen]);
+        var yval = fmtFunc ? fmtFunc(point.yval) : this.round_(point.yval, 2);
+        replace += " <b><font color='" + c.toHex() + "'>"
+                + point.name + "</font></b>:"
+                + yval;
       }
-      var point = this.selPoints_[i];
-      var c = new RGBColor(this.colors_[i%clen]);
-      replace += " <b><font color='" + c.toHex() + "'>"
-              + point.name + "</font></b>:"
-              + this.round_(point.yval, 2);
+
+      this.attr_("labelsDiv").innerHTML = replace;
     }
-    this.attr_("labelsDiv").innerHTML = replace;
 
     // Draw colored circles over the center of each selected point
     ctx.save();
     for (var i = 0; i < this.selPoints_.length; i++) {
-      if (!isOK(this.selPoints_[i%clen].canvasy)) continue;
+      if (!isOK(this.selPoints_[i].canvasy)) continue;
       ctx.beginPath();
-      ctx.fillStyle = this.colors_[i%clen];
-      ctx.arc(canvasx, this.selPoints_[i%clen].canvasy, circleSize,
+      ctx.fillStyle = this.plotter_.colors[this.selPoints_[i].name];
+      ctx.arc(canvasx, this.selPoints_[i].canvasy, circleSize,
               0, 2 * Math.PI, false);
       ctx.fill();
     }
@@ -990,11 +1002,11 @@ Dygraph.prototype.setSelection = function(row) {
   // Extract the points we've selected
   this.selPoints_ = [];
   var pos = 0;
-  
+
   if (row !== false) {
     row = row-this.boundaryIds_[0][0];
   }
-  
+
   if (row !== false && row >= 0) {
     for (var i in this.layout_.datasets) {
       if (row < this.layout_.datasets[i].length) {
@@ -1003,7 +1015,7 @@ Dygraph.prototype.setSelection = function(row) {
       pos += this.layout_.datasets[i].length;
     }
   }
-  
+
   if (this.selPoints_.length) {
     this.lastx_ = this.selPoints_[0].xval;
     this.updateSelection_();
@@ -1047,7 +1059,7 @@ Dygraph.prototype.getSelection = function() {
   if (!this.selPoints_ || this.selPoints_.length < 1) {
     return -1;
   }
-  
+
   for (var row=0; row<this.layout_.points.length; row++ ) {
     if (this.layout_.points[row].x == this.selPoints_[0].x) {
       return row + this.boundaryIds_[0][0];
@@ -1474,6 +1486,8 @@ Dygraph.prototype.drawGraph_ = function(data) {
   this.setColors_();
   this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize');
 
+  var connectSeparatedPoints = this.attr_('connectSeparatedPoints');
+
   // For stacked series.
   var cumulative_y = [];
   var stacked_datasets = [];
@@ -1484,8 +1498,10 @@ Dygraph.prototype.drawGraph_ = function(data) {
 
     var series = [];
     for (var j = 0; j < data.length; j++) {
-      var date = data[j][0];
-      series[j] = [date, data[j][i]];
+      if (data[j][i] || !connectSeparatedPoints) {
+        var date = data[j][0];
+        series.push([date, data[j][i]]);
+      }
     }
     series = this.rollingAverage(series, this.rollPeriod_);
 
@@ -2260,8 +2276,7 @@ Dygraph.GVizChart.prototype.draw = function(data, options) {
 
 /**
  * Google charts compatible setSelection
- * Only row selection is supported, all points in the 
- * row will be highlighted
+ * Only row selection is supported, all points in the row will be highlighted
  * @param {Array} array of the selected cells
  * @public
  */
@@ -2280,11 +2295,11 @@ Dygraph.GVizChart.prototype.setSelection = function(selection_array) {
  */
 Dygraph.GVizChart.prototype.getSelection = function() {
   var selection = [];
-  
+
   var row = this.date_graph.getSelection();
-  
+
   if (row < 0) return selection;
-  
+
   col = 1;
   for (var i in this.date_graph.layout_.datasets) {
     selection.push({row: row, column: col});