3 * Copyright 2011 Paul Felix (paul.eric.felix@gmail.com)
4 * MIT-licensed (http://opensource.org/licenses/MIT)
8 * @fileoverview This file contains the DygraphRangeSelector class used to provide
9 * a timeline range selector widget for dygraphs.
12 /*jshint globalstrict: true */
13 /*global Dygraph:false */
17 * The DygraphRangeSelector class provides a timeline range selector widget.
18 * @param {Dygraph} dygraph The dygraph object
21 var DygraphRangeSelector
= function(dygraph
) {
22 this.isIE_
= /MSIE/.test(navigator
.userAgent
) && !window
.opera
;
23 this.isUsingExcanvas_
= dygraph
.isUsingExcanvas_
;
24 this.dygraph_
= dygraph
;
25 this.hasTouchInterface_
= typeof(TouchEvent
) != 'undefined';
26 this.isMobileDevice_
= /mobile|android/gi.test(navigator
.appVersion
);
27 this.createCanvases_();
28 if (this.isUsingExcanvas_
) {
29 this.createIEPanOverlay_();
31 this.createZoomHandles_();
32 this.initInteraction_();
36 * Adds the range selector to the dygraph.
37 * @param {Object} graphDiv The container div for the range selector.
38 * @param {DygraphLayout} layout The DygraphLayout object for this graph.
40 DygraphRangeSelector
.prototype.addToGraph
= function(graphDiv
, layout
) {
41 this.layout_
= layout
;
43 graphDiv
.appendChild(this.bgcanvas_
);
44 graphDiv
.appendChild(this.fgcanvas_
);
45 graphDiv
.appendChild(this.leftZoomHandle_
);
46 graphDiv
.appendChild(this.rightZoomHandle_
);
50 * Renders the static background portion of the range selector.
52 DygraphRangeSelector
.prototype.renderStaticLayer
= function() {
54 this.drawStaticLayer_();
58 * Renders the interactive foreground portion of the range selector.
60 DygraphRangeSelector
.prototype.renderInteractiveLayer
= function() {
61 if (this.isChangingRange_
) {
64 this.placeZoomHandles_();
65 this.drawInteractiveLayer_();
70 * Resizes the range selector.
72 DygraphRangeSelector
.prototype.resize_
= function() {
73 function setElementRect(canvas
, rect
) {
74 canvas
.style
.top
= rect
.y
+ 'px';
75 canvas
.style
.left
= rect
.x
+ 'px';
76 canvas
.width
= rect
.w
;
77 canvas
.height
= rect
.h
;
78 canvas
.style
.width
= canvas
.width
+ 'px'; // for IE
79 canvas
.style
.height
= canvas
.height
+ 'px'; // for IE
82 var plotArea
= this.layout_
.getPlotArea();
83 var xAxisLabelHeight
= this.attr_('xAxisHeight') || (this.attr_('axisLabelFontSize') + 2 * this.attr_('axisTickSize'));
86 y
: plotArea
.y
+ plotArea
.h
+ xAxisLabelHeight
+ 4,
88 h
: this.attr_('rangeSelectorHeight')
91 setElementRect(this.bgcanvas_
, this.canvasRect_
);
92 setElementRect(this.fgcanvas_
, this.canvasRect_
);
95 DygraphRangeSelector
.prototype.attr_
= function(name
) {
96 return this.dygraph_
.attr_(name
);
101 * Creates the background and foreground canvases.
103 DygraphRangeSelector
.prototype.createCanvases_
= function() {
104 this.bgcanvas_
= Dygraph
.createCanvas();
105 this.bgcanvas_
.className
= 'dygraph-rangesel-bgcanvas';
106 this.bgcanvas_
.style
.position
= 'absolute';
107 this.bgcanvas_
.style
.zIndex
= 9;
108 this.bgcanvas_ctx_
= Dygraph
.getContext(this.bgcanvas_
);
110 this.fgcanvas_
= Dygraph
.createCanvas();
111 this.fgcanvas_
.className
= 'dygraph-rangesel-fgcanvas';
112 this.fgcanvas_
.style
.position
= 'absolute';
113 this.fgcanvas_
.style
.zIndex
= 9;
114 this.fgcanvas_
.style
.cursor
= 'default';
115 this.fgcanvas_ctx_
= Dygraph
.getContext(this.fgcanvas_
);
120 * Creates overlay divs for IE/Excanvas so that mouse events are handled properly.
122 DygraphRangeSelector
.prototype.createIEPanOverlay_
= function() {
123 this.iePanOverlay_
= document
.createElement("div");
124 this.iePanOverlay_
.style
.position
= 'absolute';
125 this.iePanOverlay_
.style
.backgroundColor
= 'white';
126 this.iePanOverlay_
.style
.filter
= 'alpha(opacity=0)';
127 this.iePanOverlay_
.style
.display
= 'none';
128 this.iePanOverlay_
.style
.cursor
= 'move';
129 this.fgcanvas_
.appendChild(this.iePanOverlay_
);
134 * Creates the zoom handle elements.
136 DygraphRangeSelector
.prototype.createZoomHandles_
= function() {
137 var img
= new Image();
138 img
.className
= 'dygraph-rangesel-zoomhandle';
139 img
.style
.position
= 'absolute';
140 img
.style
.zIndex
= 10;
141 img
.style
.visibility
= 'hidden'; // Initially hidden so they don't show up in the wrong place.
142 img
.style
.cursor
= 'col-resize';
144 if (/MSIE 7/.test(navigator
.userAgent
)) { // IE7 doesn't support embedded src data.
147 img
.style
.backgroundColor
= 'white';
148 img
.style
.border
= '1px solid #333333'; // Just show box in IE7.
152 img
.src
= 'data:image/png;base64,' +
153 'iVBORw0KGgoAAAANSUhEUgAAAAkAAAAQCAYAAADESFVDAAAAAXNSR0IArs4c6QAAAAZiS0dEANAA' +
154 'zwDP4Z7KegAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9sHGw0cMqdt1UwAAAAZdEVYdENv' +
155 'bW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAaElEQVQoz+3SsRFAQBCF4Z9WJM8KCDVwownl' +
156 '6YXsTmCUsyKGkZzcl7zkz3YLkypgAnreFmDEpHkIwVOMfpdi9CEEN2nGpFdwD03yEqDtOgCaun7s' +
157 'qSTDH32I1pQA2Pb9sZecAxc5r3IAb21d6878xsAAAAAASUVORK5CYII=';
160 if (this.isMobileDevice_
) {
165 this.leftZoomHandle_
= img
;
166 this.rightZoomHandle_
= img
.cloneNode(false);
171 * Sets up the interaction for the range selector.
173 DygraphRangeSelector
.prototype.initInteraction_
= function() {
175 var topElem
= this.isIE_
? document
: window
;
178 var isZooming
= false;
179 var isPanning
= false;
180 var dynamic
= !this.isMobileDevice_
&& !this.isUsingExcanvas_
;
182 // functions, defined below. Defining them this way (rather than with
183 // "function foo() {...}" makes JSHint happy.
184 var toXDataWindow
, onZoomStart
, onZoom
, onZoomEnd
, doZoom
, isMouseInPanZone
,
185 onPanStart
, onPan
, onPanEnd
, doPan
, onCanvasMouseMove
, applyBrowserZoomLevel
;
187 // Touch event functions
188 var onZoomHandleTouchEvent
, onCanvasTouchEvent
, addTouchEvents
;
190 toXDataWindow
= function(zoomHandleStatus
) {
191 var xDataLimits
= self
.dygraph_
.xAxisExtremes();
192 var fact
= (xDataLimits
[1] - xDataLimits
[0])/self
.canvasRect_
.w
;
193 var xDataMin
= xDataLimits
[0] + (zoomHandleStatus
.leftHandlePos
- self
.canvasRect_
.x
)*fact
;
194 var xDataMax
= xDataLimits
[0] + (zoomHandleStatus
.rightHandlePos
- self
.canvasRect_
.x
)*fact
;
195 return [xDataMin
, xDataMax
];
198 applyBrowserZoomLevel
= function(delX
) {
199 var zoom
= window
.outerWidth
/document
.documentElement
.clientWidth
;
207 onZoomStart
= function(e
) {
208 Dygraph
.cancelEvent(e
);
211 handle
= e
.target
? e
.target
: e
.srcElement
;
212 self
.dygraph_
.addEvent(topElem
, 'mousemove', onZoom
);
213 self
.dygraph_
.addEvent(topElem
, 'mouseup', onZoomEnd
);
214 self
.fgcanvas_
.style
.cursor
= 'col-resize';
218 onZoom
= function(e
) {
222 Dygraph
.cancelEvent(e
);
223 var delX
= e
.screenX
- xLast
;
224 if (Math
.abs(delX
) < 4 || e
.screenX
=== 0) {
225 // First iPad move event seems to have screenX = 0
229 delX
= applyBrowserZoomLevel(delX
);
232 var zoomHandleStatus
= self
.getZoomHandleStatus_();
234 if (handle
== self
.leftZoomHandle_
) {
235 newPos
= zoomHandleStatus
.leftHandlePos
+ delX
;
236 newPos
= Math
.min(newPos
, zoomHandleStatus
.rightHandlePos
- handle
.width
- 3);
237 newPos
= Math
.max(newPos
, self
.canvasRect_
.x
);
239 newPos
= zoomHandleStatus
.rightHandlePos
+ delX
;
240 newPos
= Math
.min(newPos
, self
.canvasRect_
.x
+ self
.canvasRect_
.w
);
241 newPos
= Math
.max(newPos
, zoomHandleStatus
.leftHandlePos
+ handle
.width
+ 3);
243 var halfHandleWidth
= handle
.width
/2;
244 handle
.style
.left
= (newPos
- halfHandleWidth
) + 'px';
245 self
.drawInteractiveLayer_();
247 // Zoom on the fly (if not using excanvas).
254 onZoomEnd
= function(e
) {
259 Dygraph
.removeEvent(topElem
, 'mousemove', onZoom
);
260 Dygraph
.removeEvent(topElem
, 'mouseup', onZoomEnd
);
261 self
.fgcanvas_
.style
.cursor
= 'default';
263 // If using excanvas, Zoom now.
270 doZoom
= function() {
272 var zoomHandleStatus
= self
.getZoomHandleStatus_();
273 self
.isChangingRange_
= true;
274 if (!zoomHandleStatus
.isZoomed
) {
275 self
.dygraph_
.doUnzoom_();
277 var xDataWindow
= toXDataWindow(zoomHandleStatus
);
278 self
.dygraph_
.doZoomXDates_(xDataWindow
[0], xDataWindow
[1]);
281 self
.isChangingRange_
= false;
285 isMouseInPanZone
= function(e
) {
286 if (self
.isUsingExcanvas_
) {
287 return e
.srcElement
== self
.iePanOverlay_
;
289 var rect
= self
.leftZoomHandle_
.getBoundingClientRect();
290 var leftHandleClientX
= rect
.left
+ rect
.width
/2;
291 rect
= self
.rightZoomHandle_
.getBoundingClientRect();
292 var rightHandleClientX
= rect
.left
+ rect
.width
/2;
293 return (e
.clientX
> leftHandleClientX
&& e
.clientX
< rightHandleClientX
);
297 onPanStart
= function(e
) {
298 if (!isPanning
&& isMouseInPanZone(e
) && self
.getZoomHandleStatus_().isZoomed
) {
299 Dygraph
.cancelEvent(e
);
302 self
.dygraph_
.addEvent(topElem
, 'mousemove', onPan
);
303 self
.dygraph_
.addEvent(topElem
, 'mouseup', onPanEnd
);
309 onPan
= function(e
) {
313 Dygraph
.cancelEvent(e
);
315 var delX
= e
.screenX
- xLast
;
316 if (Math
.abs(delX
) < 4) {
320 delX
= applyBrowserZoomLevel(delX
);
323 var zoomHandleStatus
= self
.getZoomHandleStatus_();
324 var leftHandlePos
= zoomHandleStatus
.leftHandlePos
;
325 var rightHandlePos
= zoomHandleStatus
.rightHandlePos
;
326 var rangeSize
= rightHandlePos
- leftHandlePos
;
327 if (leftHandlePos
+ delX
<= self
.canvasRect_
.x
) {
328 leftHandlePos
= self
.canvasRect_
.x
;
329 rightHandlePos
= leftHandlePos
+ rangeSize
;
330 } else if (rightHandlePos
+ delX
>= self
.canvasRect_
.x
+ self
.canvasRect_
.w
) {
331 rightHandlePos
= self
.canvasRect_
.x
+ self
.canvasRect_
.w
;
332 leftHandlePos
= rightHandlePos
- rangeSize
;
334 leftHandlePos
+= delX
;
335 rightHandlePos
+= delX
;
337 var halfHandleWidth
= self
.leftZoomHandle_
.width
/2;
338 self
.leftZoomHandle_
.style
.left
= (leftHandlePos
- halfHandleWidth
) + 'px';
339 self
.rightZoomHandle_
.style
.left
= (rightHandlePos
- halfHandleWidth
) + 'px';
340 self
.drawInteractiveLayer_();
342 // Do pan on the fly (if not using excanvas).
349 onPanEnd
= function(e
) {
354 Dygraph
.removeEvent(topElem
, 'mousemove', onPan
);
355 Dygraph
.removeEvent(topElem
, 'mouseup', onPanEnd
);
356 // If using excanvas, do pan now.
365 self
.isChangingRange_
= true;
366 self
.dygraph_
.dateWindow_
= toXDataWindow(self
.getZoomHandleStatus_());
367 self
.dygraph_
.drawGraph_(false);
369 self
.isChangingRange_
= false;
373 onCanvasMouseMove
= function(e
) {
374 if (isZooming
|| isPanning
) {
377 var cursor
= isMouseInPanZone(e
) ? 'move' : 'default';
378 if (cursor
!= self
.fgcanvas_
.style
.cursor
) {
379 self
.fgcanvas_
.style
.cursor
= cursor
;
383 onZoomHandleTouchEvent
= function(e
) {
384 if (e
.type
== 'touchstart' && e
.targetTouches
.length
== 1) {
385 if (onZoomStart(e
.targetTouches
[0])) {
386 Dygraph
.cancelEvent(e
);
388 } else if (e
.type
== 'touchmove' && e
.targetTouches
.length
== 1) {
389 if (onZoom(e
.targetTouches
[0])) {
390 Dygraph
.cancelEvent(e
);
397 onCanvasTouchEvent
= function(e
) {
398 if (e
.type
== 'touchstart' && e
.targetTouches
.length
== 1) {
399 if (onPanStart(e
.targetTouches
[0])) {
400 Dygraph
.cancelEvent(e
);
402 } else if (e
.type
== 'touchmove' && e
.targetTouches
.length
== 1) {
403 if (onPan(e
.targetTouches
[0])) {
404 Dygraph
.cancelEvent(e
);
411 addTouchEvents
= function(elem
, fn
) {
412 var types
= ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
413 for (var i
= 0; i
< types
.length
; i
++) {
414 self
.dygraph_
.addEvent(elem
, types
[i
], fn
);
418 this.dygraph_
.attrs_
.interactionModel
=
419 Dygraph
.Interaction
.dragIsPanInteractionModel
;
420 this.dygraph_
.attrs_
.panEdgeFraction
= 0.0001;
422 var dragStartEvent
= window
.opera
? 'mousedown' : 'dragstart';
423 this.dygraph_
.addEvent(this.leftZoomHandle_
, dragStartEvent
, onZoomStart
);
424 this.dygraph_
.addEvent(this.rightZoomHandle_
, dragStartEvent
, onZoomStart
);
426 if (this.isUsingExcanvas_
) {
427 this.dygraph_
.addEvent(this.iePanOverlay_
, 'mousedown', onPanStart
);
429 this.dygraph_
.addEvent(this.fgcanvas_
, 'mousedown', onPanStart
);
430 this.dygraph_
.addEvent(this.fgcanvas_
, 'mousemove', onCanvasMouseMove
);
434 if (this.hasTouchInterface_
) {
435 addTouchEvents(this.leftZoomHandle_
, onZoomHandleTouchEvent
);
436 addTouchEvents(this.rightZoomHandle_
, onZoomHandleTouchEvent
);
437 addTouchEvents(this.fgcanvas_
, onCanvasTouchEvent
);
443 * Draws the static layer in the background canvas.
445 DygraphRangeSelector
.prototype.drawStaticLayer_
= function() {
446 var ctx
= this.bgcanvas_ctx_
;
447 ctx
.clearRect(0, 0, this.canvasRect_
.w
, this.canvasRect_
.h
);
449 this.drawMiniPlot_();
455 this.bgcanvas_ctx_
.lineWidth
= 1;
456 ctx
.strokeStyle
= 'gray';
458 ctx
.moveTo(margin
, margin
);
459 ctx
.lineTo(margin
, this.canvasRect_
.h
-margin
);
460 ctx
.lineTo(this.canvasRect_
.w
-margin
, this.canvasRect_
.h
-margin
);
461 ctx
.lineTo(this.canvasRect_
.w
-margin
, margin
);
468 * Draws the mini plot in the background canvas.
470 DygraphRangeSelector
.prototype.drawMiniPlot_
= function() {
471 var fillStyle
= this.attr_('rangeSelectorPlotFillColor');
472 var strokeStyle
= this.attr_('rangeSelectorPlotStrokeColor');
473 if (!fillStyle
&& !strokeStyle
) {
477 var combinedSeriesData
= this.computeCombinedSeriesAndLimits_();
478 var yRange
= combinedSeriesData
.yMax
- combinedSeriesData
.yMin
;
480 // Draw the mini plot.
481 var ctx
= this.bgcanvas_ctx_
;
484 var xExtremes
= this.dygraph_
.xAxisExtremes();
485 var xRange
= Math
.max(xExtremes
[1] - xExtremes
[0], 1.e
-30);
486 var xFact
= (this.canvasRect_
.w
- margin
)/xRange
;
487 var yFact
= (this.canvasRect_
.h
- margin
)/yRange
;
488 var canvasWidth
= this.canvasRect_
.w
- margin
;
489 var canvasHeight
= this.canvasRect_
.h
- margin
;
492 ctx
.moveTo(margin
, canvasHeight
);
493 for (var i
= 0; i
< combinedSeriesData
.data
.length
; i
++) {
494 var dataPoint
= combinedSeriesData
.data
[i
];
495 var x
= (dataPoint
[0] - xExtremes
[0])*xFact
;
496 var y
= canvasHeight
- (dataPoint
[1] - combinedSeriesData
.yMin
)*yFact
;
497 if (isFinite(x
) && isFinite(y
)) {
501 ctx
.lineTo(canvasWidth
, canvasHeight
);
505 var lingrad
= this.bgcanvas_ctx_
.createLinearGradient(0, 0, 0, canvasHeight
);
506 lingrad
.addColorStop(0, 'white');
507 lingrad
.addColorStop(1, fillStyle
);
508 this.bgcanvas_ctx_
.fillStyle
= lingrad
;
513 this.bgcanvas_ctx_
.strokeStyle
= strokeStyle
;
514 this.bgcanvas_ctx_
.lineWidth
= 1.5;
521 * Computes and returns the combinded series data along with min/max for the mini plot.
522 * @return {Object} An object containing combinded series array, ymin, ymax.
524 DygraphRangeSelector
.prototype.computeCombinedSeriesAndLimits_
= function() {
525 var data
= this.dygraph_
.rawData_
;
526 var logscale
= this.attr_('logscale');
528 // Create a combined series (average of all series values).
529 var combinedSeries
= [];
536 // Find out if data has multiple values per datapoint.
537 // Go to first data point that actually has values (see http://code.google.com/p/dygraphs/issues/detail
?id
=246)
538 for (i
= 0; i
< data
.length
; i
++) {
539 if (data
[i
].length
> 1 && data
[i
][1] !== null) {
540 mutipleValues
= typeof data
[i
][1] != 'number';
544 for (k
= 0; k
< data
[i
][1].length
; k
++) {
553 for (i
= 0; i
< data
.length
; i
++) {
554 var dataPoint
= data
[i
];
558 for (k
= 0; k
< sum
.length
; k
++) {
559 sum
[k
] = count
[k
] = 0;
565 for (j
= 1; j
< dataPoint
.length
; j
++) {
566 if (this.dygraph_
.visibility()[j
-1]) {
569 for (k
= 0; k
< sum
.length
; k
++) {
571 if (y
=== null || isNaN(y
)) continue;
577 if (y
=== null || isNaN(y
)) continue;
585 for (k
= 0; k
< sum
.length
; k
++) {
593 combinedSeries
.push([xVal
, yVal
]);
596 // Account for roll period, fractions.
597 combinedSeries
= this.dygraph_
.rollingAverage(combinedSeries
, this.dygraph_
.rollPeriod_
);
599 if (typeof combinedSeries
[0][1] != 'number') {
600 for (i
= 0; i
< combinedSeries
.length
; i
++) {
601 yVal
= combinedSeries
[i
][1];
602 combinedSeries
[i
][1] = yVal
[0];
606 // Compute the y range.
607 var yMin
= Number
.MAX_VALUE
;
608 var yMax
= -Number
.MAX_VALUE
;
609 for (i
= 0; i
< combinedSeries
.length
; i
++) {
610 yVal
= combinedSeries
[i
][1];
611 if (yVal
!== null && isFinite(yVal
) && (!logscale
|| yVal
> 0)) {
612 yMin
= Math
.min(yMin
, yVal
);
613 yMax
= Math
.max(yMax
, yVal
);
617 // Convert Y data to log scale if needed.
618 // Also, expand the Y range to compress the mini plot a little.
619 var extraPercent
= 0.25;
621 yMax
= Dygraph
.log10(yMax
);
622 yMax
+= yMax
*extraPercent
;
623 yMin
= Dygraph
.log10(yMin
);
624 for (i
= 0; i
< combinedSeries
.length
; i
++) {
625 combinedSeries
[i
][1] = Dygraph
.log10(combinedSeries
[i
][1]);
629 var yRange
= yMax
- yMin
;
630 if (yRange
<= Number
.MIN_VALUE
) {
631 yExtra
= yMax
*extraPercent
;
633 yExtra
= yRange
*extraPercent
;
639 return {data
: combinedSeries
, yMin
: yMin
, yMax
: yMax
};
644 * Places the zoom handles in the proper position based on the current X data window.
646 DygraphRangeSelector
.prototype.placeZoomHandles_
= function() {
647 var xExtremes
= this.dygraph_
.xAxisExtremes();
648 var xWindowLimits
= this.dygraph_
.xAxisRange();
649 var xRange
= xExtremes
[1] - xExtremes
[0];
650 var leftPercent
= Math
.max(0, (xWindowLimits
[0] - xExtremes
[0])/xRange
);
651 var rightPercent
= Math
.max(0, (xExtremes
[1] - xWindowLimits
[1])/xRange
);
652 var leftCoord
= this.canvasRect_
.x
+ this.canvasRect_
.w
*leftPercent
;
653 var rightCoord
= this.canvasRect_
.x
+ this.canvasRect_
.w
*(1 - rightPercent
);
654 var handleTop
= Math
.max(this.canvasRect_
.y
, this.canvasRect_
.y
+ (this.canvasRect_
.h
- this.leftZoomHandle_
.height
)/2);
655 var halfHandleWidth
= this.leftZoomHandle_
.width
/2;
656 this.leftZoomHandle_
.style
.left
= (leftCoord
- halfHandleWidth
) + 'px';
657 this.leftZoomHandle_
.style
.top
= handleTop
+ 'px';
658 this.rightZoomHandle_
.style
.left
= (rightCoord
- halfHandleWidth
) + 'px';
659 this.rightZoomHandle_
.style
.top
= this.leftZoomHandle_
.style
.top
;
661 this.leftZoomHandle_
.style
.visibility
= 'visible';
662 this.rightZoomHandle_
.style
.visibility
= 'visible';
667 * Draws the interactive layer in the foreground canvas.
669 DygraphRangeSelector
.prototype.drawInteractiveLayer_
= function() {
670 var ctx
= this.fgcanvas_ctx_
;
671 ctx
.clearRect(0, 0, this.canvasRect_
.w
, this.canvasRect_
.h
);
673 var width
= this.canvasRect_
.w
- margin
;
674 var height
= this.canvasRect_
.h
- margin
;
675 var zoomHandleStatus
= this.getZoomHandleStatus_();
677 ctx
.strokeStyle
= 'black';
678 if (!zoomHandleStatus
.isZoomed
) {
680 ctx
.moveTo(margin
, margin
);
681 ctx
.lineTo(margin
, height
);
682 ctx
.lineTo(width
, height
);
683 ctx
.lineTo(width
, margin
);
685 if (this.iePanOverlay_
) {
686 this.iePanOverlay_
.style
.display
= 'none';
689 var leftHandleCanvasPos
= Math
.max(margin
, zoomHandleStatus
.leftHandlePos
- this.canvasRect_
.x
);
690 var rightHandleCanvasPos
= Math
.min(width
, zoomHandleStatus
.rightHandlePos
- this.canvasRect_
.x
);
692 ctx
.fillStyle
= 'rgba(240, 240, 240, 0.6)';
693 ctx
.fillRect(0, 0, leftHandleCanvasPos
, this.canvasRect_
.h
);
694 ctx
.fillRect(rightHandleCanvasPos
, 0, this.canvasRect_
.w
- rightHandleCanvasPos
, this.canvasRect_
.h
);
697 ctx
.moveTo(margin
, margin
);
698 ctx
.lineTo(leftHandleCanvasPos
, margin
);
699 ctx
.lineTo(leftHandleCanvasPos
, height
);
700 ctx
.lineTo(rightHandleCanvasPos
, height
);
701 ctx
.lineTo(rightHandleCanvasPos
, margin
);
702 ctx
.lineTo(width
, margin
);
705 if (this.isUsingExcanvas_
) {
706 this.iePanOverlay_
.style
.width
= (rightHandleCanvasPos
- leftHandleCanvasPos
) + 'px';
707 this.iePanOverlay_
.style
.left
= leftHandleCanvasPos
+ 'px';
708 this.iePanOverlay_
.style
.height
= height
+ 'px';
709 this.iePanOverlay_
.style
.display
= 'inline';
716 * Returns the current zoom handle position information.
717 * @return {Object} The zoom handle status.
719 DygraphRangeSelector
.prototype.getZoomHandleStatus_
= function() {
720 var halfHandleWidth
= this.leftZoomHandle_
.width
/2;
721 var leftHandlePos
= parseInt(this.leftZoomHandle_
.style
.left
, 10) + halfHandleWidth
;
722 var rightHandlePos
= parseInt(this.rightZoomHandle_
.style
.left
, 10) + halfHandleWidth
;
724 leftHandlePos
: leftHandlePos
,
725 rightHandlePos
: rightHandlePos
,
726 isZoomed
: (leftHandlePos
- 1 > this.canvasRect_
.x
|| rightHandlePos
+ 1 < this.canvasRect_
.x
+this.canvasRect_
.w
)