Dygraph.Plugins.RangeSelector = (function() {
-/*jshint globalstrict: true */
/*global Dygraph:false */
"use strict";
rangeSelector.prototype.activate = function(dygraph) {
this.dygraph_ = dygraph;
- this.isUsingExcanvas_ = dygraph.isUsingExcanvas_;
if (this.getOption_('showRangeSelector')) {
this.createInterface_();
}
this.fgcanvas_ = null;
this.leftZoomHandle_ = null;
this.rightZoomHandle_ = null;
- this.iePanOverlay_ = null;
};
//------------------------------------------------------------------
// Private methods
//------------------------------------------------------------------
-rangeSelector.prototype.getOption_ = function(name) {
- return this.dygraph_.getOption(name);
+rangeSelector.prototype.getOption_ = function(name, opt_series) {
+ return this.dygraph_.getOption(name, opt_series);
};
rangeSelector.prototype.setDefaultOption_ = function(name, value) {
- return this.dygraph_.attrs_[name] = value;
+ this.dygraph_.attrs_[name] = value;
};
/**
*/
rangeSelector.prototype.createInterface_ = function() {
this.createCanvases_();
- if (this.isUsingExcanvas_) {
- this.createIEPanOverlay_();
- }
this.createZoomHandles_();
this.initInteraction_();
// Range selector and animatedZooms have a bad interaction. See issue 359.
if (this.getOption_('animatedZooms')) {
- this.dygraph_.warn('Animated zooms and range selector are not compatible; disabling animatedZooms.');
+ console.warn('Animated zooms and range selector are not compatible; disabling animatedZooms.');
this.dygraph_.updateOptions({animatedZooms: false}, true);
}
* Resizes the range selector.
*/
rangeSelector.prototype.resize_ = function() {
- function setElementRect(canvas, rect) {
+ function setElementRect(canvas, context, rect) {
+ var canvasScale = Dygraph.getContextPixelRatio(context);
+
canvas.style.top = rect.y + 'px';
canvas.style.left = rect.x + 'px';
- canvas.width = rect.w;
- canvas.height = rect.h;
- canvas.style.width = canvas.width + 'px'; // for IE
- canvas.style.height = canvas.height + 'px'; // for IE
+ canvas.width = rect.w * canvasScale;
+ canvas.height = rect.h * canvasScale;
+ canvas.style.width = rect.w + 'px';
+ canvas.style.height = rect.h + 'px';
+
+ if(canvasScale != 1) {
+ context.scale(canvasScale, canvasScale);
+ }
}
var plotArea = this.dygraph_.layout_.getPlotArea();
-
+
var xAxisLabelHeight = 0;
- if(this.getOption_('drawXAxis')){
+ if (this.dygraph_.getOptionForAxis('drawAxis', 'x')) {
xAxisLabelHeight = this.getOption_('xAxisHeight') || (this.getOption_('axisLabelFontSize') + 2 * this.getOption_('axisTickSize'));
}
this.canvasRect_ = {
h: this.getOption_('rangeSelectorHeight')
};
- setElementRect(this.bgcanvas_, this.canvasRect_);
- setElementRect(this.fgcanvas_, this.canvasRect_);
+ setElementRect(this.bgcanvas_, this.bgcanvas_ctx_, this.canvasRect_);
+ setElementRect(this.fgcanvas_, this.fgcanvas_ctx_, this.canvasRect_);
};
/**
/**
* @private
- * Creates overlay divs for IE/Excanvas so that mouse events are handled properly.
- */
-rangeSelector.prototype.createIEPanOverlay_ = function() {
- this.iePanOverlay_ = document.createElement("div");
- this.iePanOverlay_.style.position = 'absolute';
- this.iePanOverlay_.style.backgroundColor = 'white';
- this.iePanOverlay_.style.filter = 'alpha(opacity=0)';
- this.iePanOverlay_.style.display = 'none';
- this.iePanOverlay_.style.cursor = 'move';
- this.fgcanvas_.appendChild(this.iePanOverlay_);
-};
-
-/**
- * @private
* Creates the zoom handle elements.
*/
rangeSelector.prototype.createZoomHandles_ = function() {
img.style.zIndex = 10;
img.style.visibility = 'hidden'; // Initially hidden so they don't show up in the wrong place.
img.style.cursor = 'col-resize';
-
+//TODO: change image to more options
if (/MSIE 7/.test(navigator.userAgent)) { // IE7 doesn't support embedded src data.
img.width = 7;
img.height = 14;
*/
rangeSelector.prototype.initInteraction_ = function() {
var self = this;
- var topElem = this.isIE_ ? document : window;
+ var topElem = document;
var clientXLast = 0;
var handle = null;
var isZooming = false;
var isPanning = false;
- var dynamic = !this.isMobileDevice_ && !this.isUsingExcanvas_;
+ var dynamic = !this.isMobileDevice_;
// We cover iframes during mouse interactions. See comments in
// dygraph-utils.js for more info on why this is a good idea.
handle.style.left = (newPos - halfHandleWidth) + 'px';
self.drawInteractiveLayer_();
- // Zoom on the fly (if not using excanvas).
+ // Zoom on the fly.
if (dynamic) {
doZoom();
}
Dygraph.removeEvent(topElem, 'mouseup', onZoomEnd);
self.fgcanvas_.style.cursor = 'default';
- // If using excanvas, Zoom now.
+ // If on a slower device, zoom now.
if (!dynamic) {
doZoom();
}
};
isMouseInPanZone = function(e) {
- if (self.isUsingExcanvas_) {
- return e.srcElement == self.iePanOverlay_;
- } else {
- var rect = self.leftZoomHandle_.getBoundingClientRect();
- var leftHandleClientX = rect.left + rect.width/2;
- rect = self.rightZoomHandle_.getBoundingClientRect();
- var rightHandleClientX = rect.left + rect.width/2;
- return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX);
- }
+ var rect = self.leftZoomHandle_.getBoundingClientRect();
+ var leftHandleClientX = rect.left + rect.width/2;
+ rect = self.rightZoomHandle_.getBoundingClientRect();
+ var rightHandleClientX = rect.left + rect.width/2;
+ return (e.clientX > leftHandleClientX && e.clientX < rightHandleClientX);
};
onPanStart = function(e) {
self.rightZoomHandle_.style.left = (rightHandlePos - halfHandleWidth) + 'px';
self.drawInteractiveLayer_();
- // Do pan on the fly (if not using excanvas).
+ // Do pan on the fly.
if (dynamic) {
doPan();
}
isPanning = false;
Dygraph.removeEvent(topElem, 'mousemove', onPan);
Dygraph.removeEvent(topElem, 'mouseup', onPanEnd);
- // If using excanvas, do pan now.
+ // If on a slower device, do pan now.
if (!dynamic) {
doPan();
}
addTouchEvents = function(elem, fn) {
var types = ['touchstart', 'touchend', 'touchmove', 'touchcancel'];
for (var i = 0; i < types.length; i++) {
- self.dygraph_.addEvent(elem, types[i], fn);
+ self.dygraph_.addAndTrackEvent(elem, types[i], fn);
}
};
this.setDefaultOption_('panEdgeFraction', 0.0001);
var dragStartEvent = window.opera ? 'mousedown' : 'dragstart';
- this.dygraph_.addEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart);
- this.dygraph_.addEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart);
+ this.dygraph_.addAndTrackEvent(this.leftZoomHandle_, dragStartEvent, onZoomStart);
+ this.dygraph_.addAndTrackEvent(this.rightZoomHandle_, dragStartEvent, onZoomStart);
- if (this.isUsingExcanvas_) {
- this.dygraph_.addEvent(this.iePanOverlay_, 'mousedown', onPanStart);
- } else {
- this.dygraph_.addEvent(this.fgcanvas_, 'mousedown', onPanStart);
- this.dygraph_.addEvent(this.fgcanvas_, 'mousemove', onCanvasHover);
- }
+ this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousedown', onPanStart);
+ this.dygraph_.addAndTrackEvent(this.fgcanvas_, 'mousemove', onCanvasHover);
// Touch events
if (this.hasTouchInterface_) {
try {
this.drawMiniPlot_();
} catch(ex) {
- Dygraph.warn(ex);
+ console.warn(ex);
}
var margin = 0.5;
- this.bgcanvas_ctx_.lineWidth = 1;
- ctx.strokeStyle = 'gray';
+ this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorBackgroundLineWidth');
+ ctx.strokeStyle = this.getOption_('rangeSelectorBackgroundStrokeColor');
ctx.beginPath();
ctx.moveTo(margin, margin);
ctx.lineTo(margin, this.canvasRect_.h-margin);
*/
rangeSelector.prototype.drawMiniPlot_ = function() {
var fillStyle = this.getOption_('rangeSelectorPlotFillColor');
+ var fillGradientStyle = this.getOption_('rangeSelectorPlotFillGradientColor');
var strokeStyle = this.getOption_('rangeSelectorPlotStrokeColor');
if (!fillStyle && !strokeStyle) {
return;
var dataPoint = combinedSeriesData.data[i];
var x = ((dataPoint[0] !== null) ? ((dataPoint[0] - xExtremes[0])*xFact) : NaN);
var y = ((dataPoint[1] !== null) ? (canvasHeight - (dataPoint[1] - combinedSeriesData.yMin)*yFact) : NaN);
+
+ // Skip points that don't change the x-value. Overly fine-grained points
+ // can cause major slowdowns with the ctx.fill() call below.
+ if (!stepPlot && prevX !== null && Math.round(x) == Math.round(prevX)) {
+ continue;
+ }
+
if (isFinite(x) && isFinite(y)) {
if(prevX === null) {
ctx.lineTo(x, canvasHeight);
if (fillStyle) {
var lingrad = this.bgcanvas_ctx_.createLinearGradient(0, 0, 0, canvasHeight);
- lingrad.addColorStop(0, 'white');
+ if (fillGradientStyle) {
+ lingrad.addColorStop(0, fillGradientStyle);
+ }
lingrad.addColorStop(1, fillStyle);
this.bgcanvas_ctx_.fillStyle = lingrad;
ctx.fill();
if (strokeStyle) {
this.bgcanvas_ctx_.strokeStyle = strokeStyle;
- this.bgcanvas_ctx_.lineWidth = 1.5;
+ this.bgcanvas_ctx_.lineWidth = this.getOption_('rangeSelectorPlotLineWidth');
ctx.stroke();
}
};
/**
* @private
- * Computes and returns the combinded series data along with min/max for the mini plot.
- * @return {Object} An object containing combinded series array, ymin, ymax.
+ * Computes and returns the combined series data along with min/max for the mini plot.
+ * The combined series consists of averaged values for all series.
+ * When series have error bars, the error bars are ignored.
+ * @return {Object} An object containing combined series array, ymin, ymax.
*/
rangeSelector.prototype.computeCombinedSeriesAndLimits_ = function() {
- var data = this.dygraph_.rawData_;
+ var g = this.dygraph_;
var logscale = this.getOption_('logscale');
-
- // Create a combined series (average of all series values).
- var combinedSeries = [];
- var sum;
- var count;
- var mutipleValues;
- var i, j, k;
- var xVal, yVal;
-
- // Find out if data has multiple values per datapoint.
- // Go to first data point that actually has values (see http://code.google.com/p/dygraphs/issues/detail?id=246)
- for (i = 0; i < data.length; i++) {
- if (data[i].length > 1 && data[i][1] !== null) {
- mutipleValues = typeof data[i][1] != 'number';
- if (mutipleValues) {
- sum = [];
- count = [];
- for (k = 0; k < data[i][1].length; k++) {
- sum.push(0);
- count.push(0);
- }
- }
- break;
- }
+ var i;
+
+ // Select series to combine. By default, all series are combined.
+ var numColumns = g.numColumns();
+ var labels = g.getLabels();
+ var includeSeries = new Array(numColumns);
+ var anySet = false;
+ for (i = 1; i < numColumns; i++) {
+ var include = this.getOption_('showInRangeSelector', labels[i]);
+ includeSeries[i] = include;
+ if (include !== null) anySet = true; // it's set explicitly for this series
+ }
+ if (!anySet) {
+ for (i = 0; i < includeSeries.length; i++) includeSeries[i] = true;
}
- for (i = 0; i < data.length; i++) {
- var dataPoint = data[i];
- xVal = dataPoint[0];
-
- if (mutipleValues) {
- for (k = 0; k < sum.length; k++) {
- sum[k] = count[k] = 0;
- }
- } else {
- sum = count = 0;
- }
-
- for (j = 1; j < dataPoint.length; j++) {
- if (this.dygraph_.visibility()[j-1]) {
- var y;
- if (mutipleValues) {
- for (k = 0; k < sum.length; k++) {
- y = dataPoint[j][k];
- if (y === null || isNaN(y)) continue;
- sum[k] += y;
- count[k]++;
- }
- } else {
- y = dataPoint[j];
- if (y === null || isNaN(y)) continue;
- sum += y;
- count++;
- }
- }
- }
-
- if (mutipleValues) {
- for (k = 0; k < sum.length; k++) {
- sum[k] /= count[k];
- }
- yVal = sum.slice(0);
- } else {
- yVal = sum/count;
+ // Create a combined series (average of selected series values).
+ // TODO(danvk): short-circuit if there's only one series.
+ var rolledSeries = [];
+ var dataHandler = g.dataHandler_;
+ var options = g.attributes_;
+ for (i = 1; i < g.numColumns(); i++) {
+ if (!includeSeries[i]) continue;
+ var series = dataHandler.extractSeries(g.rawData_, i, options);
+ if (g.rollPeriod() > 1) {
+ series = dataHandler.rollingAverage(series, g.rollPeriod(), options);
}
- combinedSeries.push([xVal, yVal]);
+ rolledSeries.push(series);
}
- // Account for roll period, fractions.
- combinedSeries = this.dygraph_.rollingAverage(combinedSeries, this.dygraph_.rollPeriod_);
-
- if (typeof combinedSeries[0][1] != 'number') {
- for (i = 0; i < combinedSeries.length; i++) {
- yVal = combinedSeries[i][1];
- combinedSeries[i][1] = yVal[0];
- }
+ var combinedSeries = [];
+ for (i = 0; i < rolledSeries[0].length; i++) {
+ var sum = 0;
+ var count = 0;
+ for (var j = 0; j < rolledSeries.length; j++) {
+ var y = rolledSeries[j][i][1];
+ if (y === null || isNaN(y)) continue;
+ count++;
+ sum += y;
+ }
+ combinedSeries.push([rolledSeries[0][i][0], sum / count]);
}
// Compute the y range.
var yMin = Number.MAX_VALUE;
var yMax = -Number.MAX_VALUE;
for (i = 0; i < combinedSeries.length; i++) {
- yVal = combinedSeries[i][1];
+ var yVal = combinedSeries[i][1];
if (yVal !== null && isFinite(yVal) && (!logscale || yVal > 0)) {
yMin = Math.min(yMin, yVal);
yMax = Math.max(yMax, yVal);
var height = this.canvasRect_.h - margin;
var zoomHandleStatus = this.getZoomHandleStatus_();
- ctx.strokeStyle = 'black';
+ ctx.strokeStyle = this.getOption_('rangeSelectorForegroundStrokeColor');
+ ctx.lineWidth = this.getOption_('rangeSelectorForegroundLineWidth');
if (!zoomHandleStatus.isZoomed) {
ctx.beginPath();
ctx.moveTo(margin, margin);
ctx.lineTo(width, height);
ctx.lineTo(width, margin);
ctx.stroke();
- if (this.iePanOverlay_) {
- this.iePanOverlay_.style.display = 'none';
- }
} else {
var leftHandleCanvasPos = Math.max(margin, zoomHandleStatus.leftHandlePos - this.canvasRect_.x);
var rightHandleCanvasPos = Math.min(width, zoomHandleStatus.rightHandlePos - this.canvasRect_.x);
- ctx.fillStyle = 'rgba(240, 240, 240, 0.6)';
+ ctx.fillStyle = 'rgba(240, 240, 240, ' + this.getOption_('rangeSelectorAlpha').toString() + ')';
ctx.fillRect(0, 0, leftHandleCanvasPos, this.canvasRect_.h);
ctx.fillRect(rightHandleCanvasPos, 0, this.canvasRect_.w - rightHandleCanvasPos, this.canvasRect_.h);
ctx.lineTo(rightHandleCanvasPos, margin);
ctx.lineTo(width, margin);
ctx.stroke();
-
- if (this.isUsingExcanvas_) {
- this.iePanOverlay_.style.width = (rightHandleCanvasPos - leftHandleCanvasPos) + 'px';
- this.iePanOverlay_.style.left = leftHandleCanvasPos + 'px';
- this.iePanOverlay_.style.height = height + 'px';
- this.iePanOverlay_.style.display = 'inline';
- }
}
};
projects / dygraphs.git / blobdiff