data updates working properly

diff --git a/extras/hairlines.js b/extras/hairlines.js
index e252ec6..785f028 100644 (file)
--- a/extras/hairlines.js
+++ b/extras/hairlines.js
@@ -52,7 +52,7 @@ hairlines.prototype.activate = function(g) {
     didDrawChart: this.didDrawChart,
     click: this.click,
     dblclick: this.dblclick,
-    dataWillUpdate: this.dataWillUpdate
+    dataDidUpdate: this.dataDidUpdate
   };
 };
 
@@ -160,6 +160,7 @@ hairlines.prototype.updateHairlineDivPositions = function() {
 
   $.each(this.hairlines_, function(idx, h) {
     var left = g.toDomXCoord(h.xval);
+    h.domX = left;  // See comments in this.dataDidUpdate
     $(h.lineDiv).css({
       'left': left + 'px',
       'top': layout.y + 'px',
@@ -232,29 +233,20 @@ hairlines.prototype.didDrawChart = function(e) {
   // Early out in the (common) case of zero hairlines.
   if (this.hairlines_.length === 0) return;
 
-  // See comments in this.dataWillUpdate for an explanation of this block.
-  $.each(this.hairlines_, function(idx, h) {
-    if (h.hasOwnProperty('domX')) {
-      h.xval = g.toDataXCoord(h.domX);
-      delete h.domX;
-      console.log('h.xval: ', h.xval);
-    }
-  });
-
   this.updateHairlineDivPositions();
   this.attachHairlinesToChart_();
   this.updateHairlineInfo();
 };
 
-hairlines.prototype.dataWillUpdate = function(e) {
+hairlines.prototype.dataDidUpdate = function(e) {
   // When the data in the chart updates, the hairlines should stay in the same
-  // position on the screen. To do this, we add a 'domX' parameter to each
-  // hairline when the data updates. This will get translated back into an
-  // x-value on the next call to didDrawChart.
+  // position on the screen. didDrawChart stores a domX parameter for each
+  // hairline. We use that to reposition them on data updates.
   var g = this.dygraph_;
   $.each(this.hairlines_, function(idx, h) {
-    h.domX = g.toDomXCoord(h.xval);
-    console.log('h.domX = ', h.domX, 'h.xval = ', h.xval);
+    if (h.hasOwnProperty('domX')) {
+      h.xval = g.toDataXCoord(h.domX);
+    }
   });
 };
 

diff --git a/tests/hairlines.html b/tests/hairlines.html
index 9dab065..85dafce 100644 (file)
--- a/tests/hairlines.html
+++ b/tests/hairlines.html
@@ -194,7 +194,7 @@
 
       $('#add-button').on('click', function(e) {
         var h = hairlines.get();
-        h.push({xFraction: 0.75});
+        h.push({xval: 137});
         hairlines.set(h);
       });
       $('#remove-button').on('click', function(e) {
@@ -246,13 +246,13 @@
       // Demonstration of how to use various other event listeners
       $(hairlines).on({
         'hairlineMoved': function(e, data) {
-          // console.log('hairline moved from', data.oldXFraction, ' to ', data.newXFraction);
+          // console.log('hairline moved from', data.oldXVal, ' to ', data.newXVal);
         },
         'hairlineCreated': function(e, data) {
-          console.log('hairline created at ', data.xFraction);
+          console.log('hairline created at ', data.xval);
         },
         'hairlineDeleted': function(e, data) {
-          console.log('hairline deleted at ', data.xFraction);
+          console.log('hairline deleted at ', data.xval);
         }
       });
       $(annotations).on({
@@ -260,7 +260,7 @@
           console.log('annotation created at ', data.series, data.xval);
         },
         'annotationMoved': function(e, data) {
-          console.log('annotation moved from ', data.oldXVal, ' to ', data.newXVal);
+          console.log('annotation moved from ', data.oldYFrac, ' to ', data.newYFrac);
         },
         'annotationDeleted': function(e, data) {
           console.log('annotation deleted at ', data.series, data.xval);