}
};
+/**
+ * Standard plotters. These may be used by clients.
+ * Available plotters are:
+ * - Dygraph.Plotters.linePlotter: draws central lines (most common)
+ * - Dygraph.Plotters.errorPlotter: draws error bars
+ * - Dygraph.Plotters.fillPlotter: draws fills under lines (used with fillGraph)
+ *
+ * By default, the plotter is [fillPlotter, errorPlotter, linePlotter].
+ * This causes all the lines to be drawn over all the fills/error bars.
+ */
+Dygraph.Plotters = DygraphCanvasRenderer._Plotters;
+
// Default attribute values.
Dygraph.DEFAULT_ATTRS = {
stepPlot: false,
avoidMinZero: false,
+ drawAxesAtZero: false,
// Sizes of the various chart labels.
titleHeight: 28,
rangeSelectorPlotStrokeColor: "#808FAB",
rangeSelectorPlotFillColor: "#A7B1C4",
+ // The ordering here ensures that central lines always appear above any
+ // fill bars/error bars.
+ plotter: [
+ Dygraph.Plotters.fillPlotter,
+ Dygraph.Plotters.errorPlotter,
+ Dygraph.Plotters.linePlotter
+ ],
+
// per-axis options
axes: {
x: {
// TODO(nikhilk): Add any other stackedGraph checks here.
}
+ // These two options have a bad interaction. See issue 359.
+ if (attrs.showRangeSelector && attrs.animatedZooms) {
+ this.warn('You should not set animatedZooms=true when using the range selector.');
+ attrs.animatedZooms = false;
+ }
+
// Dygraphs has many options, some of which interact with one another.
// To keep track of everything, we maintain two sets of options:
//
this.datasetIndex_ = [];
this.registeredEvents_ = [];
+ this.eventListeners_ = {};
+
+ this.attributes_ = new DygraphOptions(this);
// Create the containing DIV and other interactive elements
this.createInterface_();
// Activate plugins.
this.plugins_ = [];
for (var i = 0; i < Dygraph.PLUGINS.length; i++) {
- var plugin = Dygraph.PLUGINS[i];
- var pluginInstance = new plugin();
+ var Plugin = Dygraph.PLUGINS[i];
+ var pluginInstance = new Plugin();
var pluginDict = {
plugin: pluginInstance,
events: {},
// At this point, plugins can no longer register event handlers.
// Construct a map from event -> ordered list of [callback, plugin].
- this.eventListeners_ = {};
for (var i = 0; i < this.plugins_.length; i++) {
var plugin_dict = this.plugins_[i];
for (var eventName in plugin_dict.events) {
* @private
*/
Dygraph.prototype.cascadeEvents_ = function(name, extra_props) {
- if (!name in this.eventListeners_) return true;
+ if (!(name in this.eventListeners_)) return true;
// QUESTION: can we use objects & prototypes to speed this up?
var e = {
* Axis is an optional parameter. Can be set to 'x' or 'y'.
*
* The zoomed status for an axis is set whenever a user zooms using the mouse
- * or when the dateWindow or valueRange are updated (unless the isZoomedIgnoreProgrammaticZoom
- * option is also specified).
+ * or when the dateWindow or valueRange are updated (unless the
+ * isZoomedIgnoreProgrammaticZoom option is also specified).
*/
Dygraph.prototype.isZoomed = function(axis) {
- if (axis == null) return this.zoomed_x_ || this.zoomed_y_;
+ if (axis === null || axis === undefined) {
+ return this.zoomed_x_ || this.zoomed_y_;
+ }
if (axis === 'x') return this.zoomed_x_;
if (axis === 'y') return this.zoomed_y_;
throw "axis parameter is [" + axis + "] must be null, 'x' or 'y'.";
}
// </REMOVE_FOR_COMBINED>
+ // Building an array which we peruse in backwards order to find the correct value.
+ // Options are checked in this order:
+ // series, axis, user attrs, global attrs.
+ // TODO(konigsberg): Can this be made faster by starting with the series and working outward,
+ // rather than building an array?
+
var sources = [];
sources.push(this.attrs_);
if (this.user_attrs_) {
if (this.user_attrs_.hasOwnProperty(seriesName)) {
sources.push(this.user_attrs_[seriesName]);
}
+
+ // TODO(konigsberg): This special case ought to be documented.
if (seriesName === this.highlightSet_ &&
this.user_attrs_.hasOwnProperty('highlightSeriesOpts')) {
- sources.push(this.user_attrs_['highlightSeriesOpts']);
+ sources.push(this.user_attrs_.highlightSeriesOpts);
}
}
}
break;
}
}
- return ret;
+
+ var computedValue = seriesName ? this.attributes_.findForSeries(name, seriesName) : this.attributes_.find(name);
+
+ if (ret !== computedValue) {
+ console.log("Mismatch", name, seriesName, ret, computedValue);
+ } else {
+ console.log("Match", name, seriesName, ret, computedValue);
+ }
+ return computedValue;
};
/**
if (this.attr_('showRangeSelector')) {
// The range selector must be created here so that its canvases and contexts get created here.
// For some reason, if the canvases and contexts don't get created here, things don't work in IE.
- // The range selector also sets xAxisHeight in order to reserve space.
this.rangeSelector_ = new DygraphRangeSelector(this);
}
}
var dygraph = this;
-
+
this.mouseMoveHandler = function(e) {
dygraph.mouseMove_(e);
};
this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler);
-
+
this.mouseOutHandler = function(e) {
dygraph.mouseOut_(e);
};
node.removeChild(node.firstChild);
}
};
-
+
for (var idx = 0; idx < this.registeredEvents_.length; idx++) {
var reg = this.registeredEvents_[idx];
Dygraph.removeEvent(reg.elem, reg.type, reg.fn);
* @private
*/
Dygraph.prototype.setColors_ = function() {
- var num = this.attr_("labels").length - 1;
+ var labels = this.getLabels();
+ var num = labels.length - 1;
this.colors_ = [];
+ this.colorsMap_ = {};
var colors = this.attr_('colors');
var i;
if (!colors) {
// alternate colors for high contrast.
var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2);
var hue = (1.0 * idx/ (1 + num));
- this.colors_.push(Dygraph.hsvToRGB(hue, sat, val));
+ var colorStr = Dygraph.hsvToRGB(hue, sat, val);
+ this.colors_.push(colorStr);
+ this.colorsMap_[labels[i]] = colorStr;
}
} else {
for (i = 0; i < num; i++) {
if (!this.visibility()[i]) continue;
var colorStr = colors[i % colors.length];
this.colors_.push(colorStr);
+ this.colorsMap_[labels[1 + i]] = colorStr;
}
}
-
- this.plotter_.setColors(this.colors_);
};
/**
name: series_name,
column: idx,
visible: this.visibility()[idx - 1],
- color: this.plotter_.colors[series_name],
+ color: this.colorsMap_[series_name],
axis: 1 + this.seriesToAxisMap_[series_name]
};
};
boundedDates: null, // [minDate, maxDate]
boundedValues: null, // [[minValue, maxValue] ...]
+ // We cover iframes during mouse interactions. See comments in
+ // dygraph-utils.js for more info on why this is a good idea.
+ tarp: new Dygraph.IFrameTarp(),
+
// contextB is the same thing as this context object but renamed.
initializeMouseDown: function(event, g, contextB) {
// prevents mouse drags from selecting page text.
contextB.dragStartX = g.dragGetX_(event, contextB);
contextB.dragStartY = g.dragGetY_(event, contextB);
contextB.cancelNextDblclick = false;
+ contextB.tarp.cover();
}
};
delete self.axes_[i].dragValueRange;
}
}
+
+ context.tarp.uncover();
};
this.addEvent(document, 'mouseup', this.mouseUpHandler_);
newValueRanges = [];
for (i = 0; i < this.axes_.length; i++) {
var axis = this.axes_[i];
- newValueRanges.push(axis.valueRange != null ? axis.valueRange : axis.extremeRange);
+ newValueRanges.push((axis.valueRange !== null &&
+ axis.valueRange !== undefined) ?
+ axis.valueRange : axis.extremeRange);
}
}
*/
Dygraph.prototype.findClosestRow = function(domX) {
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 (!Dygraph.isValidPoint(point, true)) continue;
- var dist = Math.abs(point.canvasx - domX);
- if (dist < minDistX) {
- minDistX = dist;
- idx = i;
+ var pointIdx = -1, setIdx = -1;
+ var sets = this.layout_.points;
+ for (var i = 0; i < sets.length; i++) {
+ var points = sets[i];
+ var len = points.length;
+ for (var j = 0; j < len; j++) {
+ var point = points[j];
+ if (!Dygraph.isValidPoint(point, true)) continue;
+ var dist = Math.abs(point.canvasx - domX);
+ if (dist < minDistX) {
+ minDistX = dist;
+ setIdx = i;
+ pointIdx = j;
+ }
}
}
- return this.idxToRow_(idx);
+
+ // TODO(danvk): remove this function; it's trivial and has only one use.
+ return this.idxToRow_(setIdx, pointIdx);
};
/**
Dygraph.prototype.findClosestPoint = function(domX, domY) {
var minDist = Infinity;
var idx = -1;
- var points = this.layout_.points;
var dist, dx, dy, point, closestPoint, closestSeries;
for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
- var first = this.layout_.setPointsOffsets[setIdx];
- var len = this.layout_.setPointsLengths[setIdx];
- for (var i = 0; i < len; ++i) {
- var point = points[first + i];
+ var points = this.layout_.points[setIdx];
+ for (var i = 0; i < points.length; ++i) {
+ var point = points[i];
if (!Dygraph.isValidPoint(point)) continue;
dx = point.canvasx - domX;
dy = point.canvasy - domY;
var row = this.findClosestRow(domX);
var boundary = this.getLeftBoundary_();
var rowIdx = row - boundary;
- var points = this.layout_.points;
+ var sets = 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 (rowIdx >= len) continue;
- var p1 = points[first + rowIdx];
+ var points = this.layout_.points[setIdx];
+ if (rowIdx >= points.length) continue;
+ var p1 = points[rowIdx];
if (!Dygraph.isValidPoint(p1)) continue;
var py = p1.canvasy;
- if (domX > p1.canvasx && rowIdx + 1 < len) {
+ if (domX > p1.canvasx && rowIdx + 1 < points.length) {
// interpolate series Y value using next point
- var p2 = points[first + rowIdx + 1];
+ var p2 = points[rowIdx + 1];
if (Dygraph.isValidPoint(p2)) {
var dx = p2.canvasx - p1.canvasx;
if (dx > 0) {
}
} else if (domX < p1.canvasx && rowIdx > 0) {
// interpolate series Y value using previous point
- var p0 = points[first + rowIdx - 1];
+ var p0 = points[rowIdx - 1];
if (Dygraph.isValidPoint(p0)) {
var dx = p1.canvasx - p0.canvasx;
if (dx > 0) {
}
}
// Stop if the point (domX, py) is above this series' upper edge
- if (setIdx == 0 || py < domY) {
+ if (setIdx === 0 || py < domY) {
closestPoint = p1;
closestSeries = setIdx;
}
Dygraph.prototype.mouseMove_ = function(event) {
// This prevents JS errors when mousing over the canvas before data loads.
var points = this.layout_.points;
- if (points === undefined) return;
+ if (points === undefined || points === null) return;
var canvasCoords = this.eventToDomCoords(event);
var canvasx = canvasCoords[0];
var highlightSeriesOpts = this.attr_("highlightSeriesOpts");
var selectionChanged = false;
- if (highlightSeriesOpts) {
+ if (highlightSeriesOpts && !this.lockedSet_) {
var closest;
if (this.attr_("stackedGraph")) {
closest = this.findStackedPoint(canvasx, canvasy);
* @return int row number, or -1 if none could be found.
* @private
*/
-Dygraph.prototype.idxToRow_ = function(idx) {
- if (idx < 0) return -1;
+Dygraph.prototype.idxToRow_ = function(setIdx, rowIdx) {
+ if (rowIdx < 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 boundary + idx;
- }
- idx -= set.length;
- }
- return -1;
+ return boundary + rowIdx;
+ // for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
+ // var set = this.layout_.datasets[setIdx];
+ // if (idx < set.length) {
+ // return boundary + idx;
+ // }
+ // idx -= set.length;
+ // }
+ // return -1;
};
Dygraph.prototype.animateSelection_ = function(direction) {
ctx.fillStyle = 'rgba(255,255,255,' + alpha + ')';
ctx.fillRect(0, 0, this.width_, this.height_);
}
- var setIdx = this.datasetIndexFromSetName_(this.highlightSet_);
- this.plotter_._drawLine(ctx, setIdx);
+
+ // Redraw only the highlighted series in the interactive canvas (not the
+ // static plot canvas, which is where series are usually drawn).
+ this.plotter_._renderLineChart(this.highlightSet_, ctx);
} else if (this.previousVerticalX_ >= 0) {
// Determine the maximum highlight circle size.
var maxCircleSize = 0;
* hover dots on the chart). Set to false to clear any selection.
* @param { seriesName } optional series name to highlight that series with the
* the highlightSeriesOpts setting.
+ * @param { locked } optional If true, keep seriesName selected when mousing
+ * over the graph, disabling closest-series highlighting. Call clearSelection()
+ * to unlock it.
*/
-Dygraph.prototype.setSelection = function(row, opt_seriesName) {
+Dygraph.prototype.setSelection = function(row, opt_seriesName, opt_locked) {
// Extract the points we've selected
this.selPoints_ = [];
- var pos = 0;
if (row !== false) {
row -= this.getLeftBoundary_();
for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
var set = this.layout_.datasets[setIdx];
if (row < set.length) {
- var point = this.layout_.points[pos+row];
+ var point = this.layout_.points[setIdx][row];
if (this.attr_("stackedGraph")) {
- point = this.layout_.unstackPointAtIndex(pos+row);
+ point = this.layout_.unstackPointAtIndex(setIdx, row);
}
- if (!(point.yval === null)) this.selPoints_.push(point);
+ if (point.yval !== null) this.selPoints_.push(point);
}
- pos += set.length;
}
} else {
if (this.lastRow_ >= 0) changed = true;
this.highlightSet_ = opt_seriesName;
}
+ if (opt_locked !== undefined) {
+ this.lockedSet_ = opt_locked;
+ }
+
if (changed) {
this.updateSelection_(undefined);
}
this.attr_("unhighlightCallback")(event);
}
- if (this.attr_("hideOverlayOnMouseOut")) {
+ if (this.attr_("hideOverlayOnMouseOut") && !this.lockedSet_) {
this.clearSelection();
}
};
Dygraph.prototype.clearSelection = function() {
this.cascadeEvents_('deselect', {});
+ this.lockedSet_ = false;
// Get rid of the overlay data
if (this.fadeLevel) {
this.animateSelection_(-1);
return -1;
}
- for (var row=0; row<this.layout_.points.length; row++ ) {
- if (this.layout_.points[row].x == this.selPoints_[0].x) {
- return row + this.getLeftBoundary_();
+ for (var setIdx = 0; setIdx < this.layout_.points.length; setIdx++) {
+ var points = this.layout_.points[setIdx];
+ for (var row = 0; row < points.length; row++) {
+ if (points[row].x == this.selPoints_[0].x) {
+ return row + this.getLeftBoundary_();
+ }
}
}
return -1;
// With custom bars, maxY is the max of the high values.
for (j = 0; j < series.length; j++) {
y = series[j][1][0];
- if (!y) continue;
+ if (y === null || isNaN(y)) continue;
var low = y - series[j][1][1];
var high = y + series[j][1][2];
if (low > y) low = y; // this can happen with custom bars,
this.computeYAxes_();
// Create a new plotter.
- if (this.plotter_) this.plotter_.clear();
+ if (this.plotter_) {
+ this.cascadeEvents_('clearChart');
+ this.plotter_.clear();
+ }
this.plotter_ = new DygraphCanvasRenderer(this,
this.hidden_,
this.hidden_ctx_,
// rolling averages.
this.rolledSeries_ = [null]; // x-axis is the first series and it's special
for (var i = 1; i < this.numColumns(); i++) {
- var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong
+ // var logScale = this.attr_('logscale', i); // TODO(klausw): this looks wrong // konigsberg thinks so too.
+ var logScale = this.attr_('logscale');
var series = this.extractSeries_(this.rawData_, i, logScale);
series = this.rollingAverage(series, this.rollPeriod_);
this.rolledSeries_.push(series);
for (i = num_series; i >= 1; i--) {
if (!this.visibility()[i - 1]) continue;
- // TODO(danvk): is this copy really necessary?
+ // Note: this copy _is_ necessary at the moment.
+ // If you remove it, it breaks zooming with error bars on.
+ // TODO(danvk): investigate further & write a test for this.
var series = [];
for (j = 0; j < rolledSeries[i].length; j++) {
series.push(rolledSeries[i][j]);
* @private
*/
Dygraph.prototype.renderGraph_ = function(is_initial_draw) {
+ this.cascadeEvents_('clearChart');
this.plotter_.clear();
+
+ if (this.attr_('underlayCallback')) {
+ // NOTE: we pass the dygraph object to this callback twice to avoid breaking
+ // users who expect a deprecated form of this callback.
+ this.attr_('underlayCallback')(
+ this.hidden_ctx_, this.layout_.getPlotArea(), this, this);
+ }
+
+ var e = {
+ canvas: this.hidden_,
+ drawingContext: this.hidden_ctx_
+ };
+ this.cascadeEvents_('willDrawChart', e);
this.plotter_.render();
+ this.cascadeEvents_('didDrawChart', e);
+
+ // TODO(danvk): is this a performance bottleneck when panning?
+ // The interaction canvas should already be empty in that situation.
this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
this.canvas_.height);
if (this.rangeSelector_) {
this.rangeSelector_.renderInteractiveLayer();
}
-
- this.cascadeEvents_('drawChart');
if (this.attr_("drawCallback") !== null) {
this.attr_("drawCallback")(this, is_initial_draw);
}
*
* This is where undesirable points (i.e. negative values on log scales and
* missing values through which we wish to connect lines) are dropped.
- *
+ * TODO(danvk): the "missing values" bit above doesn't seem right.
+ *
* @private
*/
Dygraph.prototype.extractSeries_ = function(rawData, i, logScale) {
+ // TODO(danvk): pre-allocate series here.
var series = [];
for (var j = 0; j < rawData.length; j++) {
var x = rawData[j][0];
*/
Dygraph.prototype.parseCSV_ = function(data) {
var ret = [];
- var lines = data.split("\n");
+ var line_delimiter = Dygraph.detectLineDelimiter(data);
+ var lines = data.split(line_delimiter || "\n");
var vals, j;
// Use the default delimiter or fall back to a tab if that makes sense.
for (i = 1; i < data[0].length; i++) {
this.attrs_.labels.push("Y" + i);
}
+ } else {
+ var num_labels = this.attr_("labels");
+ if (num_labels.length != data[0].length) {
+ this.error("Mismatch between number of labels (" + num_labels +
+ ") and number of columns in array (" + data[0].length + ")");
+ return null;
+ }
}
if (Dygraph.isDateLike(data[0][0])) {
num = Math.floor((num - 1) / 26);
}
return shortText;
- }
+ };
var cols = data.getNumberOfColumns();
var rows = data.getNumberOfRows();
this.predraw_();
} else if (typeof data == 'string') {
// Heuristic: a newline means it's CSV data. Otherwise it's an URL.
- if (data.indexOf('\n') >= 0) {
+ var line_delimiter = Dygraph.detectLineDelimiter(data);
+ if (line_delimiter) {
this.loadedEvent_(data);
} else {
var req = new XMLHttpRequest();
* called once -- all calls after the first will return immediately.
*/
Dygraph.addAnnotationRule = function() {
+ // TODO(danvk): move this function into plugins/annotations.js?
if (Dygraph.addedAnnotationCSS) return;
var rule = "border: 1px solid black; " +
projects / dygraphs.git / blobdiff