dygraph-range-selector.js

   1 // Copyright 2011 Paul Felix (paul.eric.felix@gmail.com)
   2 // All Rights Reserved.
   3
   4 /**
   5  * @fileoverview This file contains the DygraphRangeSelector class used to provide
   6  * a timeline range selector widget for dygraphs.
   7  */
   8
   9 /*jshint globalstrict: true */
  10 /*global Dygraph:false */
  11 "use strict";
  12
  13 /**
  14  * The DygraphRangeSelector class provides a timeline range selector widget.
  15  * @param {Dygraph} dygraph The dygraph object
  16  * @constructor
  17  */
  18 var DygraphRangeSelector = function(dygraph) {
  19   this.isIE_ = /MSIE/.test(navigator.userAgent) && !window.opera;
  20   this.isUsingExcanvas_ = dygraph.isUsingExcanvas_;
  21   this.dygraph_ = dygraph;
  22   this.createCanvases_();
  23   if (this.isUsingExcanvas_) {
  24     this.createIEPanOverlay_();
  25   }
  26   this.createZoomHandles_();
  27   this.initInteraction_();
  28 };
  29
  30 /**
  31  * Adds the range selector to the dygraph.
  32  * @param {Object} graphDiv The container div for the range selector.
  33  * @param {DygraphLayout} layout The DygraphLayout object for this graph.
  34  */
  35 DygraphRangeSelector.prototype.addToGraph = function(graphDiv, layout) {
  36   this.layout_ = layout;
  37   this.resize_();
  38   graphDiv.appendChild(this.bgcanvas_);
  39   graphDiv.appendChild(this.fgcanvas_);
  40   graphDiv.appendChild(this.leftZoomHandle_);
  41   graphDiv.appendChild(this.rightZoomHandle_);
  42 };
  43
  44 /**
  45  * Renders the static background portion of the range selector.
  46  */
  47 DygraphRangeSelector.prototype.renderStaticLayer = function() {
  48   this.resize_();
  49   this.drawStaticLayer_();
  50 };
  51
  52 /**
  53  * Renders the interactive foreground portion of the range selector.
  54  */
  55 DygraphRangeSelector.prototype.renderInteractiveLayer = function() {
  56   if (this.isChangingRange_) {
  57     return;
  58   }
  59   this.placeZoomHandles_();
  60   this.drawInteractiveLayer_();
  61 };
  62
  63 /**
  64  * @private
  65  * Resizes the range selector.
  66  */
  67 DygraphRangeSelector.prototype.resize_ = function() {
  68   function setElementRect(canvas, rect) {
  69     canvas.style.top = rect.y + 'px';
  70     canvas.style.left = rect.x + 'px';
  71     canvas.width = rect.w;
  72     canvas.height = rect.h;
  73     canvas.style.width = canvas.width + 'px';    // for IE
  74     canvas.style.height = canvas.height + 'px';  // for IE
  75   }
  76
  77   var plotArea = this.layout_.getPlotArea();
  78   var xAxisLabelHeight = this.attr_('axisLabelFontSize') + 2 * this.attr_('axisTickSize');
  79   this.canvasRect_ = {
  80     x: plotArea.x,
  81     y: plotArea.y + plotArea.h + xAxisLabelHeight + 4,
  82     w: plotArea.w,
  83     h: this.attr_('rangeSelectorHeight')
  84   };
  85
  86   setElementRect(this.bgcanvas_, this.canvasRect_);
  87   setElementRect(this.fgcanvas_, this.canvasRect_);
  88 };
  89
  90 DygraphRangeSelector.prototype.attr_ = function(name) {
  91   return this.dygraph_.attr_(name);
  92 };
  93
  94 /**
  95  * @private
  96  * Creates the background and foreground canvases.
  97  */
  98 DygraphRangeSelector.prototype.createCanvases_ = function() {
  99   this.bgcanvas_ = Dygraph.createCanvas();
 100   this.bgcanvas_.className = 'dygraph-rangesel-bgcanvas';
 101   this.bgcanvas_.style.position = 'absolute';
 102   this.bgcanvas_.style.zIndex = 9;
 103   this.bgcanvas_ctx_ = Dygraph.getContext(this.bgcanvas_);
 104
 105   this.fgcanvas_ = Dygraph.createCanvas();
 106   this.fgcanvas_.className = 'dygraph-rangesel-fgcanvas';
 107   this.fgcanvas_.style.position = 'absolute';
 108   this.fgcanvas_.style.zIndex = 9;
 109   this.fgcanvas_.style.cursor = 'default';
 110   this.fgcanvas_ctx_ = Dygraph.getContext(this.fgcanvas_);
 111 };
 112
 113 /**
 114  * @private
 115  * Creates overlay divs for IE/Excanvas so that mouse events are handled properly.
 116  */
 117 DygraphRangeSelector.prototype.createIEPanOverlay_ = function() {
 118   this.iePanOverlay_ = document.createElement("div");
 119   this.iePanOverlay_.style.position = 'absolute';
 120   this.iePanOverlay_.style.backgroundColor = 'white';
 121   this.iePanOverlay_.style.filter = 'alpha(opacity=0)';
 122   this.iePanOverlay_.style.display = 'none';
 123   this.iePanOverlay_.style.cursor = 'move';
 124   this.fgcanvas_.appendChild(this.iePanOverlay_);
 125 };
 126
 127 /**
 128  * @private
 129  * Creates the zoom handle elements.
 130  */
 131 DygraphRangeSelector.prototype.createZoomHandles_ = function() {
 132   var img = new Image();
 133   img.className = 'dygraph-rangesel-zoomhandle';
 134   img.style.position = 'absolute';
 135   img.style.zIndex = 10;
 136   img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place.
 137   img.style.cursor = 'col-resize';
 138   if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data.
 139       img.width = 7;
 140       img.height = 14;
 141       img.style.backgroundColor = 'white';
 142       img.style.border = '1px solid #333333'; // Just show box in IE7.
 143   } else {
 144       img.width = 9;
 145       img.height = 16;
 146       img.src = 'data:image/png;base64,' +
 147 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' +
 148 'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' +
 149 'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' +
 150 '6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' +
 151 'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=';
 152   }
 153
 154   this.leftZoomHandle_ = img;
 155   this.rightZoomHandle_ = img.cloneNode(false);
 156 };
 157
 158 /**
 159  * @private
 160  * Sets up the interaction for the range selector.
 161  */
 162 DygraphRangeSelector.prototype.initInteraction_ = function() {
 163   var self = this;
 164   var topElem = this.isIE_ ? document : window;
 165   var xLast = 0;
 166   var handle = null;
 167   var isZooming = false;
 168   var isPanning = false;
 169
 170   // functions, defined below.  Defining them this way (rather than with
 171   // "function foo() {...}" makes JSHint happy.
 172   var toXDataWindow, onZoomStart, onZoom, onZoomEnd, doZoom, isMouseInPanZone,
 173       onPanStart, onPan, onPanEnd, doPan, onCanvasMouseMove;
 174
 175   toXDataWindow = function(zoomHandleStatus) {
 176     var xDataLimits = self.dygraph_.xAxisExtremes();
 177     var fact = (xDataLimits[1] - xDataLimits[0])/self.canvasRect_.w;
 178     var xDataMin = xDataLimits[0] + (zoomHandleStatus.leftHandlePos - self.canvasRect_.x)*fact;
 179     var xDataMax = xDataLimits[0] + (zoomHandleStatus.rightHandlePos - self.canvasRect_.x)*fact;
 180     return [xDataMin, xDataMax];
 181   };
 182
 183   onZoomStart = function(e) {
 184     Dygraph.cancelEvent(e);
 185     isZooming = true;
 186     xLast = e.screenX;
 187     handle = e.target ? e.target : e.srcElement;
 188     Dygraph.addEvent(topElem, 'mousemove', onZoom);
 189     Dygraph.addEvent(topElem, 'mouseup', onZoomEnd);
 190     self.fgcanvas_.style.cursor = 'col-resize';
 191   };
 192
 193   onZoom = function(e) {
 194     if (!isZooming) {
 195       return;
 196     }
 197     var delX = e.screenX - xLast;
 198     if (Math.abs(delX) < 4) {
 199       return;
 200     }
 201     xLast = e.screenX;
 202     var zoomHandleStatus = self.getZoomHandleStatus_();
 203     var newPos;
 204     if (handle == self.leftZoomHandle_) {
 205       newPos = zoomHandleStatus.leftHandlePos + delX;
 206       newPos = Math.min(newPos, zoomHandleStatus.rightHandlePos - handle.width - 3);
 207       newPos = Math.max(newPos, self.canvasRect_.x);
 208     } else {
 209       newPos = zoomHandleStatus.rightHandlePos + delX;
 210       newPos = Math.min(newPos, self.canvasRect_.x + self.canvasRect_.w);
 211       newPos = Math.max(newPos, zoomHandleStatus.leftHandlePos + handle.width + 3);
 212     }
 213     var halfHandleWidth = handle.width/2;
 214     handle.style.left = (newPos - halfHandleWidth) + 'px';
 215     self.drawInteractiveLayer_();
 216
 217     // Zoom on the fly (if not using excanvas).
 218     if (!self.isUsingExcanvas_) {
 219       doZoom();
 220     }
 221   };
 222
 223   onZoomEnd = function(e) {
 224     if (!isZooming) {
 225       return;
 226     }
 227     isZooming = false;
 228     Dygraph.removeEvent(topElem, 'mousemove', onZoom);
 229     Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd);
 230     self.fgcanvas_.style.cursor = 'default';
 231
 232     // If using excanvas, Zoom now.
 233     if (self.isUsingExcanvas_) {
 234       doZoom();
 235     }
 236   };
 237
 238   doZoom = function() {
 239     try {
 240       var zoomHandleStatus = self.getZoomHandleStatus_();
 241       self.isChangingRange_ = true;
 242       if (!zoomHandleStatus.isZoomed) {
 243         self.dygraph_.doUnzoom_();
 244       } else {
 245         var xDataWindow = toXDataWindow(zoomHandleStatus);
 246         self.dygraph_.doZoomXDates_(xDataWindow[0], xDataWindow[1]);
 247       }
 248     } finally {
 249       self.isChangingRange_ = false;
 250     }
 251   };
 252
 253   isMouseInPanZone = function(e) {
 254     if (self.isUsingExcanvas_) {
 255         return e.srcElement == self.iePanOverlay_;
 256     } else {
 257       // Getting clientX directly from the event is not accurate enough :(
 258       var clientX = self.canvasRect_.x + (e.layerX !== undefined ? e.layerX : e.offsetX);
 259       var zoomHandleStatus = self.getZoomHandleStatus_();
 260       return (clientX > zoomHandleStatus.leftHandlePos && clientX < zoomHandleStatus.rightHandlePos);
 261     }
 262   };
 263
 264   onPanStart = function(e) {
 265     if (!isPanning && isMouseInPanZone(e) && self.getZoomHandleStatus_().isZoomed) {
 266       Dygraph.cancelEvent(e);
 267       isPanning = true;
 268       xLast = e.screenX;
 269       Dygraph.addEvent(topElem, 'mousemove', onPan);
 270       Dygraph.addEvent(topElem, 'mouseup', onPanEnd);
 271     }
 272   };
 273
 274   onPan = function(e) {
 275     if (!isPanning) {
 276       return;
 277     }
 278     Dygraph.cancelEvent(e);
 279
 280     var delX = e.screenX - xLast;
 281     if (Math.abs(delX) < 4) {
 282       return;
 283     }
 284     xLast = e.screenX;
 285
 286     // Move range view
 287     var zoomHandleStatus = self.getZoomHandleStatus_();
 288     var leftHandlePos = zoomHandleStatus.leftHandlePos;
 289     var rightHandlePos = zoomHandleStatus.rightHandlePos;
 290     var rangeSize = rightHandlePos - leftHandlePos;
 291     if (leftHandlePos + delX <= self.canvasRect_.x) {
 292       leftHandlePos = self.canvasRect_.x;
 293       rightHandlePos = leftHandlePos + rangeSize;
 294     } else if (rightHandlePos + delX >= self.canvasRect_.x + self.canvasRect_.w) {
 295       rightHandlePos = self.canvasRect_.x + self.canvasRect_.w;
 296       leftHandlePos = rightHandlePos - rangeSize;
 297     } else {
 298       leftHandlePos += delX;
 299       rightHandlePos += delX;
 300     }
 301     var halfHandleWidth = self.leftZoomHandle_.width/2;
 302     self.leftZoomHandle_.style.left = (leftHandlePos - halfHandleWidth) + 'px';
 303     self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px';
 304     self.drawInteractiveLayer_();
 305
 306     // Do pan on the fly (if not using excanvas).
 307     if (!self.isUsingExcanvas_) {
 308       doPan();
 309     }
 310   };
 311
 312   onPanEnd = function(e) {
 313     if (!isPanning) {
 314       return;
 315     }
 316     isPanning = false;
 317     Dygraph.removeEvent(topElem, 'mousemove', onPan);
 318     Dygraph.removeEvent(topElem, 'mouseup', onPanEnd);
 319     // If using excanvas, do pan now.
 320     if (self.isUsingExcanvas_) {
 321       doPan();
 322     }
 323   };
 324
 325   doPan = function() {
 326     try {
 327       self.isChangingRange_ = true;
 328       self.dygraph_.dateWindow_ = toXDataWindow(self.getZoomHandleStatus_());
 329       self.dygraph_.drawGraph_(false);
 330     } finally {
 331       self.isChangingRange_ = false;
 332     }
 333   };
 334
 335   onCanvasMouseMove = function(e) {
 336     if (isZooming || isPanning) {
 337       return;
 338     }
 339     var cursor = isMouseInPanZone(e) ? 'move' : 'default';
 340     if (cursor != self.fgcanvas_.style.cursor) {
 341       self.fgcanvas_.style.cursor = cursor;
 342     }
 343   };
 344
 345   var interactionModel = {
 346     mousedown: function(event, g, context) {
 347       context.initializeMouseDown(event, g, context);
 348       Dygraph.startPan(event, g, context);
 349     },
 350     mousemove: function(event, g, context) {
 351       if (context.isPanning) {
 352         Dygraph.movePan(event, g, context);
 353       }
 354     },
 355     mouseup: function(event, g, context) {
 356       if (context.isPanning) {
 357         Dygraph.endPan(event, g, context);
 358       }
 359     }
 360   };
 361
 362   this.dygraph_.attrs_.interactionModel = interactionModel;
 363   this.dygraph_.attrs_.panEdgeFraction = 0.0001;
 364
 365   var dragStartEvent = window.opera ? 'mousedown' : 'dragstart';
 366   Dygraph.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart);
 367   Dygraph.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart);
 368
 369   if (this.isUsingExcanvas_) {
 370     Dygraph.addEvent(this.iePanOverlay_, 'mousedown', onPanStart);
 371   } else {
 372     Dygraph.addEvent(this.fgcanvas_, 'mousedown', onPanStart);
 373     Dygraph.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove);
 374   }
 375 };
 376
 377 /**
 378  * @private
 379  * Draws the static layer in the background canvas.
 380  */
 381 DygraphRangeSelector.prototype.drawStaticLayer_ = function() {
 382   var ctx = this.bgcanvas_ctx_;
 383   ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h);
 384   try {
 385     this.drawMiniPlot_();
 386   } catch(ex) {
 387     Dygraph.warn(ex);
 388   }
 389
 390   var margin = 0.5;
 391   this.bgcanvas_ctx_.lineWidth = 1;
 392   ctx.strokeStyle = 'gray';
 393   ctx.beginPath();
 394   ctx.moveTo(margin, margin);
 395   ctx.lineTo(margin, this.canvasRect_.h-margin);
 396   ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin);
 397   ctx.lineTo(this.canvasRect_.w-margin, margin);
 398   ctx.stroke();
 399 };
 400
 401
 402 /**
 403  * @private
 404  * Draws the mini plot in the background canvas.
 405  */
 406 DygraphRangeSelector.prototype.drawMiniPlot_ = function() {
 407   var fillStyle = this.attr_('rangeSelectorPlotFillColor');
 408   var strokeStyle = this.attr_('rangeSelectorPlotStrokeColor');
 409   if (!fillStyle && !strokeStyle) {
 410     return;
 411   }
 412
 413   var combinedSeriesData = this.computeCombinedSeriesAndLimits_();
 414   var yRange = combinedSeriesData.yMax - combinedSeriesData.yMin;
 415
 416   // Draw the mini plot.
 417   var ctx = this.bgcanvas_ctx_;
 418   var margin = 0.5;
 419
 420   var xExtremes = this.dygraph_.xAxisExtremes();
 421   var xRange = Math.max(xExtremes[1] - xExtremes[0], 1.e-30);
 422   var xFact = (this.canvasRect_.w - margin)/xRange;
 423   var yFact = (this.canvasRect_.h - margin)/yRange;
 424   var canvasWidth = this.canvasRect_.w - margin;
 425   var canvasHeight = this.canvasRect_.h - margin;
 426
 427   ctx.beginPath();
 428   ctx.moveTo(margin, canvasHeight);
 429   for (var i = 0; i < combinedSeriesData.data.length; i++) {
 430     var dataPoint = combinedSeriesData.data[i];
 431     var x = (dataPoint[0] - xExtremes[0])*xFact;
 432     var y = canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact;
 433     if (isFinite(x) && isFinite(y)) {
 434       ctx.lineTo(x, y);
 435     }
 436   }
 437   ctx.lineTo(canvasWidth, canvasHeight);
 438   ctx.closePath();
 439
 440   if (fillStyle) {
 441     var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
 442     lingrad.addColorStop(0, 'white');
 443     lingrad.addColorStop(1, fillStyle);
 444     this.bgcanvas_ctx_.fillStyle = lingrad;
 445     ctx.fill();
 446   }
 447
 448   if (strokeStyle) {
 449     this.bgcanvas_ctx_.strokeStyle = strokeStyle;
 450     this.bgcanvas_ctx_.lineWidth = 1.5;
 451     ctx.stroke();
 452   }
 453 };
 454
 455 /**
 456  * @private
 457  * Computes and returns the combinded series data along with min/max for the mini plot.
 458  * @return {Object} An object containing combinded series array, ymin, ymax.
 459  */
 460 DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() {
 461   var data = this.dygraph_.rawData_;
 462   var logscale = this.attr_('logscale');
 463
 464   // Create a combined series (average of all series values).
 465   var combinedSeries = [];
 466   var sum;
 467   var count;
 468   var yVal, y;
 469   var mutipleValues;
 470   var i, j, k;
 471
 472   // Find out if data has multiple values per datapoint.
 473   // Go to first data point that actually has values (see http://code.google.com/p/dygraphs/issues/detail?id=246)
 474   for (i = 0; i < data.length; i++) {
 475     if (data[i].length > 1 && data[i][1] != null) {
 476       mutipleValues = typeof data[i][1] != 'number';
 477       if (mutipleValues) {
 478         sum = [];
 479         count = [];
 480         for (k = 0; k < data[0][1].length; k++) {
 481           sum.push(0);
 482           count.push(0);
 483         }
 484       }
 485       break;
 486     }
 487   }
 488
 489   for (i = 0; i < data.length; i++) {
 490     var dataPoint = data[i];
 491     var xVal = dataPoint[0];
 492
 493     if (mutipleValues) {
 494       for (k = 0; k < sum.length; k++) {
 495         sum[k] = count[k] = 0;
 496       }
 497     } else {
 498       sum = count = 0;
 499     }
 500
 501     for (j = 1; j < dataPoint.length; j++) {
 502       if (this.dygraph_.visibility()[j-1]) {
 503         if (mutipleValues) {
 504           for (k = 0; k < sum.length; k++) {
 505             y = dataPoint[j][k];
 506             if (y === null || isNaN(y)) continue;
 507             sum[k] += y;
 508             count[k]++;
 509           }
 510         } else {
 511           y = dataPoint[j];
 512           if (y === null || isNaN(y)) continue;
 513           sum += y;
 514           count++;
 515         }
 516       }
 517     }
 518
 519     if (mutipleValues) {
 520       for (k = 0; k < sum.length; k++) {
 521         sum[k] /= count[k];
 522       }
 523       yVal = sum.slice(0);
 524     } else {
 525       yVal = sum/count;
 526     }
 527
 528     combinedSeries.push([xVal, yVal]);
 529   }
 530
 531   // Account for roll period, fractions.
 532   combinedSeries = this.dygraph_.rollingAverage(combinedSeries, this.dygraph_.rollPeriod_);
 533
 534   if (typeof combinedSeries[0][1] != 'number') {
 535     for (i = 0; i < combinedSeries.length; i++) {
 536       yVal = combinedSeries[i][1];
 537       combinedSeries[i][1] = yVal[0];
 538     }
 539   }
 540
 541   // Compute the y range.
 542   var yMin = Number.MAX_VALUE;
 543   var yMax = -Number.MAX_VALUE;
 544   for (i = 0; i < combinedSeries.length; i++) {
 545     yVal = combinedSeries[i][1];
 546     if (yVal !== null && isFinite(yVal) && (!logscale || yVal > 0)) {
 547       yMin = Math.min(yMin, yVal);
 548       yMax = Math.max(yMax, yVal);
 549     }
 550   }
 551
 552   // Convert Y data to log scale if needed.
 553   // Also, expand the Y range to compress the mini plot a little.
 554   var extraPercent = 0.25;
 555   if (logscale) {
 556     yMax = Dygraph.log10(yMax);
 557     yMax += yMax*extraPercent;
 558     yMin = Dygraph.log10(yMin);
 559     for (i = 0; i < combinedSeries.length; i++) {
 560       combinedSeries[i][1] = Dygraph.log10(combinedSeries[i][1]);
 561     }
 562   } else {
 563     var yExtra;
 564     var yRange = yMax - yMin;
 565     if (yRange <= Number.MIN_VALUE) {
 566       yExtra = yMax*extraPercent;
 567     } else {
 568       yExtra = yRange*extraPercent;
 569     }
 570     yMax += yExtra;
 571     yMin -= yExtra;
 572   }
 573
 574   return {data: combinedSeries, yMin: yMin, yMax: yMax};
 575 };
 576
 577 /**
 578  * @private
 579  * Places the zoom handles in the proper position based on the current X data window.
 580  */
 581 DygraphRangeSelector.prototype.placeZoomHandles_ = function() {
 582   var xExtremes = this.dygraph_.xAxisExtremes();
 583   var xWindowLimits = this.dygraph_.xAxisRange();
 584   var xRange = xExtremes[1] - xExtremes[0];
 585   var leftPercent = Math.max(0, (xWindowLimits[0] - xExtremes[0])/xRange);
 586   var rightPercent = Math.max(0, (xExtremes[1] - xWindowLimits[1])/xRange);
 587   var leftCoord = this.canvasRect_.x + this.canvasRect_.w*leftPercent;
 588   var rightCoord = this.canvasRect_.x + this.canvasRect_.w*(1 - rightPercent);
 589   var handleTop = Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2);
 590   var halfHandleWidth = this.leftZoomHandle_.width/2;
 591   this.leftZoomHandle_.style.left = (leftCoord - halfHandleWidth) + 'px';
 592   this.leftZoomHandle_.style.top = handleTop + 'px';
 593   this.rightZoomHandle_.style.left = (rightCoord - halfHandleWidth) + 'px';
 594   this.rightZoomHandle_.style.top = this.leftZoomHandle_.style.top;
 595
 596   this.leftZoomHandle_.style.visibility = 'visible';
 597   this.rightZoomHandle_.style.visibility = 'visible';
 598 };
 599
 600 /**
 601  * @private
 602  * Draws the interactive layer in the foreground canvas.
 603  */
 604 DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() {
 605   var ctx = this.fgcanvas_ctx_;
 606   ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h);
 607   var margin = 1;
 608   var width = this.canvasRect_.w - margin;
 609   var height = this.canvasRect_.h - margin;
 610   var zoomHandleStatus = this.getZoomHandleStatus_();
 611
 612   ctx.strokeStyle = 'black';
 613   if (!zoomHandleStatus.isZoomed) {
 614     ctx.beginPath();
 615     ctx.moveTo(margin, margin);
 616     ctx.lineTo(margin, height);
 617     ctx.lineTo(width, height);
 618     ctx.lineTo(width, margin);
 619     ctx.stroke();
 620     if (this.iePanOverlay_) {
 621       this.iePanOverlay_.style.display = 'none';
 622     }
 623   } else {
 624     var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x);
 625     var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x);
 626
 627     ctx.fillStyle = 'rgba(240, 240, 240, 0.6)';
 628     ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h);
 629     ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h);
 630
 631     ctx.beginPath();
 632     ctx.moveTo(margin, margin);
 633     ctx.lineTo(leftHandleCanvasPos, margin);
 634     ctx.lineTo(leftHandleCanvasPos, height);
 635     ctx.lineTo(rightHandleCanvasPos, height);
 636     ctx.lineTo(rightHandleCanvasPos, margin);
 637     ctx.lineTo(width, margin);
 638     ctx.stroke();
 639
 640     if (this.isUsingExcanvas_) {
 641       this.iePanOverlay_.style.width = (rightHandleCanvasPos - leftHandleCanvasPos) + 'px';
 642       this.iePanOverlay_.style.left = leftHandleCanvasPos + 'px';
 643       this.iePanOverlay_.style.height = height + 'px';
 644       this.iePanOverlay_.style.display = 'inline';
 645     }
 646   }
 647 };
 648
 649 /**
 650  * @private
 651  * Returns the current zoom handle position information.
 652  * @return {Object} The zoom handle status.
 653  */
 654 DygraphRangeSelector.prototype.getZoomHandleStatus_ = function() {
 655   var halfHandleWidth = this.leftZoomHandle_.width/2;
 656   var leftHandlePos = parseInt(this.leftZoomHandle_.style.left, 10) + halfHandleWidth;
 657   var rightHandlePos = parseInt(this.rightZoomHandle_.style.left, 10) + halfHandleWidth;
 658   return {
 659       leftHandlePos: leftHandlePos,
 660       rightHandlePos: rightHandlePos,
 661       isZoomed: (leftHandlePos - 1 > this.canvasRect_.x || rightHandlePos + 1 < this.canvasRect_.x+this.canvasRect_.w)
 662   };
 663 };