* whether the input data contains error ranges. For a complete list of
* options, see http://dygraphs.com/options.html.
*/
-var Dygraph = function(div, data, opts) {
- if (arguments.length > 0) {
- if (arguments.length == 4) {
- // Old versions of dygraphs took in the series labels as a constructor
- // parameter. This doesn't make sense anymore, but it's easy to continue
- // to support this usage.
- this.warn("Using deprecated four-argument dygraph constructor");
- this.__old_init__(div, data, arguments[2], arguments[3]);
- } else {
- this.__init__(div, data, opts);
- }
+var Dygraph = function(div, data, opts, opt_fourth_param) {
+ if (opt_fourth_param !== undefined) {
+ // Old versions of dygraphs took in the series labels as a constructor
+ // parameter. This doesn't make sense anymore, but it's easy to continue
+ // to support this usage.
+ this.warn("Using deprecated four-argument dygraph constructor");
+ this.__old_init__(div, data, opts, opt_fourth_param);
+ } else {
+ this.__init__(div, data, opts);
}
};
Dygraph.DEFAULT_ATTRS = {
highlightCircleSize: 3,
highlightSeriesOpts: null,
- highlightSeriesBackgroundFade: 0,
- highlightSeriesAnimated: false,
+ highlightSeriesBackgroundAlpha: 0.5,
labelsDivWidth: 250,
labelsDivStyles: {
var sources = [];
sources.push(this.attrs_);
- if (this.user_attrs_) sources.push(this.user_attrs_);
- if (this.user_attrs_ && seriesName) {
- if (this.user_attrs_.hasOwnProperty(seriesName)) {
- sources.push(this.user_attrs_[seriesName]);
- }
- if (seriesName === this.highlightSet_ &&
- this.user_attrs_.hasOwnProperty('highlightSeriesOpts')) {
- sources.push(this.user_attrs_['highlightSeriesOpts']);
+ if (this.user_attrs_) {
+ sources.push(this.user_attrs_);
+ if (seriesName) {
+ if (this.user_attrs_.hasOwnProperty(seriesName)) {
+ sources.push(this.user_attrs_[seriesName]);
+ }
+ if (seriesName === this.highlightSet_ &&
+ this.user_attrs_.hasOwnProperty('highlightSeriesOpts')) {
+ sources.push(this.user_attrs_['highlightSeriesOpts']);
+ }
}
}
var dygraph = this;
this.mouseMoveHandler = function(e) {
- dygraph.mouseMove_(e);
+ dygraph.mouseMove_(e);
};
Dygraph.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler);
this.mouseOutHandler = function(e) {
- dygraph.mouseOut_(e);
+ dygraph.mouseOut_(e);
};
Dygraph.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler);
// remove mouse event handlers
Dygraph.removeEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler);
Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler);
+ Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseUpHandler_);
removeRecursive(this.maindiv_);
var nullOut = function(obj) {
"top": "0px",
"left": (this.width_ - divWidth - 2) + "px",
"background": "white",
+ "lineHeight": "normal",
"textAlign": "left",
"overflow": "hidden"};
Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
div.className = "dygraph-legend";
for (var name in messagestyle) {
if (messagestyle.hasOwnProperty(name)) {
- div.style[name] = messagestyle[name];
+ try {
+ div.style[name] = messagestyle[name];
+ } catch (e) {
+ this.warn("You are using unsupported css properties for your browser in labelsDivStyles");
+ }
}
}
this.graphDiv.appendChild(div);
prevEndX: null, // pixel coordinates
prevEndY: null, // pixel coordinates
prevDragDirection: null,
+ cancelNextDblclick: false, // see comment in dygraph-interaction-model.js
// The value on the left side of the graph when a pan operation starts.
initialLeftmostDate: null,
context.py = Dygraph.findPosY(g.canvas_);
context.dragStartX = g.dragGetX_(event, context);
context.dragStartY = g.dragGetY_(event, context);
+ context.cancelNextDblclick = false;
}
};
// If the user releases the mouse button during a drag, but not over the
// canvas, then it doesn't count as a zooming action.
- Dygraph.addEvent(document, 'mouseup', function(event) {
+ this.mouseUpHandler_ = function(event) {
if (context.isZooming || context.isPanning) {
context.isZooming = false;
context.dragStartX = null;
delete self.axes_[i].dragValueRange;
}
}
- });
+ };
+
+ Dygraph.addEvent(document, 'mouseup', this.mouseUpHandler_);
};
/**
* @private
*/
Dygraph.prototype.findClosestRow = function(domX) {
- var minDistX = null;
+ var minDistX = Infinity;
var idx = -1;
var points = this.layout_.points;
var l = points.length;
for (var i = 0; i < l; i++) {
var point = points[i];
- if (point === null) continue;
+ if (!Dygraph.isValidPoint(point, true)) continue;
var dist = Math.abs(point.canvasx - domX);
- if (minDistX !== null && dist >= minDistX) continue;
- minDistX = dist;
- idx = i;
+ if (dist < minDistX) {
+ minDistX = dist;
+ idx = i;
+ }
}
return this.idxToRow_(idx);
};
/**
- * Given canvas X,Y coordinates, find the closest point
+ * Given canvas X,Y coordinates, find the closest point.
+ *
+ * This finds the individual data point across all visible series
+ * that's closest to the supplied DOM coordinates using the standard
+ * Euclidean X,Y distance.
+ *
* @param {Number} domX graph-relative DOM X coordinate
* @param {Number} domY graph-relative DOM Y coordinate
* Returns: {row, seriesName, point}
* @private
*/
Dygraph.prototype.findClosestPoint = function(domX, domY) {
- var minDist = null;
+ var minDist = Infinity;
var idx = -1;
var points = this.layout_.points;
var dist, dx, dy, point, closestPoint, closestSeries;
var len = this.layout_.setPointsLengths[setIdx];
for (var i = 0; i < len; ++i) {
var point = points[first + i];
- if (point === null) continue;
+ if (!Dygraph.isValidPoint(point)) continue;
dx = point.canvasx - domX;
dy = point.canvasy - domY;
dist = dx * dx + dy * dy;
- if (minDist !== null && dist >= minDist) continue;
- minDist = dist;
- closestPoint = point;
- closestSeries = setIdx;
- idx = i;
+ if (dist < minDist) {
+ minDist = dist;
+ closestPoint = point;
+ closestSeries = setIdx;
+ idx = i;
+ }
}
}
var name = this.layout_.setNames[closestSeries];
return {
- row: idx,
+ row: idx + this.getLeftBoundary_(),
seriesName: name,
point: closestPoint
};
/**
* Given canvas X,Y coordinates, find the touched area in a stacked graph.
+ *
+ * This first finds the X data point closest to the supplied DOM X coordinate,
+ * then finds the series which puts the Y coordinate on top of its filled area,
+ * using linear interpolation between adjacent point pairs.
+ *
* @param {Number} domX graph-relative DOM X coordinate
* @param {Number} domY graph-relative DOM Y coordinate
* Returns: {row, seriesName, point}
*/
Dygraph.prototype.findStackedPoint = function(domX, domY) {
var row = this.findClosestRow(domX);
+ var boundary = this.getLeftBoundary_();
+ var rowIdx = row - boundary;
var points = this.layout_.points;
var closestPoint, closestSeries;
for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
var first = this.layout_.setPointsOffsets[setIdx];
var len = this.layout_.setPointsLengths[setIdx];
- if (row >= len) continue;
- var p1 = points[first + row];
+ if (rowIdx >= len) continue;
+ var p1 = points[first + rowIdx];
+ if (!Dygraph.isValidPoint(p1)) continue;
var py = p1.canvasy;
- if (domX > p1.canvasx && row + 1 < len) {
+ if (domX > p1.canvasx && rowIdx + 1 < len) {
// interpolate series Y value using next point
- var p2 = points[first + row + 1];
- var dx = p2.canvasx - p1.canvasx;
- if (dx > 0) {
- var r = (domX - p1.canvasx) / dx;
- py += r * (p2.canvasy - p1.canvasy);
+ var p2 = points[first + rowIdx + 1];
+ if (Dygraph.isValidPoint(p2)) {
+ var dx = p2.canvasx - p1.canvasx;
+ if (dx > 0) {
+ var r = (domX - p1.canvasx) / dx;
+ py += r * (p2.canvasy - p1.canvasy);
+ }
}
- } else if (domX < p1.canvasx && row > 0) {
+ } else if (domX < p1.canvasx && rowIdx > 0) {
// interpolate series Y value using previous point
- var p0 = points[first + row - 1];
- var dx = p1.canvasx - p0.canvasx;
- if (dx > 0) {
- var r = (p1.canvasx - domX) / dx;
- py += r * (p0.canvasy - p1.canvasy);
+ var p0 = points[first + rowIdx - 1];
+ if (Dygraph.isValidPoint(p0)) {
+ var dx = p1.canvasx - p0.canvasx;
+ if (dx > 0) {
+ var r = (p1.canvasx - domX) / dx;
+ py += r * (p0.canvasy - p1.canvasy);
+ }
}
}
// Stop if the point (domX, py) is above this series' upper edge
- if (setIdx > 0 && py >= domY) break;
- closestPoint = p1;
- closestSeries = setIdx;
+ if (setIdx == 0 || py < domY) {
+ closestPoint = p1;
+ closestSeries = setIdx;
+ }
}
var name = this.layout_.setNames[closestSeries];
return {
var canvasx = canvasCoords[0];
var canvasy = canvasCoords[1];
- var mouseoverCallback = this.attr_("mouseoverCallback");
- if (mouseoverCallback) {
- var highlightRow = this.idxToRow_(idx);
- var ret = mouseoverCallback(this, event);
- if (ret) return;
- }
-
var highlightSeriesOpts = this.attr_("highlightSeriesOpts");
var selectionChanged = false;
if (highlightSeriesOpts) {
};
/**
+ * Fetch left offset from first defined boundaryIds record (see bug #236).
+ */
+Dygraph.prototype.getLeftBoundary_ = function() {
+ for (var i = 0; i < this.boundaryIds_.length; i++) {
+ if (this.boundaryIds_[i] !== undefined) {
+ return this.boundaryIds_[i][0];
+ }
+ }
+ return 0;
+};
+
+/**
* Transforms layout_.points index into data row number.
* @param int layout_.points index
* @return int row number, or -1 if none could be found.
Dygraph.prototype.idxToRow_ = function(idx) {
if (idx < 0) return -1;
- // make sure that you get the boundaryIds record which is also defined (see bug #236)
- var boundaryIdx = -1;
- for (var i = 0; i < this.boundaryIds_.length; i++) {
- if (this.boundaryIds_[i] !== undefined) {
- boundaryIdx = i;
- break;
- }
- }
- if (boundaryIdx < 0) return -1;
+ var boundary = this.getLeftBoundary_();
for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
var set = this.layout_.datasets[setIdx];
if (idx < set.length) {
- return this.boundaryIds_[boundaryIdx][0] + idx;
+ return boundary + idx;
}
idx -= set.length;
}
*/
Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
var labelsDiv = this.attr_("labelsDiv");
+ if (!labelsDiv) return;
+
var sizeSpan = document.createElement('span');
// Calculates the width of 1em in pixels for the legend.
sizeSpan.setAttribute('style', 'margin: 0; padding: 0 0 0 1em; border: 0;');
Dygraph.prototype.animateSelection_ = function(direction) {
var totalSteps = 10;
var millis = 30;
- if (this.fadeLevel === undefined) {
- this.fadeLevel = 0;
- this.animateId = 0;
- }
+ if (this.fadeLevel === undefined) this.fadeLevel = 0;
+ if (this.animateId === undefined) this.animateId = 0;
var start = this.fadeLevel;
var steps = direction < 0 ? start : totalSteps - start;
if (steps <= 0) {
var thisId = ++this.animateId;
var that = this;
- Dygraph.repeatAndCleanup(function(n) {
- // ignore simultaneous animations
- if (that.animateId != thisId) return;
-
- that.fadeLevel += direction;
- if (that.fadeLevel === 0) {
- that.clearSelection();
- } else {
- that.updateSelection_(that.fadeLevel / totalSteps);
- }
- },
- steps, millis, function() {});
+ Dygraph.repeatAndCleanup(
+ function(n) {
+ // ignore simultaneous animations
+ if (that.animateId != thisId) return;
+
+ that.fadeLevel += direction;
+ if (that.fadeLevel === 0) {
+ that.clearSelection();
+ } else {
+ that.updateSelection_(that.fadeLevel / totalSteps);
+ }
+ },
+ steps, millis, function() {});
};
/**
var ctx = this.canvas_ctx_;
if (this.attr_('highlightSeriesOpts')) {
ctx.clearRect(0, 0, this.width_, this.height_);
- var alpha = this.attr_('highlightSeriesBackgroundFade');
+ var alpha = 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
if (alpha) {
- if (this.attr_('highlightSeriesAnimate')) {
+ // Activating background fade includes an animation effect for a gradual
+ // fade. TODO(klausw): make this independently configurable if it causes
+ // issues? Use a shared preference to control animations?
+ var animateBackgroundFade = true;
+ if (animateBackgroundFade) {
if (opt_animFraction === undefined) {
// start a new animation
this.animateSelection_(1);
ctx.fillRect(0, 0, this.width_, this.height_);
}
var setIdx = this.datasetIndexFromSetName_(this.highlightSet_);
- var underlay = this.attr_('highlightUnderlay');
- if (underlay) underlay(this, ctx, setIdx);
this.plotter_._drawLine(ctx, setIdx);
} else if (this.previousVerticalX_ >= 0) {
// Determine the maximum highlight circle size.
if (!Dygraph.isOK(pt.canvasy)) continue;
var circleSize = this.attr_('highlightCircleSize', pt.name);
- ctx.beginPath();
- ctx.fillStyle = this.plotter_.colors[pt.name];
- ctx.arc(canvasx, pt.canvasy, circleSize, 0, 2 * Math.PI, false);
- ctx.fill();
+ var callback = this.attr_("drawHighlightPointCallback", pt.name);
+ var color = this.plotter_.colors[pt.name];
+ if (!callback) {
+ callback = Dygraph.Circles.DEFAULT;
+ }
+ ctx.lineWidth = this.attr_('strokeWidth', pt.name);
+ ctx.strokeStyle = color;
+ ctx.fillStyle = color;
+ callback(this.g, pt.name, ctx, canvasx, pt.canvasy,
+ color, circleSize);
}
ctx.restore();
var pos = 0;
if (row !== false) {
- for (var i = 0; i < this.boundaryIds_.length; i++) {
- if (this.boundaryIds_[i] !== undefined) {
- row -= this.boundaryIds_[i][0];
- break;
- }
- }
+ row -= this.getLeftBoundary_();
}
var changed = false;
point = this.layout_.unstackPointAtIndex(pos+row);
}
- this.selPoints_.push(point);
+ if (!(point.yval === null)) this.selPoints_.push(point);
}
pos += set.length;
}
for (var row=0; row<this.layout_.points.length; row++ ) {
if (this.layout_.points[row].x == this.selPoints_[0].x) {
- return row + this.boundaryIds_[0][0];
+ return row + this.getLeftBoundary_();
}
}
return -1;
// rolling averages.
this.rolledSeries_ = [null]; // x-axis is the first series and it's special
for (var i = 1; i < this.numColumns(); i++) {
- var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i);
- var logScale = this.attr_('logscale', i);
- var series = this.extractSeries_(this.rawData_, i, logScale, connectSeparatedPoints);
+ var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong
+ var series = this.extractSeries_(this.rawData_, i, logScale);
series = this.rollingAverage(series, this.rollPeriod_);
this.rolledSeries_.push(series);
}
}
actual_y = series[j][1];
+ if (actual_y === null) {
+ series[j] = [x, null];
+ continue;
+ }
+
cumulative_y[x] += actual_y;
series[j] = [x, cumulative_y[x]];
datasets[i] = series;
}
+ // For stacked graphs, a NaN value for any point in the sum should create a
+ // clean gap in the graph. Back-propagate NaNs to all points at this X value.
+ if (this.attr_("stackedGraph")) {
+ for (k = datasets.length - 1; k >= 0; --k) {
+ // Use the first nonempty dataset to get X values.
+ if (!datasets[k]) continue;
+ for (j = 0; j < datasets[k].length; j++) {
+ var x = datasets[k][j][0];
+ if (isNaN(cumulative_y[x])) {
+ // Set all Y values to NaN at that X value.
+ for (i = datasets.length - 1; i >= 0; i--) {
+ if (!datasets[i]) continue;
+ datasets[i][j][1] = NaN;
+ }
+ }
+ }
+ break;
+ }
+ }
+
return [ datasets, extremes, boundaryIds ];
};
*
* @private
*/
-Dygraph.prototype.extractSeries_ = function(rawData, i, logScale, connectSeparatedPoints) {
+Dygraph.prototype.extractSeries_ = function(rawData, i, logScale) {
var series = [];
for (var j = 0; j < rawData.length; j++) {
var x = rawData[j][0];
var point = rawData[j][i];
if (logScale) {
// On the log scale, points less than zero do not exist.
- // This will create a gap in the chart. Note that this ignores
- // connectSeparatedPoints.
+ // This will create a gap in the chart.
if (point <= 0) {
point = null;
}
- series.push([x, point]);
- } else {
- if (point !== null || !connectSeparatedPoints) {
- series.push([x, point]);
- }
}
+ series.push([x, point]);
}
return series;
};
// TODO(danvk): use Dygraph.numberValueFormatter here?
/** @private (shut up, jsdoc!) */
this.attrs_.axes.x.valueFormatter = function(x) { return x; };
- this.attrs_.axes.x.ticker = Dygraph.numericTicks;
+ this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
}
};
/** @private (shut up, jsdoc!) */
this.attrs_.axes.x.valueFormatter = function(x) { return x; };
this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter;
- this.attrs_.axes.x.ticker = Dygraph.numericTicks;
+ this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
return data;
}
};
} else if (indepType == 'number') {
this.attrs_.xValueParser = function(x) { return parseFloat(x); };
this.attrs_.axes.x.valueFormatter = function(x) { return x; };
- this.attrs_.axes.x.ticker = Dygraph.numericTicks;
+ this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks;
this.attrs_.axes.x.axisLabelFormatter = this.attrs_.axes.x.valueFormatter;
} else {
this.error("only 'date', 'datetime' and 'number' types are supported for " +