X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=3867b290d06939922947f6c15d5937b719bd8b48;hb=6a4457b403f78ba559550f97330ac25ee4d9629f;hp=616dfe96b23a61602c139ca32fea7b0a5bed24b8;hpb=475f7420e0ec216995edb9db860a005273a97894;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 616dfe9..3867b29 100644 --- a/dygraph.js +++ b/dygraph.js @@ -61,17 +61,15 @@ * 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); } }; @@ -187,8 +185,7 @@ Dygraph.dateAxisFormatter = function(date, granularity) { Dygraph.DEFAULT_ATTRS = { highlightCircleSize: 3, highlightSeriesOpts: null, - highlightSeriesBackgroundFade: 0, - highlightSeriesAnimated: false, + highlightSeriesBackgroundAlpha: 0.5, labelsDivWidth: 250, labelsDivStyles: { @@ -291,6 +288,11 @@ Dygraph.DEFAULT_ATTRS = { 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; @@ -408,10 +410,85 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { // 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'. @@ -486,6 +563,24 @@ Dygraph.prototype.attr_ = function(name, seriesName) { }; /** + * 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); +}; + +/** * @private * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2') * @return { ... } A function mapping string -> option value @@ -852,16 +947,15 @@ Dygraph.prototype.createInterface_ = function() { 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); - this.createStatusMessage_(); this.createDragInterface_(); this.resizeHandler = function(e) { @@ -889,6 +983,7 @@ Dygraph.prototype.destroy = function() { // 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) { @@ -987,6 +1082,7 @@ Dygraph.prototype.setColors_ = function() { /** * 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} The list of colors. */ Dygraph.prototype.getColors = function() { @@ -994,56 +1090,32 @@ 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; } -}; + if (idx == -1) return null; -/** - * 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; - - 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] + }; }; /** @@ -1117,6 +1189,7 @@ Dygraph.prototype.createDragInterface_ = function() { 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, @@ -1153,6 +1226,7 @@ Dygraph.prototype.createDragInterface_ = function() { context.py = Dygraph.findPosY(g.canvas_); context.dragStartX = g.dragGetX_(event, context); context.dragStartY = g.dragGetY_(event, context); + context.cancelNextDblclick = false; } }; @@ -1176,7 +1250,7 @@ Dygraph.prototype.createDragInterface_ = function() { // 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; @@ -1192,7 +1266,9 @@ Dygraph.prototype.createDragInterface_ = function() { delete self.axes_[i].dragValueRange; } } - }); + }; + + Dygraph.addEvent(document, 'mouseup', this.mouseUpHandler_); }; /** @@ -1506,30 +1582,36 @@ Dygraph.prototype.eventToDomCoords = function(event) { * @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; @@ -1538,20 +1620,21 @@ Dygraph.prototype.findClosestPoint = function(domX, domY) { 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 }; @@ -1559,6 +1642,11 @@ Dygraph.prototype.findClosestPoint = function(domX, domY) { /** * 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} @@ -1566,35 +1654,43 @@ Dygraph.prototype.findClosestPoint = function(domX, domY) { */ 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 { @@ -1620,13 +1716,6 @@ Dygraph.prototype.mouseMove_ = function(event) { 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) { @@ -1649,6 +1738,19 @@ Dygraph.prototype.mouseMove_ = function(event) { }; /** + * 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; +}; + +/** * Transforms layout_.points index into data row number. * @param int layout_.points index * @return int row number, or -1 if none could be found. @@ -1657,195 +1759,22 @@ Dygraph.prototype.mouseMove_ = function(event) { 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 = "
"; - } 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 += "
"; - } - } - } - 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 ? '
' : ' '); - strokePattern = this.attr_("strokePattern", labels[i]); - dash = this.generateLegendDashHTML_(strokePattern, c, oneEmWidth); - html += "" + dash + - " " + labels[i] + ""; - } - 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 : '')); - } - 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 += "
"; - - 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); - - var cls = (pt.name == this.highlightSet_) ? " class='highlight'" : ""; - // TODO(danvk): use a template string here and make it an attribute. - html += "" + " " + pt.name + - ":" + 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; - } - } -}; - 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) { @@ -1878,14 +1807,24 @@ Dygraph.prototype.animateSelection_ = function(direction) { * @private */ 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.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); @@ -1897,8 +1836,6 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) { 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. @@ -1918,11 +1855,6 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) { } 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(); @@ -1931,10 +1863,16 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) { 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(); @@ -1957,12 +1895,7 @@ Dygraph.prototype.setSelection = function(row, opt_seriesName) { 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; @@ -1978,7 +1911,7 @@ Dygraph.prototype.setSelection = function(row, opt_seriesName) { point = this.layout_.unstackPointAtIndex(pos+row); } - this.selPoints_.push(point); + if (!(point.yval === null)) this.selPoints_.push(point); } pos += set.length; } @@ -2024,6 +1957,8 @@ Dygraph.prototype.mouseOut_ = function(event) { * the mouse over the chart). */ Dygraph.prototype.clearSelection = function() { + this.cascadeEvents_('deselect', {}); + // Get rid of the overlay data if (this.fadeLevel) { this.animateSelection_(-1); @@ -2031,7 +1966,6 @@ Dygraph.prototype.clearSelection = function() { } this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_); this.fadeLevel = 0; - this.setLegendHTML_(); this.selPoints_ = []; this.lastx_ = -1; this.lastRow_ = -1; @@ -2050,12 +1984,16 @@ Dygraph.prototype.getSelection = function() { for (var row=0; row= 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 ]; }; @@ -2301,20 +2260,11 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { * 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; @@ -2352,7 +2302,7 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { 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(); @@ -2362,32 +2312,25 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { } }; -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); } @@ -2661,24 +2604,19 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { * * @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; }; @@ -2853,7 +2791,7 @@ Dygraph.prototype.detectTypeFromString_ = function(str) { // 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; } }; @@ -3092,7 +3030,7 @@ Dygraph.prototype.parseArray_ = function(data) { /** @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; } }; @@ -3132,7 +3070,7 @@ Dygraph.prototype.parseDataTable_ = function(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 " + @@ -3340,7 +3278,7 @@ Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) { if (requiresNewPoints) { this.predraw_(); } else { - this.renderGraph_(false, false); + this.renderGraph_(false); } } } @@ -3511,7 +3449,7 @@ Dygraph.prototype.annotations = function() { * 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(); };