Fixed y-value display in highlight labels when using setSelection

diff --git a/dygraph.js b/dygraph.js
index edc3eea..9a94fcf 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -1070,6 +1070,36 @@ Dygraph.prototype.updateSelection_ = function() {
 };
 
 /**
+ * Return a copy of the point at the indicated index, with its yval unstacked.
+ * @param int index of point in this.layout_.points
+ * @private
+ */
+Dygraph.prototype.unstackPointAtIndex_ = function(idx) {
+  var point = this.layout_.points[idx];
+  
+  // Clone the point since we modify it
+  var unstackedPoint = {};  
+  for (var i in point) {
+    unstackedPoint[i] = point[i];
+  }
+  
+  if (!this.attr_("stackedGraph")) {
+    return unstackedPoint;
+  }
+  
+  // The unstacked yval is equal to the current yval minus the yval of the 
+  // next point at the same xval.
+  for (var i = idx+1; i < this.layout_.points.length; i++) {
+    if (this.layout_.points[i].xval == point.xval) {
+      unstackedPoint.yval -= this.layout_.points[i].yval; 
+      break;
+    }
+  }
+  
+  return unstackedPoint;
+}  
+
+/**
  * Set manually set selected dots, and display information about them
  * @param int row number that should by highlighted
  *            false value clears the selection
@@ -1087,7 +1117,13 @@ Dygraph.prototype.setSelection = function(row) {
   if (row !== false && row >= 0) {
     for (var i in this.layout_.datasets) {
       if (row < this.layout_.datasets[i].length) {
-        this.selPoints_.push(this.layout_.points[pos+row]);
+        var point = this.layout_.points[pos+row];
+        
+        if (this.attr_("stackedGraph")) {
+          point = this.unstackPointAtIndex_(pos+row);
+        }
+        
+        this.selPoints_.push(point);
       }
       pos += this.layout_.datasets[i].length;
     }

diff --git a/tests/stacked.html b/tests/stacked.html
index 8973347..368d2e3 100644 (file)
--- a/tests/stacked.html
+++ b/tests/stacked.html
@@ -20,18 +20,42 @@
     <div id="stacked_missing_div"></div>
     <p>Stacked graph with many series:</p>
     <div id="stacked_many_div"></div>
+    <p>Change selection/highlighting on all graphs:</p>
+    <div id="graph_selection_div">
+        <select onchange="javascript:setSelection(this.options[this.selectedIndex].value);">
+            <option value="" selected></option>
+            <option value="0">0</option>
+            <option value="10">10</option>
+            <option value="20">20</option>
+            <option value="30">30</option>
+            <option value="40">40</option>
+            <option value="50">50</option>
+            <option value="60">60</option>
+            <option value="70">70</option>
+            <option value="80">80</option>
+            <option value="90">90</option>
+            <option value="99">99</option>
+        </select>
+    </div>
 
     <script type="text/javascript">
       data = "X,x,100-x\n";
       for (var i = 0; i < 100; i++) {
         data += i + "," + i + "," + (100 - i) + "\n";
       }
+      
+      var graphs = [];
 
-      new Dygraph(document.getElementById("simple_div"),
-                  data);
-      new Dygraph(document.getElementById("stacked_div"),
-                  data,
-                  { stackedGraph: true });
+      graphs.push(
+          new Dygraph(
+              document.getElementById("simple_div"),
+              data));
+          
+      graphs.push(
+          new Dygraph(
+              document.getElementById("stacked_div"),
+              data,
+              { stackedGraph: true }));
 
       missing_data = "X,x,100-x\n";
       for (var i = 0; i < 100; i++) {
@@ -44,11 +68,16 @@
         }
       }
 
-      new Dygraph(document.getElementById("simple_missing_div"),
-                  missing_data);
-      new Dygraph(document.getElementById("stacked_missing_div"),
-                  missing_data,
-                  { stackedGraph: true });
+      graphs.push(
+          new Dygraph(
+              document.getElementById("simple_missing_div"),
+              missing_data));
+      
+      graphs.push(
+          new Dygraph(
+              document.getElementById("stacked_missing_div"),
+              missing_data,
+              { stackedGraph: true }));
 
       many_data = "X,a,b,c,d,e,100-a,100-b,100-c,100-d,100-e\n";
       for (var i = 0; i < 100; i++) {
@@ -58,9 +87,17 @@
         many_data += "\n";
       }
 
-      new Dygraph(document.getElementById("stacked_many_div"),
-                  many_data,
-                  { stackedGraph: true });
+      graphs.push(
+          new Dygraph(
+              document.getElementById("stacked_many_div"),
+              many_data,
+              { stackedGraph: true }));
+      
+      function setSelection(row) {
+        for (var i = 0; i < graphs.length; i++) {
+          graphs[i].setSelection(row ? row : false);
+        }
+      }
     </script>
   </body>
 </html>