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   this.dygraph_.attrs_.interactionModel =
 346       Dygraph.Interaction.dragIsPanInteractionModel;
 347   this.dygraph_.attrs_.panEdgeFraction = 0.0001;
 348
 349   var dragStartEvent = window.opera ? 'mousedown' : 'dragstart';
 350   Dygraph.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart);
 351   Dygraph.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart);
 352
 353   if (this.isUsingExcanvas_) {
 354     Dygraph.addEvent(this.iePanOverlay_, 'mousedown', onPanStart);
 355   } else {
 356     Dygraph.addEvent(this.fgcanvas_, 'mousedown', onPanStart);
 357     Dygraph.addEvent(this.fgcanvas_, 'mousemove', onCanvasMouseMove);
 358   }
 359 };
 360
 361 /**
 362  * @private
 363  * Draws the static layer in the background canvas.
 364  */
 365 DygraphRangeSelector.prototype.drawStaticLayer_ = function() {
 366   var ctx = this.bgcanvas_ctx_;
 367   ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h);
 368   try {
 369     this.drawMiniPlot_();
 370   } catch(ex) {
 371     Dygraph.warn(ex);
 372   }
 373
 374   var margin = 0.5;
 375   this.bgcanvas_ctx_.lineWidth = 1;
 376   ctx.strokeStyle = 'gray';
 377   ctx.beginPath();
 378   ctx.moveTo(margin, margin);
 379   ctx.lineTo(margin, this.canvasRect_.h-margin);
 380   ctx.lineTo(this.canvasRect_.w-margin, this.canvasRect_.h-margin);
 381   ctx.lineTo(this.canvasRect_.w-margin, margin);
 382   ctx.stroke();
 383 };
 384
 385
 386 /**
 387  * @private
 388  * Draws the mini plot in the background canvas.
 389  */
 390 DygraphRangeSelector.prototype.drawMiniPlot_ = function() {
 391   var fillStyle = this.attr_('rangeSelectorPlotFillColor');
 392   var strokeStyle = this.attr_('rangeSelectorPlotStrokeColor');
 393   if (!fillStyle && !strokeStyle) {
 394     return;
 395   }
 396
 397   var combinedSeriesData = this.computeCombinedSeriesAndLimits_();
 398   var yRange = combinedSeriesData.yMax - combinedSeriesData.yMin;
 399
 400   // Draw the mini plot.
 401   var ctx = this.bgcanvas_ctx_;
 402   var margin = 0.5;
 403
 404   var xExtremes = this.dygraph_.xAxisExtremes();
 405   var xRange = Math.max(xExtremes[1] - xExtremes[0], 1.e-30);
 406   var xFact = (this.canvasRect_.w - margin)/xRange;
 407   var yFact = (this.canvasRect_.h - margin)/yRange;
 408   var canvasWidth = this.canvasRect_.w - margin;
 409   var canvasHeight = this.canvasRect_.h - margin;
 410
 411   ctx.beginPath();
 412   ctx.moveTo(margin, canvasHeight);
 413   for (var i = 0; i < combinedSeriesData.data.length; i++) {
 414     var dataPoint = combinedSeriesData.data[i];
 415     var x = (dataPoint[0] - xExtremes[0])*xFact;
 416     var y = canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact;
 417     if (isFinite(x) && isFinite(y)) {
 418       ctx.lineTo(x, y);
 419     }
 420   }
 421   ctx.lineTo(canvasWidth, canvasHeight);
 422   ctx.closePath();
 423
 424   if (fillStyle) {
 425     var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
 426     lingrad.addColorStop(0, 'white');
 427     lingrad.addColorStop(1, fillStyle);
 428     this.bgcanvas_ctx_.fillStyle = lingrad;
 429     ctx.fill();
 430   }
 431
 432   if (strokeStyle) {
 433     this.bgcanvas_ctx_.strokeStyle = strokeStyle;
 434     this.bgcanvas_ctx_.lineWidth = 1.5;
 435     ctx.stroke();
 436   }
 437 };
 438
 439 /**
 440  * @private
 441  * Computes and returns the combinded series data along with min/max for the mini plot.
 442  * @return {Object} An object containing combinded series array, ymin, ymax.
 443  */
 444 DygraphRangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() {
 445   var data = this.dygraph_.rawData_;
 446   var logscale = this.attr_('logscale');
 447
 448   // Create a combined series (average of all series values).
 449   var combinedSeries = [];
 450   var sum;
 451   var count;
 452   var yVal, y;
 453   var mutipleValues;
 454   var i, j, k;
 455
 456   // Find out if data has multiple values per datapoint.
 457   // Go to first data point that actually has values (see http://code.google.com/p/dygraphs/issues/detail?id=246)
 458   for (i = 0; i < data.length; i++) {
 459     if (data[i].length > 1 && data[i][1] != null) {
 460       mutipleValues = typeof data[i][1] != 'number';
 461       if (mutipleValues) {
 462         sum = [];
 463         count = [];
 464         for (k = 0; k < data[i][1].length; k++) {
 465           sum.push(0);
 466           count.push(0);
 467         }
 468       }
 469       break;
 470     }
 471   }
 472
 473   for (i = 0; i < data.length; i++) {
 474     var dataPoint = data[i];
 475     var xVal = dataPoint[0];
 476
 477     if (mutipleValues) {
 478       for (k = 0; k < sum.length; k++) {
 479         sum[k] = count[k] = 0;
 480       }
 481     } else {
 482       sum = count = 0;
 483     }
 484
 485     for (j = 1; j < dataPoint.length; j++) {
 486       if (this.dygraph_.visibility()[j-1]) {
 487         if (mutipleValues) {
 488           for (k = 0; k < sum.length; k++) {
 489             y = dataPoint[j][k];
 490             if (y === null || isNaN(y)) continue;
 491             sum[k] += y;
 492             count[k]++;
 493           }
 494         } else {
 495           y = dataPoint[j];
 496           if (y === null || isNaN(y)) continue;
 497           sum += y;
 498           count++;
 499         }
 500       }
 501     }
 502
 503     if (mutipleValues) {
 504       for (k = 0; k < sum.length; k++) {
 505         sum[k] /= count[k];
 506       }
 507       yVal = sum.slice(0);
 508     } else {
 509       yVal = sum/count;
 510     }
 511
 512     combinedSeries.push([xVal, yVal]);
 513   }
 514
 515   // Account for roll period, fractions.
 516   combinedSeries = this.dygraph_.rollingAverage(combinedSeries, this.dygraph_.rollPeriod_);
 517
 518   if (typeof combinedSeries[0][1] != 'number') {
 519     for (i = 0; i < combinedSeries.length; i++) {
 520       yVal = combinedSeries[i][1];
 521       combinedSeries[i][1] = yVal[0];
 522     }
 523   }
 524
 525   // Compute the y range.
 526   var yMin = Number.MAX_VALUE;
 527   var yMax = -Number.MAX_VALUE;
 528   for (i = 0; i < combinedSeries.length; i++) {
 529     yVal = combinedSeries[i][1];
 530     if (yVal !== null && isFinite(yVal) && (!logscale || yVal > 0)) {
 531       yMin = Math.min(yMin, yVal);
 532       yMax = Math.max(yMax, yVal);
 533     }
 534   }
 535
 536   // Convert Y data to log scale if needed.
 537   // Also, expand the Y range to compress the mini plot a little.
 538   var extraPercent = 0.25;
 539   if (logscale) {
 540     yMax = Dygraph.log10(yMax);
 541     yMax += yMax*extraPercent;
 542     yMin = Dygraph.log10(yMin);
 543     for (i = 0; i < combinedSeries.length; i++) {
 544       combinedSeries[i][1] = Dygraph.log10(combinedSeries[i][1]);
 545     }
 546   } else {
 547     var yExtra;
 548     var yRange = yMax - yMin;
 549     if (yRange <= Number.MIN_VALUE) {
 550       yExtra = yMax*extraPercent;
 551     } else {
 552       yExtra = yRange*extraPercent;
 553     }
 554     yMax += yExtra;
 555     yMin -= yExtra;
 556   }
 557
 558   return {data: combinedSeries, yMin: yMin, yMax: yMax};
 559 };
 560
 561 /**
 562  * @private
 563  * Places the zoom handles in the proper position based on the current X data window.
 564  */
 565 DygraphRangeSelector.prototype.placeZoomHandles_ = function() {
 566   var xExtremes = this.dygraph_.xAxisExtremes();
 567   var xWindowLimits = this.dygraph_.xAxisRange();
 568   var xRange = xExtremes[1] - xExtremes[0];
 569   var leftPercent = Math.max(0, (xWindowLimits[0] - xExtremes[0])/xRange);
 570   var rightPercent = Math.max(0, (xExtremes[1] - xWindowLimits[1])/xRange);
 571   var leftCoord = this.canvasRect_.x + this.canvasRect_.w*leftPercent;
 572   var rightCoord = this.canvasRect_.x + this.canvasRect_.w*(1 - rightPercent);
 573   var handleTop = Math.max(this.canvasRect_.y, this.canvasRect_.y + (this.canvasRect_.h - this.leftZoomHandle_.height)/2);
 574   var halfHandleWidth = this.leftZoomHandle_.width/2;
 575   this.leftZoomHandle_.style.left = (leftCoord - halfHandleWidth) + 'px';
 576   this.leftZoomHandle_.style.top = handleTop + 'px';
 577   this.rightZoomHandle_.style.left = (rightCoord - halfHandleWidth) + 'px';
 578   this.rightZoomHandle_.style.top = this.leftZoomHandle_.style.top;
 579
 580   this.leftZoomHandle_.style.visibility = 'visible';
 581   this.rightZoomHandle_.style.visibility = 'visible';
 582 };
 583
 584 /**
 585  * @private
 586  * Draws the interactive layer in the foreground canvas.
 587  */
 588 DygraphRangeSelector.prototype.drawInteractiveLayer_ = function() {
 589   var ctx = this.fgcanvas_ctx_;
 590   ctx.clearRect(0, 0, this.canvasRect_.w, this.canvasRect_.h);
 591   var margin = 1;
 592   var width = this.canvasRect_.w - margin;
 593   var height = this.canvasRect_.h - margin;
 594   var zoomHandleStatus = this.getZoomHandleStatus_();
 595
 596   ctx.strokeStyle = 'black';
 597   if (!zoomHandleStatus.isZoomed) {
 598     ctx.beginPath();
 599     ctx.moveTo(margin, margin);
 600     ctx.lineTo(margin, height);
 601     ctx.lineTo(width, height);
 602     ctx.lineTo(width, margin);
 603     ctx.stroke();
 604     if (this.iePanOverlay_) {
 605       this.iePanOverlay_.style.display = 'none';
 606     }
 607   } else {
 608     var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x);
 609     var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x);
 610
 611     ctx.fillStyle = 'rgba(240, 240, 240, 0.6)';
 612     ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h);
 613     ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h);
 614
 615     ctx.beginPath();
 616     ctx.moveTo(margin, margin);
 617     ctx.lineTo(leftHandleCanvasPos, margin);
 618     ctx.lineTo(leftHandleCanvasPos, height);
 619     ctx.lineTo(rightHandleCanvasPos, height);
 620     ctx.lineTo(rightHandleCanvasPos, margin);
 621     ctx.lineTo(width, margin);
 622     ctx.stroke();
 623
 624     if (this.isUsingExcanvas_) {
 625       this.iePanOverlay_.style.width = (rightHandleCanvasPos - leftHandleCanvasPos) + 'px';
 626       this.iePanOverlay_.style.left = leftHandleCanvasPos + 'px';
 627       this.iePanOverlay_.style.height = height + 'px';
 628       this.iePanOverlay_.style.display = 'inline';
 629     }
 630   }
 631 };
 632
 633 /**
 634  * @private
 635  * Returns the current zoom handle position information.
 636  * @return {Object} The zoom handle status.
 637  */
 638 DygraphRangeSelector.prototype.getZoomHandleStatus_ = function() {
 639   var halfHandleWidth = this.leftZoomHandle_.width/2;
 640   var leftHandlePos = parseInt(this.leftZoomHandle_.style.left, 10) + halfHandleWidth;
 641   var rightHandlePos = parseInt(this.rightZoomHandle_.style.left, 10) + halfHandleWidth;
 642   return {
 643       leftHandlePos: leftHandlePos,
 644       rightHandlePos: rightHandlePos,
 645       isZoomed: (leftHandlePos - 1 > this.canvasRect_.x || rightHandlePos + 1 < this.canvasRect_.x+this.canvasRect_.w)
 646   };
 647 };