Add unhighlightCallback option, with documentation.

diff --git a/docs/index.html b/docs/index.html
index 1035783..71df56b 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -775,13 +775,22 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
         <tr>
           <td><strong>highlightCallback</strong></td>
           <td><code>function(event, x, points)</code></td>
-          <td><code>null</td>
+          <td><code>null</code></td>
           <td>When set, this callback gets called every time a new point is highlighted. The parameters are the JavaScript mousemove event, the x-coordinate of the highlighted points and an array of highlighted points: <code>[ {name: 'series', yval: y-value}, &hellip; ]</code>
           <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/crosshair.html">crosshair</a> </div>
           </td>
         </tr>
 
         <tr>
+          <td><strong>unhighlightCallback</strong></td>
+          <td><code>function(event)</code></td>
+          <td><code>null</code></td>
+          <td>When set, this callback gets called every time the user stops highlighting any point by mousing out of the graph.  The parameter is the mouseout event.
+            <div class="tests">Tests: <a href="tests/callback.html">callback</a> <a href="tests/crosshair.html">crosshair</a> </div>
+          </td>
+        </tr>
+
+        <tr>
           <td><strong>strokeWidth</strong></td>
           <td><code>0.5, 2.0</code></td>
           <td><code>1.0</code></td>

diff --git a/dygraph.js b/dygraph.js
index 26a3812..1012d76 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -928,10 +928,9 @@ Dygraph.prototype.mouseMove_ = function(event) {
   }
 
   if (this.attr_("highlightCallback")) {
-    var px = this.lastHighlightCallbackX;
+    var px = this.lastx_;
     if (px !== null && lastx != px) {
       // only fire if the selected point has changed.
-      this.lastHighlightCallbackX = lastx;
       this.attr_("highlightCallback")(event, lastx, this.selPoints_);
     }
   }
@@ -1040,6 +1039,10 @@ Dygraph.prototype.setSelection = function(row) {
  * @private
  */
 Dygraph.prototype.mouseOut_ = function(event) {
+  if (this.attr_("unhighlightCallback")) {
+    this.attr_("unhighlightCallback")(event);
+  }
+
   if (this.attr_("hideOverlayOnMouseOut")) {
     this.clearSelection();
   }

diff --git a/tests/callback.html b/tests/callback.html
index 997e464..5a08409 100644 (file)
--- a/tests/callback.html
+++ b/tests/callback.html
@@ -27,6 +27,7 @@
 
     <input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
     <input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
+    <input type="checkbox" id="unhighlight" checked><label for="unhighlight">Show 'unhighlight' events</label>
     <input type="checkbox" id="showLabels" checked
     onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>
     <label for="showLabels"> Show Labels on highlight</label>
@@ -65,6 +66,12 @@
                 }
               },
 
+              unhighlightCallback: function(e) {
+                if (document.getElementById('unhighlight').checked) {
+                  s.innerHTML += "<b>Unhighlight</b><br/>";
+                }
+              },
+
               clickCallback: function(e, x, pts) {
                 s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
               },

diff --git a/tests/crosshair.html b/tests/crosshair.html
index e6c4adf..45d1616 100644 (file)
--- a/tests/crosshair.html
+++ b/tests/crosshair.html
@@ -28,16 +28,25 @@
               highlightCallback: function(e, x, pts) {
                 for (var i = 0; i < pts.length; i++) {
                   var y = pts[i].canvasy;
+                  lines[i].style.display = "";
                   lines[i].style.top = y + "px";
                   if (i == 0) xline.style.left = pts[i].canvasx + "px";
                 }
+                xline.style.display = "";
+              },
 
+              unhighlightCallback: function(e) {
+                for (var i = 0; i < 2; i++) {
+                  lines[i].style.display = "none";
+                }
+                xline.style.display = "none";
               }
             }
           );
 
       for (var i = 0; i < 2; i++) {
         var line = document.createElement("div");
+        line.style.display = "none";
         line.style.width = "100%";
         line.style.height = "1px";
         line.style.backgroundColor = "black";
@@ -47,6 +56,7 @@
       }
 
       xline = document.createElement("div");
+      xline.style.display = "none";
       xline.style.width = "1px";
       xline.style.height = "100%";
       xline.style.top = "0px";