* 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);
}
};
// Default attribute values.
Dygraph.DEFAULT_ATTRS = {
highlightCircleSize: 3,
+ highlightSeriesOpts: null,
+ highlightSeriesBackgroundAlpha: 0.5,
labelsDivWidth: 250,
labelsDivStyles: {
sigFigs: null,
strokeWidth: 1.0,
+ strokeBorderWidth: 0,
+ strokeBorderColor: "white",
axisTickSize: 3,
axisLabelFontSize: 14,
Dygraph.HORIZONTAL = 1;
Dygraph.VERTICAL = 2;
+// Installed plugins, in order of precedence (most-general to most-specific).
+// Plugins are installed after they are defined, in plugins/install.js.
+Dygraph.PLUGINS = [
+];
+
// Used for initializing annotation CSS rules only once.
Dygraph.addedAnnotationCSS = false;
this.boundaryIds_ = [];
this.setIndexByName_ = {};
+ this.datasetIndex_ = [];
// 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 pluginDict = {
+ plugin: pluginInstance,
+ events: {},
+ options: {},
+ pluginOptions: {}
+ };
+
+ var handlers = pluginInstance.activate(this);
+ for (var eventName in handlers) {
+ pluginDict.events[eventName] = handlers[eventName];
+ }
+
+ this.plugins_.push(pluginDict);
+ }
+
+ // 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) {
+ if (!plugin_dict.events.hasOwnProperty(eventName)) continue;
+ var callback = plugin_dict.events[eventName];
+
+ var pair = [plugin_dict.plugin, callback];
+ if (!(eventName in this.eventListeners_)) {
+ this.eventListeners_[eventName] = [pair];
+ } else {
+ this.eventListeners_[eventName].push(pair);
+ }
+ }
+ }
+
this.start_();
};
/**
+ * Triggers a cascade of events to the various plugins which are interested in them.
+ * Returns true if the "default behavior" should be performed, i.e. if none of
+ * the event listeners called event.preventDefault().
+ * @private
+ */
+Dygraph.prototype.cascadeEvents_ = function(name, extra_props) {
+ if (!name in this.eventListeners_) return true;
+
+ // QUESTION: can we use objects & prototypes to speed this up?
+ var e = {
+ dygraph: this,
+ cancelable: false,
+ defaultPrevented: false,
+ preventDefault: function() {
+ if (!e.cancelable) throw "Cannot call preventDefault on non-cancelable event.";
+ e.defaultPrevented = true;
+ },
+ propagationStopped: false,
+ stopPropagation: function() {
+ e.propagationStopped = true;
+ }
+ };
+ Dygraph.update(e, extra_props);
+
+ var callback_plugin_pairs = this.eventListeners_[name];
+ if (callback_plugin_pairs) {
+ for (var i = callback_plugin_pairs.length - 1; i >= 0; i--) {
+ var plugin = callback_plugin_pairs[i][0];
+ var callback = callback_plugin_pairs[i][1];
+ callback.call(plugin, e);
+ if (e.propagationStopped) break;
+ }
+ }
+ return e.defaultPrevented;
+};
+
+/**
* Returns the zoomed status of the chart for one or both axes.
*
* Axis is an optional parameter. Can be set to 'x' or 'y'.
Dygraph.OPTIONS_REFERENCE[name] = true;
}
// </REMOVE_FOR_COMBINED>
- if (seriesName &&
- typeof(this.user_attrs_[seriesName]) != 'undefined' &&
- this.user_attrs_[seriesName] !== null &&
- typeof(this.user_attrs_[seriesName][name]) != 'undefined') {
- return this.user_attrs_[seriesName][name];
- } else if (typeof(this.user_attrs_[name]) != 'undefined') {
- return this.user_attrs_[name];
- } else if (typeof(this.attrs_[name]) != 'undefined') {
- return this.attrs_[name];
- } else {
- return null;
+
+ var sources = [];
+ sources.push(this.attrs_);
+ 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 ret = null;
+ for (var i = sources.length - 1; i >= 0; --i) {
+ var source = sources[i];
+ if (source.hasOwnProperty(name)) {
+ ret = source[name];
+ break;
+ }
}
+ return ret;
+};
+
+/**
+ * Returns the current value for an option, as set in the constructor or via
+ * updateOptions. You may pass in an (optional) series name to get per-series
+ * values for the option.
+ *
+ * All values returned by this method should be considered immutable. If you
+ * modify them, there is no guarantee that the changes will be honored or that
+ * dygraphs will remain in a consistent state. If you want to modify an option,
+ * use updateOptions() instead.
+ *
+ * @param { String } name The name of the option (e.g. 'strokeWidth')
+ * @param { String } [opt_seriesName] Series name to get per-series values.
+ * @return { ... } The value of the option.
+ */
+Dygraph.prototype.getOption = function(name, opt_seriesName) {
+ return this.attr_(name, opt_seriesName);
};
/**
}
var dygraph = this;
- Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) {
+
+ this.mouseMoveHandler = function(e) {
dygraph.mouseMove_(e);
- });
- Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) {
+ };
+ Dygraph.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler);
+
+ this.mouseOutHandler = function(e) {
dygraph.mouseOut_(e);
- });
+ };
+ Dygraph.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler);
- this.createStatusMessage_();
this.createDragInterface_();
this.resizeHandler = function(e) {
dygraph.resize();
- }
+ };
// Update when the window is resized.
// TODO(danvk): drop frames depending on complexity of the chart.
node.removeChild(node.firstChild);
}
};
+
+ // 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) {
/**
* Return the list of colors. This is either the list of colors passed in the
* attributes or the autogenerated list of rgb(r,g,b) strings.
+ * This does not return colors for invisible series.
* @return {Array<string>} The list of colors.
*/
Dygraph.prototype.getColors = function() {
};
/**
- * Create the div that contains information on the selected point(s)
- * This goes in the top right of the canvas, unless an external div has already
- * been specified.
- * @private
+ * Returns a few attributes of a series, i.e. its color, its visibility, which
+ * axis it's assigned to, and its column in the original data.
+ * Returns null if the series does not exist.
+ * Otherwise, returns an object with column, visibility, color and axis properties.
+ * The "axis" property will be set to 1 for y1 and 2 for y2.
+ * The "column" property can be fed back into getValue(row, column) to get
+ * values for this series.
*/
-Dygraph.prototype.createStatusMessage_ = function() {
- var userLabelsDiv = this.user_attrs_.labelsDiv;
- if (userLabelsDiv && null !== userLabelsDiv &&
- (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
- this.user_attrs_.labelsDiv = document.getElementById(userLabelsDiv);
- }
- if (!this.attr_("labelsDiv")) {
- var divWidth = this.attr_('labelsDivWidth');
- var messagestyle = {
- "position": "absolute",
- "fontSize": "14px",
- "zIndex": 10,
- "width": divWidth + "px",
- "top": "0px",
- "left": (this.width_ - divWidth - 2) + "px",
- "background": "white",
- "textAlign": "left",
- "overflow": "hidden"};
- Dygraph.update(messagestyle, this.attr_('labelsDivStyles'));
- var div = document.createElement("div");
- div.className = "dygraph-legend";
- for (var name in messagestyle) {
- if (messagestyle.hasOwnProperty(name)) {
- div.style[name] = messagestyle[name];
- }
+Dygraph.prototype.getPropertiesForSeries = function(series_name) {
+ var idx = -1;
+ var labels = this.getLabels();
+ for (var i = 1; i < labels.length; i++) {
+ if (labels[i] == series_name) {
+ idx = i;
+ break;
}
- this.graphDiv.appendChild(div);
- this.attrs_.labelsDiv = div;
}
-};
-
-/**
- * Position the labels div so that:
- * - its right edge is flush with the right edge of the charting area
- * - its top edge is flush with the top edge of the charting area
- * @private
- */
-Dygraph.prototype.positionLabelsDiv_ = function() {
- // Don't touch a user-specified labelsDiv.
- if (this.user_attrs_.hasOwnProperty("labelsDiv")) return;
+ if (idx == -1) return null;
- var area = this.plotter_.area;
- var div = this.attr_("labelsDiv");
- div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px";
- div.style.top = area.y + "px";
+ return {
+ name: series_name,
+ column: idx,
+ visible: this.visibility()[idx - 1],
+ color: this.plotter_.colors[series_name],
+ axis: 1 + this.seriesToAxisMap_[series_name]
+ };
};
/**
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_);
};
/**
};
/**
- * When the mouse moves in the canvas, display information about a nearby data
- * point and draw dots over those points in the data series. This function
- * takes care of cleanup of previously-drawn dots.
- * @param {Object} event The mousemove event from the browser.
- * @private
+ * Get the current graph's area object.
+ *
+ * Returns: {x, y, w, h}
*/
-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;
+Dygraph.prototype.getArea = function() {
+ return this.plotter_.area;
+};
+/**
+ * Convert a mouse event to DOM coordinates relative to the graph origin.
+ *
+ * Returns a two-element array: [X, Y].
+ */
+Dygraph.prototype.eventToDomCoords = function(event) {
var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_);
+ var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(this.mouseEventElement_);
+ return [canvasx, canvasy];
+};
- var lastx = -1;
- var i;
-
- // Loop through all the points and find the date nearest to our current
- // location.
- var minDist = 1e+100;
+/**
+ * Given a canvas X coordinate, find the closest row.
+ * @param {Number} domX graph-relative DOM X coordinate
+ * Returns: row number, integer
+ * @private
+ */
+Dygraph.prototype.findClosestRow = function(domX) {
+ var minDistX = Infinity;
var idx = -1;
- for (i = 0; i < points.length; i++) {
+ var points = this.layout_.points;
+ var l = points.length;
+ for (var i = 0; i < l; i++) {
var point = points[i];
- if (point === null) continue;
- var dist = Math.abs(point.canvasx - canvasx);
- if (dist > minDist) continue;
- minDist = dist;
- idx = i;
+ if (!Dygraph.isValidPoint(point, true)) continue;
+ var dist = Math.abs(point.canvasx - domX);
+ if (dist < minDistX) {
+ minDistX = dist;
+ idx = i;
+ }
}
- if (idx >= 0) lastx = points[idx].xval;
+ return this.idxToRow_(idx);
+};
- // Extract the points we've selected
- this.selPoints_ = [];
- var l = points.length;
- if (!this.attr_("stackedGraph")) {
- for (i = 0; i < l; i++) {
- if (points[i].xval == lastx) {
- this.selPoints_.push(points[i]);
+/**
+ * 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 = 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];
+ if (!Dygraph.isValidPoint(point)) continue;
+ dx = point.canvasx - domX;
+ dy = point.canvasy - domY;
+ dist = dx * dx + dy * dy;
+ if (dist < minDist) {
+ minDist = dist;
+ closestPoint = point;
+ closestSeries = setIdx;
+ idx = i;
}
}
- } else {
- // Need to 'unstack' points starting from the bottom
- var cumulative_sum = 0;
- for (i = l - 1; i >= 0; i--) {
- if (points[i].xval == lastx) {
- var p = {}; // Clone the point since we modify it
- for (var k in points[i]) {
- p[k] = points[i][k];
+ }
+ var name = this.layout_.setNames[closestSeries];
+ return {
+ 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}
+ * @private
+ */
+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 (rowIdx >= len) continue;
+ var p1 = points[first + rowIdx];
+ if (!Dygraph.isValidPoint(p1)) continue;
+ var py = p1.canvasy;
+ if (domX > p1.canvasx && rowIdx + 1 < len) {
+ // interpolate series Y value using next point
+ 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);
}
- p.yval -= cumulative_sum;
- cumulative_sum += p.yval;
- this.selPoints_.push(p);
}
+ } else if (domX < p1.canvasx && rowIdx > 0) {
+ // interpolate series Y value using previous point
+ 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) {
+ closestPoint = p1;
+ closestSeries = setIdx;
}
- this.selPoints_.reverse();
}
+ var name = this.layout_.setNames[closestSeries];
+ return {
+ row: row,
+ seriesName: name,
+ point: closestPoint
+ };
+};
- if (this.attr_("highlightCallback")) {
- var px = this.lastx_;
- if (px !== null && lastx != px) {
- // only fire if the selected point has changed.
- this.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx));
+/**
+ * When the mouse moves in the canvas, display information about a nearby data
+ * point and draw dots over those points in the data series. This function
+ * takes care of cleanup of previously-drawn dots.
+ * @param {Object} event The mousemove event from the browser.
+ * @private
+ */
+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;
+
+ var canvasCoords = this.eventToDomCoords(event);
+ var canvasx = canvasCoords[0];
+ var canvasy = canvasCoords[1];
+
+ var highlightSeriesOpts = this.attr_("highlightSeriesOpts");
+ var selectionChanged = false;
+ if (highlightSeriesOpts) {
+ var closest;
+ if (this.attr_("stackedGraph")) {
+ closest = this.findStackedPoint(canvasx, canvasy);
+ } else {
+ closest = this.findClosestPoint(canvasx, canvasy);
}
+ selectionChanged = this.setSelection(closest.row, closest.seriesName);
+ } else {
+ var idx = this.findClosestRow(canvasx);
+ selectionChanged = this.setSelection(idx);
}
- // Save last x position for callbacks.
- this.lastx_ = lastx;
+ var callback = this.attr_("highlightCallback");
+ if (callback && selectionChanged) {
+ callback(event, this.lastx_, this.selPoints_, this.lastRow_, this.highlightSet_);
+ }
+};
- this.updateSelection_();
+/**
+ * Fetch left offset from first defined boundaryIds record (see bug #236).
+ * @private
+ */
+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;
};
/**
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;
}
return -1;
};
-/**
- * @private
- * Generates legend html dash for any stroke pattern. It will try to scale the
- * pattern to fit in 1em width. Or if small enough repeat the partern for 1em
- * width.
- * @param strokePattern The pattern
- * @param color The color of the series.
- * @param oneEmWidth The width in pixels of 1em in the legend.
- */
-Dygraph.prototype.generateLegendDashHTML_ = function(strokePattern, color, oneEmWidth) {
- var dash = "";
- var i, j, paddingLeft, marginRight;
- var strokePixelLength = 0, segmentLoop = 0;
- var normalizedPattern = [];
- var loop;
- // IE 7,8 fail at these divs, so they get boring legend, have not tested 9.
- var isIE = (/MSIE/.test(navigator.userAgent) && !window.opera);
- if(isIE) {
- return "—";
- }
- if (!strokePattern || strokePattern.length <= 1) {
- // Solid line
- dash = "<div style=\"display: inline-block; position: relative; " +
- "bottom: .5ex; padding-left: 1em; height: 1px; " +
- "border-bottom: 2px solid " + color + ";\"></div>";
- } else {
- // Compute the length of the pixels including the first segment twice,
- // since we repeat it.
- for (i = 0; i <= strokePattern.length; i++) {
- strokePixelLength += strokePattern[i%strokePattern.length];
- }
-
- // See if we can loop the pattern by itself at least twice.
- loop = Math.floor(oneEmWidth/(strokePixelLength-strokePattern[0]));
- if (loop > 1) {
- // This pattern fits at least two times, no scaling just convert to em;
- for (i = 0; i < strokePattern.length; i++) {
- normalizedPattern[i] = strokePattern[i]/oneEmWidth;
- }
- // Since we are repeating the pattern, we don't worry about repeating the
- // first segment in one draw.
- segmentLoop = normalizedPattern.length;
- } else {
- // If the pattern doesn't fit in the legend we scale it to fit.
- loop = 1;
- for (i = 0; i < strokePattern.length; i++) {
- normalizedPattern[i] = strokePattern[i]/strokePixelLength;
- }
- // For the scaled patterns we do redraw the first segment.
- segmentLoop = normalizedPattern.length+1;
- }
- // Now make the pattern.
- for (j = 0; j < loop; j++) {
- for (i = 0; i < segmentLoop; i+=2) {
- // The padding is the drawn segment.
- paddingLeft = normalizedPattern[i%normalizedPattern.length];
- if (i < strokePattern.length) {
- // The margin is the space segment.
- marginRight = normalizedPattern[(i+1)%normalizedPattern.length];
- } else {
- // The repeated first segment has no right margin.
- marginRight = 0;
- }
- dash += "<div style=\"display: inline-block; position: relative; " +
- "bottom: .5ex; margin-right: " + marginRight + "em; padding-left: " +
- paddingLeft + "em; height: 1px; border-bottom: 2px solid " + color +
- ";\"></div>";
- }
- }
- }
- return dash;
-};
-
-/**
- * @private
- * Generates HTML for the legend which is displayed when hovering over the
- * chart. If no selected points are specified, a default legend is returned
- * (this may just be the empty string).
- * @param { Number } [x] The x-value of the selected points.
- * @param { [Object] } [sel_points] List of selected points for the given
- * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
- * @param { Number } [oneEmWidth] The pixel width for 1em in the legend.
- */
-Dygraph.prototype.generateLegendHTML_ = function(x, sel_points, oneEmWidth) {
- // If no points are selected, we display a default legend. Traditionally,
- // this has been blank. But a better default would be a conventional legend,
- // which provides essential information for a non-interactive chart.
- var html, sepLines, i, c, dash, strokePattern;
- if (typeof(x) === 'undefined') {
- if (this.attr_('legend') != 'always') return '';
-
- sepLines = this.attr_('labelsSeparateLines');
- var labels = this.attr_('labels');
- html = '';
- for (i = 1; i < labels.length; i++) {
- if (!this.visibility()[i - 1]) continue;
- c = this.plotter_.colors[labels[i]];
- if (html !== '') html += (sepLines ? '<br/>' : ' ');
- strokePattern = this.attr_("strokePattern", labels[i]);
- dash = this.generateLegendDashHTML_(strokePattern, c, oneEmWidth);
- html += "<span style='font-weight: bold; color: " + c + ";'>" + dash +
- " " + labels[i] + "</span>";
+Dygraph.prototype.animateSelection_ = function(direction) {
+ var totalSteps = 10;
+ var millis = 30;
+ 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) {
+ if (this.fadeLevel) {
+ this.updateSelection_(1.0);
}
- return html;
- }
-
- var xOptView = this.optionsViewForAxis_('x');
- var xvf = xOptView('valueFormatter');
- html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":";
-
- var yOptViews = [];
- var num_axes = this.numAxes();
- for (i = 0; i < num_axes; i++) {
- yOptViews[i] = this.optionsViewForAxis_('y' + (i ? 1 + i : ''));
+ return;
}
- var showZeros = this.attr_("labelsShowZeroValues");
- sepLines = this.attr_("labelsSeparateLines");
- for (i = 0; i < this.selPoints_.length; i++) {
- var pt = this.selPoints_[i];
- if (pt.yval === 0 && !showZeros) continue;
- if (!Dygraph.isOK(pt.canvasy)) continue;
- if (sepLines) html += "<br/>";
- var yOptView = yOptViews[this.seriesToAxisMap_[pt.name]];
- var fmtFunc = yOptView('valueFormatter');
- c = this.plotter_.colors[pt.name];
- var yval = fmtFunc(pt.yval, yOptView, pt.name, this);
-
- // TODO(danvk): use a template string here and make it an attribute.
- html += " <b><span style='color: " + c + ";'>" + pt.name +
- "</span></b>:" + yval;
- }
- return html;
-};
-
-/**
- * @private
- * Displays information about the selected points in the legend. If there is no
- * selection, the legend will be cleared.
- * @param { Number } [x] The x-value of the selected points.
- * @param { [Object] } [sel_points] List of selected points for the given
- * x-value. Should have properties like 'name', 'yval' and 'canvasy'.
- */
-Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
- var labelsDiv = this.attr_("labelsDiv");
- 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;');
- labelsDiv.appendChild(sizeSpan);
- var oneEmWidth=sizeSpan.offsetWidth;
-
- var html = this.generateLegendHTML_(x, sel_points, oneEmWidth);
- if (labelsDiv !== null) {
- labelsDiv.innerHTML = html;
- } else {
- if (typeof(this.shown_legend_error_) == 'undefined') {
- this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
- this.shown_legend_error_ = true;
- }
- }
+ 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() {});
};
/**
* takes care of cleanup of previously-drawn dots.
* @private
*/
-Dygraph.prototype.updateSelection_ = function() {
+Dygraph.prototype.updateSelection_ = function(opt_animFraction) {
+ var defaultPrevented = this.cascadeEvents_('select', {
+ selectedX: this.lastx_,
+ selectedPoints: this.selPoints_
+ });
+ // TODO(danvk): use defaultPrevented here?
+
// Clear the previously drawn vertical, if there is one
var i;
var ctx = this.canvas_ctx_;
- if (this.previousVerticalX_ >= 0) {
+ if (this.attr_('highlightSeriesOpts')) {
+ ctx.clearRect(0, 0, this.width_, this.height_);
+ var alpha = 1.0 - this.attr_('highlightSeriesBackgroundAlpha');
+ if (alpha) {
+ // 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);
+ return;
+ }
+ alpha *= opt_animFraction;
+ }
+ 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);
+ } else if (this.previousVerticalX_ >= 0) {
// Determine the maximum highlight circle size.
var maxCircleSize = 0;
var labels = this.attr_('labels');
}
if (this.selPoints_.length > 0) {
- // Set the status message to indicate the selected point(s)
- if (this.attr_('showLabelsOnHighlight')) {
- this.setLegendHTML_(this.lastx_, this.selPoints_);
- }
-
// Draw colored circles over the center of each selected point
var canvasx = this.selPoints_[0].canvasx;
ctx.save();
var circleSize = this.attr_('highlightCircleSize', pt.name);
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,
- this.plotter_.colors[pt.name], circleSize);
+ color, circleSize);
}
ctx.restore();
* using getSelection().
* @param { Integer } row number that should be highlighted (i.e. appear with
* 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.
*/
-Dygraph.prototype.setSelection = function(row) {
+Dygraph.prototype.setSelection = function(row, opt_seriesName) {
// Extract the points we've selected
this.selPoints_ = [];
var pos = 0;
if (row !== false) {
- row = row - this.boundaryIds_[0][0];
+ row -= this.getLeftBoundary_();
}
+ var changed = false;
if (row !== false && row >= 0) {
+ if (row != this.lastRow_) changed = true;
+ this.lastRow_ = row;
for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) {
var set = this.layout_.datasets[setIdx];
if (row < set.length) {
point = this.layout_.unstackPointAtIndex(pos+row);
}
- this.selPoints_.push(point);
+ if (!(point.yval === null)) this.selPoints_.push(point);
}
pos += set.length;
}
+ } else {
+ if (this.lastRow_ >= 0) changed = true;
+ this.lastRow_ = -1;
}
if (this.selPoints_.length) {
this.lastx_ = this.selPoints_[0].xval;
- this.updateSelection_();
} else {
- this.clearSelection();
+ this.lastx_ = -1;
+ }
+
+ if (opt_seriesName !== undefined) {
+ if (this.highlightSet_ !== opt_seriesName) changed = true;
+ this.highlightSet_ = opt_seriesName;
}
+ if (changed) {
+ this.updateSelection_(undefined);
+ }
+ return changed;
};
/**
* the mouse over the chart).
*/
Dygraph.prototype.clearSelection = function() {
+ this.cascadeEvents_('deselect', {});
+
// Get rid of the overlay data
+ if (this.fadeLevel) {
+ this.animateSelection_(-1);
+ return;
+ }
this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
- this.setLegendHTML_();
+ this.fadeLevel = 0;
this.selPoints_ = [];
this.lastx_ = -1;
+ this.lastRow_ = -1;
+ this.highlightSet_ = null;
};
/**
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;
};
/**
+ * Returns the name of the currently-highlighted series.
+ * Only available when the highlightSeriesOpts option is in use.
+ */
+Dygraph.prototype.getHighlightSeries = function() {
+ return this.highlightSet_;
+};
+
+/**
* Fires when there's data available to be graphed.
* @param {String} data Raw CSV data to be plotted
* @private
// this will be until the options are available, so it's positioned here.
this.createRollInterface_();
- // Same thing applies for the labelsDiv. It's right edge should be flush with
- // the right edge of the charting area (which may not be the same as the right
- // edge of the div, if we have two y-axes.
- this.positionLabelsDiv_();
+ this.cascadeEvents_('predraw');
if (this.rangeSelector_) {
this.rangeSelector_.renderStaticLayer();
// 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 ];
};
* has changed. If the underlying data or options have changed, predraw_ will
* be called before drawGraph_ is called.
*
- * clearSelection, when undefined or true, causes this.clearSelection to be
- * called at the end of the draw operation. This should rarely be defined,
- * and never true (that is it should be undefined most of the time, and
- * rarely false.)
- *
* @private
*/
-Dygraph.prototype.drawGraph_ = function(clearSelection) {
+Dygraph.prototype.drawGraph_ = function() {
var start = new Date();
- if (typeof(clearSelection) === 'undefined') {
- clearSelection = true;
- }
-
// This is used to set the second parameter to drawCallback, below.
var is_initial_draw = this.is_initial_draw_;
this.is_initial_draw_ = false;
if (labels.length > 0) {
this.setIndexByName_[labels[0]] = 0;
}
+ var dataIdx = 0;
for (var i = 1; i < datasets.length; i++) {
this.setIndexByName_[labels[i]] = i;
if (!this.visibility()[i - 1]) continue;
this.layout_.addDataset(labels[i], datasets[i]);
+ this.datasetIndex_[i] = dataIdx++;
}
this.computeYAxisRanges_(extremes);
this.layout_.setDateWindow(this.dateWindow_);
this.zoomed_x_ = tmp_zoomed_x;
this.layout_.evaluateWithError();
- this.renderGraph_(is_initial_draw, false);
+ this.renderGraph_(is_initial_draw);
if (this.attr_("timingName")) {
var end = new Date();
}
};
-Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) {
+/**
+ * This does the work of drawing the chart. It assumes that the layout and axis
+ * scales have already been set (e.g. by predraw_).
+ *
+ * @private
+ */
+Dygraph.prototype.renderGraph_ = function(is_initial_draw) {
this.plotter_.clear();
this.plotter_.render();
this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width,
this.canvas_.height);
// Generate a static legend before any particular point is selected.
- this.setLegendHTML_();
-
- if (!is_initial_draw) {
- if (clearSelection) {
- if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) {
- // We should select the point nearest the page x/y here, but it's easier
- // to just clear the selection. This prevents erroneous hover dots from
- // being displayed.
- this.clearSelection();
- } else {
- this.clearSelection();
- }
- }
- }
if (this.rangeSelector_) {
this.rangeSelector_.renderInteractiveLayer();
}
+ this.cascadeEvents_('drawChart');
if (this.attr_("drawCallback") !== null) {
this.attr_("drawCallback")(this, is_initial_draw);
}
*
* @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 " +
if (requiresNewPoints) {
this.predraw_();
} else {
- this.renderGraph_(false, false);
+ this.renderGraph_(false);
}
}
}
* Get the list of label names for this graph. The first column is the
* x-axis, so the data series names start at index 1.
*/
-Dygraph.prototype.getLabels = function(name) {
+Dygraph.prototype.getLabels = function() {
return this.attr_("labels").slice();
};
};
/**
+ * Get the internal dataset index given its name. These are numbered starting from 0,
+ * and only count visible sets.
+ * @private
+ */
+Dygraph.prototype.datasetIndexFromSetName_ = function(name) {
+ return this.datasetIndex_[this.indexFromSetName(name)];
+};
+
+/**
* @private
* Adds a default style for the annotation CSS classes to the document. This is
* only executed when annotations are actually used. It is designed to only be
projects / dygraphs.git / blobdiff