X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=1d97bda83db91ba67d2f65a692ccb97464e3c353;hb=38dbac3e0b3c24486d3f548ae63dabd6e1d73bc3;hp=3393d7decef221b369f4290d21e309da228562f2;hpb=920208fbb3565a1f9075d49a7be486819bdd1174;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 3393d7d..1d97bda 100644 --- a/dygraph.js +++ b/dygraph.js @@ -43,6 +43,10 @@ */ +/*jshint globalstrict: true */ +/*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */ +"use strict"; + /** * Creates an interactive, zoomable chart. * @@ -57,7 +61,7 @@ * whether the input data contains error ranges. For a complete list of * options, see http://dygraphs.com/options.html. */ -Dygraph = function(div, data, opts) { +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 @@ -89,6 +93,9 @@ Dygraph.DEFAULT_ROLL_PERIOD = 1; Dygraph.DEFAULT_WIDTH = 480; Dygraph.DEFAULT_HEIGHT = 320; +Dygraph.ANIMATION_STEPS = 10; +Dygraph.ANIMATION_DURATION = 200; + // These are defined before DEFAULT_ATTRS so that it can refer to them. /** * @private @@ -167,7 +174,7 @@ Dygraph.dateAxisFormatter = function(date, granularity) { return date.strftime('%b %y'); } else { var frac = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds() + date.getMilliseconds(); - if (frac == 0 || granularity >= Dygraph.DAILY) { + if (frac === 0 || granularity >= Dygraph.DAILY) { return new Date(date.getTime() + 3600*1000).strftime('%d%b'); } else { return Dygraph.hmsString_(date.getTime()); @@ -179,6 +186,9 @@ Dygraph.dateAxisFormatter = function(date, granularity) { // Default attribute values. Dygraph.DEFAULT_ATTRS = { highlightCircleSize: 3, + highlightSeriesOpts: null, + highlightSeriesBackgroundFade: 0, + highlightSeriesAnimated: false, labelsDivWidth: 250, labelsDivStyles: { @@ -195,6 +205,8 @@ Dygraph.DEFAULT_ATTRS = { sigFigs: null, strokeWidth: 1.0, + strokeBorderWidth: 0, + strokeBorderColor: "white", axisTickSize: 3, axisLabelFontSize: 14, @@ -243,6 +255,7 @@ Dygraph.DEFAULT_ATTRS = { gridLineColor: "rgb(128,128,128)", interactionModel: null, // will be set to Dygraph.Interaction.defaultModel + animatedZooms: false, // (for now) // Range selector options showRangeSelector: false, @@ -285,7 +298,7 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) { // Labels is no longer a constructor parameter, since it's typically set // directly from the data source. It also conains a name for the x-axis, // which the previous constructor form did not. - if (labels != null) { + if (labels !== null) { var new_labels = ["Date"]; for (var i = 0; i < labels.length; i++) new_labels.push(labels[i]); Dygraph.update(attrs, { 'labels': new_labels }); @@ -310,12 +323,12 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { typeof(G_vmlCanvasManager) != 'undefined' && document.readyState != 'complete') { var self = this; - setTimeout(function() { self.__init__(div, file, attrs) }, 100); + setTimeout(function() { self.__init__(div, file, attrs); }, 100); return; } // Support two-argument constructor - if (attrs == null) { attrs = {}; } + if (attrs === null || attrs === undefined) { attrs = {}; } attrs = Dygraph.mapLegacyOptions_(attrs); @@ -335,7 +348,6 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { this.fractions_ = attrs.fractions || false; this.dateWindow_ = attrs.dateWindow || null; - this.wilsonInterval_ = attrs.wilsonInterval || true; this.is_initial_draw_ = true; this.annotations_ = []; @@ -351,15 +363,15 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { // rules _except_ for an explicit 'width' or 'height' on the div. // As an added convenience, if the div has zero height (like
does // without any styles), then we use a default height/width. - if (div.style.width == '' && attrs.width) { + if (div.style.width === '' && attrs.width) { div.style.width = attrs.width + "px"; } - if (div.style.height == '' && attrs.height) { + if (div.style.height === '' && attrs.height) { div.style.height = attrs.height + "px"; } - if (div.style.height == '' && div.clientHeight == 0) { + if (div.style.height === '' && div.clientHeight === 0) { div.style.height = Dygraph.DEFAULT_HEIGHT + "px"; - if (div.style.width == '') { + if (div.style.width === '') { div.style.width = Dygraph.DEFAULT_WIDTH + "px"; } } @@ -368,8 +380,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { this.height_ = div.clientHeight; // TODO(danvk): set fillGraph to be part of attrs_ here, not user_attrs_. - if (attrs['stackedGraph']) { - attrs['fillGraph'] = true; + if (attrs.stackedGraph) { + attrs.fillGraph = true; // TODO(nikhilk): Add any other stackedGraph checks here. } @@ -390,6 +402,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { Dygraph.updateDeep(this.attrs_, Dygraph.DEFAULT_ATTRS); this.boundaryIds_ = []; + this.setIndexByName_ = {}; + this.datasetIndex_ = []; // Create the containing DIV and other interactive elements this.createInterface_(); @@ -408,9 +422,9 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { */ Dygraph.prototype.isZoomed = function(axis) { if (axis == null) return this.zoomed_x_ || this.zoomed_y_; - if (axis == 'x') return this.zoomed_x_; - if (axis == 'y') return this.zoomed_y_; - throw "axis parameter to Dygraph.isZoomed must be missing, 'x' or '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'."; }; /** @@ -418,9 +432,9 @@ Dygraph.prototype.isZoomed = function(axis) { */ Dygraph.prototype.toString = function() { var maindiv = this.maindiv_; - var id = (maindiv && maindiv.id) ? maindiv.id : maindiv + var id = (maindiv && maindiv.id) ? maindiv.id : maindiv; return "[Dygraph " + id + "]"; -} +}; /** * @private @@ -444,18 +458,31 @@ Dygraph.prototype.attr_ = function(name, seriesName) { Dygraph.OPTIONS_REFERENCE[name] = true; } // - 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; }; /** @@ -466,7 +493,7 @@ Dygraph.prototype.attr_ = function(name, seriesName) { Dygraph.prototype.optionsViewForAxis_ = function(axis) { var self = this; return function(opt) { - var axis_opts = self.user_attrs_['axes']; + var axis_opts = self.user_attrs_.axes; if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) { return axis_opts[axis][opt]; } @@ -476,7 +503,7 @@ Dygraph.prototype.optionsViewForAxis_ = function(axis) { return self.user_attrs_[opt]; } - axis_opts = self.attrs_['axes']; + axis_opts = self.attrs_.axes; if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) { return axis_opts[axis][opt]; } @@ -568,14 +595,14 @@ Dygraph.prototype.toDomCoords = function(x, y, axis) { * Returns a single value or null if x is null. */ Dygraph.prototype.toDomXCoord = function(x) { - if (x == null) { + if (x === null) { return null; - }; + } var area = this.plotter_.area; var xRange = this.xAxisRange(); return area.x + (x - xRange[0]) / (xRange[1] - xRange[0]) * area.w; -} +}; /** * Convert from data x coordinates to canvas/div Y coordinate and optional @@ -586,12 +613,12 @@ Dygraph.prototype.toDomXCoord = function(x) { Dygraph.prototype.toDomYCoord = function(y, axis) { var pct = this.toPercentYCoord(y, axis); - if (pct == null) { + if (pct === null) { return null; } var area = this.plotter_.area; return area.y + pct * area.h; -} +}; /** * Convert from canvas/div coords to data coordinates. @@ -612,7 +639,7 @@ Dygraph.prototype.toDataCoords = function(x, y, axis) { * If x is null, this returns null. */ Dygraph.prototype.toDataXCoord = function(x) { - if (x == null) { + if (x === null) { return null; } @@ -628,7 +655,7 @@ Dygraph.prototype.toDataXCoord = function(x) { * if axis is null, this uses the first axis. */ Dygraph.prototype.toDataYCoord = function(y, axis) { - if (y == null) { + if (y === null) { return null; } @@ -640,7 +667,7 @@ Dygraph.prototype.toDataYCoord = function(y, axis) { return yRange[0] + (area.y + area.h - y) / area.h * (yRange[1] - yRange[0]); } else { // Computing the inverse of toDomCoord. - var pct = (y - area.y) / area.h + var pct = (y - area.y) / area.h; // Computing the inverse of toPercentYCoord. The function was arrived at with // the following steps: @@ -683,12 +710,11 @@ Dygraph.prototype.toDataYCoord = function(y, axis) { * @return { Number } A fraction in [0, 1] where 0 = the top edge. */ Dygraph.prototype.toPercentYCoord = function(y, axis) { - if (y == null) { + if (y === null) { return null; } if (typeof(axis) == "undefined") axis = 0; - var area = this.plotter_.area; var yRange = this.yAxisRange(axis); var pct; @@ -702,7 +728,7 @@ Dygraph.prototype.toPercentYCoord = function(y, axis) { pct = (logr1 - Dygraph.log10(y)) / (logr1 - Dygraph.log10(yRange[0])); } return pct; -} +}; /** * Converts an x value to a percentage from the left to the right of @@ -718,7 +744,7 @@ Dygraph.prototype.toPercentYCoord = function(y, axis) { * @return { Number } A fraction in [0, 1] where 0 = the left edge. */ Dygraph.prototype.toPercentXCoord = function(x) { - if (x == null) { + if (x === null) { return null; } @@ -731,7 +757,7 @@ Dygraph.prototype.toPercentXCoord = function(x) { * @return { Integer } The number of columns. */ Dygraph.prototype.numColumns = function() { - return this.rawData_[0].length; + return this.rawData_[0] ? this.rawData_[0].length : this.attr_("labels").length; }; /** @@ -743,6 +769,21 @@ Dygraph.prototype.numRows = function() { }; /** + * Returns the full range of the x-axis, as determined by the most extreme + * values in the data set. Not affected by zooming, visibility, etc. + * TODO(danvk): merge w/ xAxisExtremes + * @return { Array } A [low, high] pair + * @private + */ +Dygraph.prototype.fullXRange_ = function() { + if (this.numRows() > 0) { + return [this.rawData_[0][0], this.rawData_[this.numRows() - 1][0]]; + } else { + return [0, 1]; + } +}; + +/** * Returns the value in the given row and column. If the row and column exceed * the bounds on the data, returns null. Also returns null if the value is * missing. @@ -808,30 +849,28 @@ Dygraph.prototype.createInterface_ = function() { this.rangeSelector_.addToGraph(this.graphDiv, this.layout_); } - // Create the grapher - this.layout_ = new DygraphLayout(this); - - if (this.rangeSelector_) { - // This needs to happen after the graph canvases are added to the div and the layout object is created. - this.rangeSelector_.addToGraph(this.graphDiv, this.layout_); - } - var dygraph = this; - Dygraph.addEvent(this.mouseEventElement_, 'mousemove', function(e) { - dygraph.mouseMove_(e); - }); - Dygraph.addEvent(this.mouseEventElement_, 'mouseout', function(e) { - dygraph.mouseOut_(e); - }); + + this.mouseMoveHandler = function(e) { + dygraph.mouseMove_(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. - Dygraph.addEvent(window, 'resize', function(e) { - dygraph.resize(); - }); + Dygraph.addEvent(window, 'resize', this.resizeHandler); }; /** @@ -846,6 +885,10 @@ Dygraph.prototype.destroy = function() { node.removeChild(node.firstChild); } }; + + // remove mouse event handlers + Dygraph.removeEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler); + Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler); removeRecursive(this.maindiv_); var nullOut = function(obj) { @@ -855,7 +898,9 @@ Dygraph.prototype.destroy = function() { } } }; - + // remove event handlers + Dygraph.removeEvent(window,'resize',this.resizeHandler); + this.resizeHandler = null; // These may not all be necessary, but it can't hurt... nullOut(this.layout_); nullOut(this.plotter_); @@ -916,11 +961,12 @@ Dygraph.prototype.setColors_ = function() { var num = this.attr_("labels").length - 1; this.colors_ = []; var colors = this.attr_('colors'); + var i; if (!colors) { var sat = this.attr_('colorSaturation') || 1.0; var val = this.attr_('colorValue') || 0.5; var half = Math.ceil(num / 2); - for (var i = 1; i <= num; i++) { + for (i = 1; i <= num; i++) { if (!this.visibility()[i-1]) continue; // alternate colors for high contrast. var idx = i % 2 ? Math.ceil(i / 2) : (half + i / 2); @@ -928,7 +974,7 @@ Dygraph.prototype.setColors_ = function() { this.colors_.push(Dygraph.hsvToRGB(hue, sat, val)); } } else { - for (var i = 0; i < num; i++) { + for (i = 0; i < num; i++) { if (!this.visibility()[i]) continue; var colorStr = colors[i % colors.length]; this.colors_.push(colorStr); @@ -954,10 +1000,10 @@ Dygraph.prototype.getColors = function() { * @private */ 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); + 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'); @@ -1040,7 +1086,7 @@ Dygraph.prototype.createRollInterface_ = function() { * canvas (i.e. DOM Coords). */ Dygraph.prototype.dragGetX_ = function(e, context) { - return Dygraph.pageX(e) - context.px + return Dygraph.pageX(e) - context.px; }; /** @@ -1049,7 +1095,7 @@ Dygraph.prototype.dragGetX_ = function(e, context) { * canvas (i.e. DOM Coords). */ Dygraph.prototype.dragGetY_ = function(e, context) { - return Dygraph.pageY(e) - context.py + return Dygraph.pageY(e) - context.py; }; /** @@ -1149,7 +1195,6 @@ Dygraph.prototype.createDragInterface_ = function() { }); }; - /** * Draw a gray zoom rectangle over the desired area of the canvas. Also clears * up any previous zoom rectangles that were drawn. This could be optimized to @@ -1179,25 +1224,25 @@ Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, // Clean up from the previous rect if necessary if (prevDirection == Dygraph.HORIZONTAL) { - ctx.clearRect(Math.min(startX, prevEndX), this.layout_.plotArea.y, - Math.abs(startX - prevEndX), this.layout_.plotArea.h); + ctx.clearRect(Math.min(startX, prevEndX), this.layout_.getPlotArea().y, + Math.abs(startX - prevEndX), this.layout_.getPlotArea().h); } else if (prevDirection == Dygraph.VERTICAL){ - ctx.clearRect(this.layout_.plotArea.x, Math.min(startY, prevEndY), - this.layout_.plotArea.w, Math.abs(startY - prevEndY)); + ctx.clearRect(this.layout_.getPlotArea().x, Math.min(startY, prevEndY), + this.layout_.getPlotArea().w, Math.abs(startY - prevEndY)); } // Draw a light-grey rectangle to show the new viewing area if (direction == Dygraph.HORIZONTAL) { if (endX && startX) { ctx.fillStyle = "rgba(128,128,128,0.33)"; - ctx.fillRect(Math.min(startX, endX), this.layout_.plotArea.y, - Math.abs(endX - startX), this.layout_.plotArea.h); + ctx.fillRect(Math.min(startX, endX), this.layout_.getPlotArea().y, + Math.abs(endX - startX), this.layout_.getPlotArea().h); } } else if (direction == Dygraph.VERTICAL) { if (endY && startY) { ctx.fillStyle = "rgba(128,128,128,0.33)"; - ctx.fillRect(this.layout_.plotArea.x, Math.min(startY, endY), - this.layout_.plotArea.w, Math.abs(endY - startY)); + ctx.fillRect(this.layout_.getPlotArea().x, Math.min(startY, endY), + this.layout_.getPlotArea().w, Math.abs(endY - startY)); } } @@ -1235,6 +1280,16 @@ Dygraph.prototype.doZoomX_ = function(lowX, highX) { }; /** + * Transition function to use in animations. Returns values between 0.0 + * (totally old values) and 1.0 (totally new values) for each frame. + * @private + */ +Dygraph.zoomAnimationFunction = function(frame, numFrames) { + var k = 1.5; + return (1.0 - Math.pow(k, -frame)) / (1.0 - Math.pow(k, -numFrames)); +}; + +/** * Zoom to something containing [minDate, maxDate] values. Don't confuse this * method with doZoomX which accepts pixel coordinates. This function redraws * the graph. @@ -1244,12 +1299,18 @@ Dygraph.prototype.doZoomX_ = function(lowX, highX) { * @private */ Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) { - this.dateWindow_ = [minDate, maxDate]; + // TODO(danvk): when yAxisRange is null (i.e. "fit to data", the animation + // can produce strange effects. Rather than the y-axis transitioning slowly + // between values, it can jerk around.) + var old_window = this.xAxisRange(); + var new_window = [minDate, maxDate]; this.zoomed_x_ = true; - this.drawGraph_(); - if (this.attr_("zoomCallback")) { - this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges()); - } + var that = this; + this.doAnimatedZoom(old_window, new_window, null, null, function() { + if (that.attr_("zoomCallback")) { + that.attr_("zoomCallback")(minDate, maxDate, that.yAxisRanges()); + } + }); }; /** @@ -1266,21 +1327,22 @@ Dygraph.prototype.doZoomY_ = function(lowY, highY) { // Note that lowY (in pixels) corresponds to the max Value (in data coords). // This is because pixels increase as you go down on the screen, whereas data // coordinates increase as you go up the screen. - var valueRanges = []; + var oldValueRanges = this.yAxisRanges(); + var newValueRanges = []; for (var i = 0; i < this.axes_.length; i++) { var hi = this.toDataYCoord(lowY, i); var low = this.toDataYCoord(highY, i); - this.axes_[i].valueWindow = [low, hi]; - valueRanges.push([low, hi]); + newValueRanges.push([low, hi]); } this.zoomed_y_ = true; - this.drawGraph_(); - if (this.attr_("zoomCallback")) { - var xRange = this.xAxisRange(); - var yRange = this.yAxisRange(); - this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges()); - } + var that = this; + this.doAnimatedZoom(null, null, oldValueRanges, newValueRanges, function() { + if (that.attr_("zoomCallback")) { + var xRange = that.xAxisRange(); + that.attr_("zoomCallback")(xRange[0], xRange[1], that.yAxisRanges()); + } + }); }; /** @@ -1290,16 +1352,16 @@ Dygraph.prototype.doZoomY_ = function(lowY, highY) { * @private */ Dygraph.prototype.doUnzoom_ = function() { - var dirty = false; - if (this.dateWindow_ != null) { + var dirty = false, dirtyX = false, dirtyY = false; + if (this.dateWindow_ !== null) { dirty = true; - this.dateWindow_ = null; + dirtyX = true; } for (var i = 0; i < this.axes_.length; i++) { - if (this.axes_[i].valueWindow != null) { + if (typeof(this.axes_[i].valueWindow) !== 'undefined' && this.axes_[i].valueWindow !== null) { dirty = true; - delete this.axes_[i].valueWindow; + dirtyY = true; } } @@ -1307,88 +1369,276 @@ Dygraph.prototype.doUnzoom_ = function() { this.clearSelection(); if (dirty) { - // Putting the drawing operation before the callback because it resets - // yAxisRange. this.zoomed_x_ = false; this.zoomed_y_ = false; - this.drawGraph_(); - if (this.attr_("zoomCallback")) { - var minDate = this.rawData_[0][0]; - var maxDate = this.rawData_[this.rawData_.length - 1][0]; - this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges()); + + var minDate = this.rawData_[0][0]; + var maxDate = this.rawData_[this.rawData_.length - 1][0]; + + // With only one frame, don't bother calculating extreme ranges. + // TODO(danvk): merge this block w/ the code below. + if (!this.attr_("animatedZooms")) { + this.dateWindow_ = null; + for (i = 0; i < this.axes_.length; i++) { + if (this.axes_[i].valueWindow !== null) { + delete this.axes_[i].valueWindow; + } + } + this.drawGraph_(); + if (this.attr_("zoomCallback")) { + this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges()); + } + return; } + + var oldWindow=null, newWindow=null, oldValueRanges=null, newValueRanges=null; + if (dirtyX) { + oldWindow = this.xAxisRange(); + newWindow = [minDate, maxDate]; + } + + if (dirtyY) { + oldValueRanges = this.yAxisRanges(); + // TODO(danvk): this is pretty inefficient + var packed = this.gatherDatasets_(this.rolledSeries_, null); + var extremes = packed[1]; + + // this has the side-effect of modifying this.axes_. + // this doesn't make much sense in this context, but it's convenient (we + // need this.axes_[*].extremeValues) and not harmful since we'll be + // calling drawGraph_ shortly, which clobbers these values. + this.computeYAxisRanges_(extremes); + + newValueRanges = []; + for (i = 0; i < this.axes_.length; i++) { + var axis = this.axes_[i]; + newValueRanges.push(axis.valueRange != null ? axis.valueRange : axis.extremeRange); + } + } + + var that = this; + this.doAnimatedZoom(oldWindow, newWindow, oldValueRanges, newValueRanges, + function() { + that.dateWindow_ = null; + for (var i = 0; i < that.axes_.length; i++) { + if (that.axes_[i].valueWindow !== null) { + delete that.axes_[i].valueWindow; + } + } + if (that.attr_("zoomCallback")) { + that.attr_("zoomCallback")(minDate, maxDate, that.yAxisRanges()); + } + }); } }; /** - * 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. + * Combined animation logic for all zoom functions. + * either the x parameters or y parameters may be null. * @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; +Dygraph.prototype.doAnimatedZoom = function(oldXRange, newXRange, oldYRanges, newYRanges, callback) { + var steps = this.attr_("animatedZooms") ? Dygraph.ANIMATION_STEPS : 1; - var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_); + var windows = []; + var valueRanges = []; + var step, frac; + + if (oldXRange !== null && newXRange !== null) { + for (step = 1; step <= steps; step++) { + frac = Dygraph.zoomAnimationFunction(step, steps); + windows[step-1] = [oldXRange[0]*(1-frac) + frac*newXRange[0], + oldXRange[1]*(1-frac) + frac*newXRange[1]]; + } + } + + if (oldYRanges !== null && newYRanges !== null) { + for (step = 1; step <= steps; step++) { + frac = Dygraph.zoomAnimationFunction(step, steps); + var thisRange = []; + for (var j = 0; j < this.axes_.length; j++) { + thisRange.push([oldYRanges[j][0]*(1-frac) + frac*newYRanges[j][0], + oldYRanges[j][1]*(1-frac) + frac*newYRanges[j][1]]); + } + valueRanges[step-1] = thisRange; + } + } + + var that = this; + Dygraph.repeatAndCleanup(function(step) { + if (valueRanges.length) { + for (var i = 0; i < that.axes_.length; i++) { + var w = valueRanges[step][i]; + that.axes_[i].valueWindow = [w[0], w[1]]; + } + } + if (windows.length) { + that.dateWindow_ = windows[step]; + } + that.drawGraph_(); + }, steps, Dygraph.ANIMATION_DURATION / steps, callback); +}; + +/** + * Get the current graph's area object. + * + * Returns: {x, y, w, h} + */ +Dygraph.prototype.getArea = function() { + return this.plotter_.area; +}; - var lastx = -1; - var lasty = -1; +/** + * 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]; +}; - // 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 = null; var idx = -1; - for (var 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; + if (point === null) continue; + var dist = Math.abs(point.canvasx - domX); + if (minDistX !== null && dist >= minDistX) continue; + 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 (var i = 0; i < l; i++) { - if (points[i].xval == lastx) { - this.selPoints_.push(points[i]); +/** + * Given canvas X,Y coordinates, find the closest point + * @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 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 (point === null) 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; + } + } + var name = this.layout_.setNames[closestSeries]; + return { + row: idx, + seriesName: name, + point: closestPoint + }; +}; + +/** + * Given canvas X,Y coordinates, find the touched area in a stacked graph. + * @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 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]; + var py = p1.canvasy; + if (domX > p1.canvasx && row + 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); } - } - } else { - // Need to 'unstack' points starting from the bottom - var cumulative_sum = 0; - for (var 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]; - } - p.yval -= cumulative_sum; - cumulative_sum += p.yval; - this.selPoints_.push(p); + } else if (domX < p1.canvasx && row > 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); } } - this.selPoints_.reverse(); + // Stop if the point (domX, py) is above this series' upper edge + if (setIdx > 0 && py >= domY) break; + closestPoint = p1; + closestSeries = setIdx; } + 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; - - this.updateSelection_(); + var callback = this.attr_("highlightCallback"); + if (callback && selectionChanged) { + callback(event, this.lastx_, this.selPoints_, this.lastRow_, this.highlightSet_); + } }; /** @@ -1400,70 +1650,157 @@ Dygraph.prototype.mouseMove_ = function(event) { Dygraph.prototype.idxToRow_ = function(idx) { if (idx < 0) return -1; - for (var i in this.layout_.datasets) { - if (idx < this.layout_.datasets[i].length) { - return this.boundaryIds_[0][0]+idx; + // 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; } - idx -= this.layout_.datasets[i].length; + } + if (boundaryIdx < 0) return -1; + 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; + } + 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) { +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 ''; - var sepLines = this.attr_('labelsSeparateLines'); + sepLines = this.attr_('labelsSeparateLines'); var labels = this.attr_('labels'); - var html = ''; - for (var i = 1; i < labels.length; i++) { + html = ''; + for (i = 1; i < labels.length; i++) { if (!this.visibility()[i - 1]) continue; - var c = this.plotter_.colors[labels[i]]; - if (html != '') html += (sepLines ? '
' : ' '); - html += "—" + labels[i] + - ""; + 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'); - var html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":"; + html = xvf(x, xOptView, this.attr_('labels')[0], this) + ":"; var yOptViews = []; var num_axes = this.numAxes(); - for (var i = 0; i < num_axes; i++) { + for (i = 0; i < num_axes; i++) { yOptViews[i] = this.optionsViewForAxis_('y' + (i ? 1 + i : '')); } var showZeros = this.attr_("labelsShowZeroValues"); - var sepLines = this.attr_("labelsSeparateLines"); - for (var i = 0; i < this.selPoints_.length; i++) { + sepLines = this.attr_("labelsSeparateLines"); + for (i = 0; i < this.selPoints_.length; i++) { var pt = this.selPoints_[i]; - if (pt.yval == 0 && !showZeros) continue; + 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'); - var c = this.plotter_.colors[pt.name]; + 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; + html += "" + " " + pt.name + + ":" + yval + ""; } return html; }; @@ -1477,8 +1814,14 @@ Dygraph.prototype.generateLegendHTML_ = function(x, sel_points) { * x-value. Should have properties like 'name', 'yval' and 'canvasy'. */ Dygraph.prototype.setLegendHTML_ = function(x, sel_points) { - var html = this.generateLegendHTML_(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 { @@ -1489,19 +1832,70 @@ Dygraph.prototype.setLegendHTML_ = function(x, sel_points) { } }; +Dygraph.prototype.animateSelection_ = function(direction) { + var totalSteps = 10; + var millis = 30; + if (this.fadeLevel === undefined) { + this.fadeLevel = 0; + 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; + } + + 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() {}); +}; + /** * Draw dots over the selectied points in the data series. This function * takes care of cleanup of previously-drawn dots. * @private */ -Dygraph.prototype.updateSelection_ = function() { +Dygraph.prototype.updateSelection_ = function(opt_animFraction) { // 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 = this.attr_('highlightSeriesBackgroundFade'); + if (alpha) { + if (this.attr_('highlightSeriesAnimate')) { + 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'); - for (var i = 1; i < labels.length; i++) { + for (i = 1; i < labels.length; i++) { var r = this.attr_('highlightCircleSize', labels[i]); if (r > maxCircleSize) maxCircleSize = r; } @@ -1523,15 +1917,17 @@ Dygraph.prototype.updateSelection_ = function() { // Draw colored circles over the center of each selected point var canvasx = this.selPoints_[0].canvasx; ctx.save(); - for (var i = 0; i < this.selPoints_.length; i++) { + for (i = 0; i < this.selPoints_.length; i++) { var pt = this.selPoints_[i]; 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); + if (!callback) { + callback = Dygraph.Circles.DEFAULT; + } + callback(this.g, pt.name, ctx, canvasx, pt.canvasy, + this.plotter_.colors[pt.name], circleSize); } ctx.restore(); @@ -1545,19 +1941,30 @@ Dygraph.prototype.updateSelection_ = function() { * 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]; + for (var i = 0; i < this.boundaryIds_.length; i++) { + if (this.boundaryIds_[i] !== undefined) { + row -= this.boundaryIds_[i][0]; + break; + } + } } + var changed = false; if (row !== false && row >= 0) { - for (var i in this.layout_.datasets) { - if (row < this.layout_.datasets[i].length) { + 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) { var point = this.layout_.points[pos+row]; if (this.attr_("stackedGraph")) { @@ -1566,17 +1973,28 @@ Dygraph.prototype.setSelection = function(row) { this.selPoints_.push(point); } - pos += this.layout_.datasets[i].length; + 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; }; /** @@ -1600,11 +2018,18 @@ Dygraph.prototype.mouseOut_ = function(event) { */ Dygraph.prototype.clearSelection = function() { // Get rid of the overlay data + if (this.fadeLevel) { + this.animateSelection_(-1); + return; + } this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_); + this.fadeLevel = 0; this.setLegendHTML_(); this.selPoints_ = []; this.lastx_ = -1; -} + this.lastRow_ = -1; + this.highlightSet_ = null; +}; /** * Returns the number of the currently selected row. To get data for this row, @@ -1624,6 +2049,10 @@ Dygraph.prototype.getSelection = function() { return -1; }; +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 @@ -1644,7 +2073,7 @@ Dygraph.prototype.addXTicks_ = function() { if (this.dateWindow_) { range = [this.dateWindow_[0], this.dateWindow_[1]]; } else { - range = [this.rawData_[0][0], this.rawData_[this.rawData_.length - 1][0]]; + range = this.fullXRange_(); } var xAxisOptionsView = this.optionsViewForAxis_('x'); @@ -1667,33 +2096,33 @@ Dygraph.prototype.addXTicks_ = function() { * @return [low, high] */ Dygraph.prototype.extremeValues_ = function(series) { - var minY = null, maxY = null; + var minY = null, maxY = null, j, y; var bars = this.attr_("errorBars") || this.attr_("customBars"); if (bars) { // With custom bars, maxY is the max of the high values. - for (var j = 0; j < series.length; j++) { - var y = series[j][1][0]; + for (j = 0; j < series.length; j++) { + y = series[j][1][0]; if (!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, if (high < y) high = y; // e.g. in tests/custom-bars.html - if (maxY == null || high > maxY) { + if (maxY === null || high > maxY) { maxY = high; } - if (minY == null || low < minY) { + if (minY === null || low < minY) { minY = low; } } } else { - for (var j = 0; j < series.length; j++) { - var y = series[j][1]; + for (j = 0; j < series.length; j++) { + y = series[j][1]; if (y === null || isNaN(y)) continue; - if (maxY == null || y > maxY) { + if (maxY === null || y > maxY) { maxY = y; } - if (minY == null || y < minY) { + if (minY === null || y < minY) { minY = y; } } @@ -1736,6 +2165,17 @@ Dygraph.prototype.predraw_ = function() { this.rangeSelector_.renderStaticLayer(); } + // Convert the raw data (a 2D array) into the internal format and compute + // 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); + series = this.rollingAverage(series, this.rollPeriod_); + this.rolledSeries_.push(series); + } + // If the data or options have changed, then we'd better redraw. this.drawGraph_(); @@ -1745,85 +2185,48 @@ Dygraph.prototype.predraw_ = function() { }; /** - * Update the graph with new data. This method is called when the viewing area - * has changed. If the underlying data or options have changed, predraw_ will - * be called before drawGraph_ is called. + * Loop over all fields and create datasets, calculating extreme y-values for + * each series and extreme x-indices as we go. * - * 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.) + * dateWindow is passed in as an explicit parameter so that we can compute + * extreme values "speculatively", i.e. without actually setting state on the + * dygraph. * + * TODO(danvk): make this more of a true function + * @return [ datasets, seriesExtremes, boundaryIds ] * @private */ -Dygraph.prototype.drawGraph_ = function(clearSelection) { - var start = new Date(); - - if (typeof(clearSelection) === 'undefined') { - clearSelection = true; - } - - var data = this.rawData_; - - // This is used to set the second parameter to drawCallback, below. - var is_initial_draw = this.is_initial_draw_; - this.is_initial_draw_ = false; - - var minY = null, maxY = null; - this.layout_.removeAllDatasets(); - this.setColors_(); - this.attrs_['pointSize'] = 0.5 * this.attr_('highlightCircleSize'); - - // Loop over the fields (series). Go from the last to the first, - // because if they're stacked that's how we accumulate the values. - +Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { + var boundaryIds = []; var cumulative_y = []; // For stacked series. var datasets = []; - var extremes = {}; // series name -> [low, high] + var i, j, k; - // Loop over all fields and create datasets - for (var i = data[0].length - 1; i >= 1; i--) { + // Loop over the fields (series). Go from the last to the first, + // because if they're stacked that's how we accumulate the values. + var num_series = rolledSeries.length - 1; + for (i = num_series; i >= 1; i--) { if (!this.visibility()[i - 1]) continue; - var seriesName = this.attr_("labels")[i]; - var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i); - var logScale = this.attr_('logscale', i); - + // TODO(danvk): is this copy really necessary? var series = []; - for (var j = 0; j < data.length; j++) { - var date = data[j][0]; - var point = data[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. - if (point <= 0) { - point = null; - } - series.push([date, point]); - } else { - if (point != null || !connectSeparatedPoints) { - series.push([date, point]); - } - } + for (j = 0; j < rolledSeries[i].length; j++) { + series.push(rolledSeries[i][j]); } - // TODO(danvk): move this into predraw_. It's insane to do it here. - series = this.rollingAverage(series, this.rollPeriod_); - // Prune down to the desired range, if necessary (for zooming) // Because there can be lines going to points outside of the visible area, // we actually prune to visible points, plus one on either side. var bars = this.attr_("errorBars") || this.attr_("customBars"); - if (this.dateWindow_) { - var low = this.dateWindow_[0]; - var high= this.dateWindow_[1]; + if (dateWindow) { + var low = dateWindow[0]; + var high = dateWindow[1]; var pruned = []; // TODO(danvk): do binary search instead of linear search. // TODO(danvk): pass firstIdx and lastIdx directly to the renderer. var firstIdx = null, lastIdx = null; - for (var k = 0; k < series.length; k++) { + for (k = 0; k < series.length; k++) { if (series[k][0] >= low && firstIdx === null) { firstIdx = k; } @@ -1835,26 +2238,28 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { if (firstIdx > 0) firstIdx--; if (lastIdx === null) lastIdx = series.length - 1; if (lastIdx < series.length - 1) lastIdx++; - this.boundaryIds_[i-1] = [firstIdx, lastIdx]; - for (var k = firstIdx; k <= lastIdx; k++) { + boundaryIds[i-1] = [firstIdx, lastIdx]; + for (k = firstIdx; k <= lastIdx; k++) { pruned.push(series[k]); } series = pruned; } else { - this.boundaryIds_[i-1] = [0, series.length-1]; + boundaryIds[i-1] = [0, series.length-1]; } var seriesExtremes = this.extremeValues_(series); if (bars) { - for (var j=0; j seriesExtremes[1]) { seriesExtremes[1] = cumulative_y[x]; @@ -1875,14 +2280,58 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { } } } - extremes[seriesName] = seriesExtremes; + var seriesName = this.attr_("labels")[i]; + extremes[seriesName] = seriesExtremes; datasets[i] = series; } + return [ datasets, extremes, boundaryIds ]; +}; + +/** + * Update the graph with new data. This method is called when the viewing area + * 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) { + 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; + + this.layout_.removeAllDatasets(); + this.setColors_(); + this.attrs_.pointSize = 0.5 * this.attr_('highlightCircleSize'); + + var packed = this.gatherDatasets_(this.rolledSeries_, this.dateWindow_); + var datasets = packed[0]; + var extremes = packed[1]; + this.boundaryIds_ = packed[2]; + + this.setIndexByName_ = {}; + var labels = this.attr_("labels"); + 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(this.attr_("labels")[i], datasets[i]); + this.layout_.addDataset(labels[i], datasets[i]); + this.datasetIndex_[i] = dataIdx++; } this.computeYAxisRanges_(extremes); @@ -1901,7 +2350,7 @@ Dygraph.prototype.drawGraph_ = function(clearSelection) { if (this.attr_("timingName")) { var end = new Date(); if (console) { - console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms") + console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms"); } } }; @@ -1912,10 +2361,10 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) { this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width, this.canvas_.height); - if (is_initial_draw) { - // Generate a static legend before any particular point is selected. - this.setLegendHTML_(); - } else { + // 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 @@ -1951,10 +2400,10 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw, clearSelection) { Dygraph.prototype.computeYAxes_ = function() { // Preserve valueWindow settings if they exist, and if the user hasn't // specified a new valueRange. - var valueWindows; - if (this.axes_ != undefined && this.user_attrs_.hasOwnProperty("valueRange") == false) { + var i, valueWindows, seriesName, axis, index, opts, v; + if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) { valueWindows = []; - for (var index = 0; index < this.axes_.length; index++) { + for (index = 0; index < this.axes_.length; index++) { valueWindows.push(this.axes_[index].valueWindow); } } @@ -1965,7 +2414,7 @@ Dygraph.prototype.computeYAxes_ = function() { // Get a list of series names. var labels = this.attr_("labels"); var series = {}; - for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1); + for (i = 1; i < labels.length; i++) series[labels[i]] = (i - 1); // all options which could be applied per-axis: var axisOptions = [ @@ -1981,23 +2430,23 @@ Dygraph.prototype.computeYAxes_ = function() { ]; // Copy global axis options over to the first axis. - for (var i = 0; i < axisOptions.length; i++) { + for (i = 0; i < axisOptions.length; i++) { var k = axisOptions[i]; - var v = this.attr_(k); + v = this.attr_(k); if (v) this.axes_[0][k] = v; } // Go through once and add all the axes. - for (var seriesName in series) { + for (seriesName in series) { if (!series.hasOwnProperty(seriesName)) continue; - var axis = this.attr_("axis", seriesName); - if (axis == null) { + axis = this.attr_("axis", seriesName); + if (axis === null) { this.seriesToAxisMap_[seriesName] = 0; continue; } if (typeof(axis) == 'object') { // Add a new axis, making a copy of its per-axis options. - var opts = {}; + opts = {}; Dygraph.update(opts, this.axes_[0]); Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this. var yAxisId = this.axes_.length; @@ -2011,9 +2460,9 @@ Dygraph.prototype.computeYAxes_ = function() { // Go through one more time and assign series to an axis defined by another // series, e.g. { 'Y1: { axis: {} }, 'Y2': { axis: 'Y1' } } - for (var seriesName in series) { + for (seriesName in series) { if (!series.hasOwnProperty(seriesName)) continue; - var axis = this.attr_("axis", seriesName); + axis = this.attr_("axis", seriesName); if (typeof(axis) == 'string') { if (!this.seriesToAxisMap_.hasOwnProperty(axis)) { this.error("Series " + seriesName + " wants to share a y-axis with " + @@ -2025,23 +2474,28 @@ Dygraph.prototype.computeYAxes_ = function() { } } - // Now we remove series from seriesToAxisMap_ which are not visible. We do - // this last so that hiding the first series doesn't destroy the axis - // properties of the primary axis. - var seriesToAxisFiltered = {}; - var vis = this.visibility(); - for (var i = 1; i < labels.length; i++) { - var s = labels[i]; - if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s]; - } - this.seriesToAxisMap_ = seriesToAxisFiltered; - - if (valueWindows != undefined) { + if (valueWindows !== undefined) { // Restore valueWindow settings. - for (var index = 0; index < valueWindows.length; index++) { + for (index = 0; index < valueWindows.length; index++) { this.axes_[index].valueWindow = valueWindows[index]; } } + + // New axes options + for (axis = 0; axis < this.axes_.length; axis++) { + if (axis === 0) { + opts = this.optionsViewForAxis_('y' + (axis ? '2' : '')); + v = opts("valueRange"); + if (v) this.axes_[axis].valueRange = v; + } else { // To keep old behavior + var axes = this.user_attrs_.axes; + if (axes && axes.y2) { + v = axes.y2.valueRange; + if (v) this.axes_[axis].valueRange = v; + } + } + } + }; /** @@ -2078,8 +2532,8 @@ Dygraph.prototype.axisPropertiesForSeries = function(series) { */ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { // Build a map from axis number -> [list of series names] - var seriesForAxis = []; - for (var series in this.seriesToAxisMap_) { + var seriesForAxis = [], series; + for (series in this.seriesToAxisMap_) { if (!this.seriesToAxisMap_.hasOwnProperty(series)) continue; var idx = this.seriesToAxisMap_[series]; while (seriesForAxis.length <= idx) seriesForAxis.push([]); @@ -2095,40 +2549,43 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { axis.extremeRange = [0, 1]; } else { // Calculate the extremes of extremes. - var series = seriesForAxis[i]; + series = seriesForAxis[i]; var minY = Infinity; // extremes[series[0]][0]; var maxY = -Infinity; // extremes[series[0]][1]; var extremeMinY, extremeMaxY; + for (var j = 0; j < series.length; j++) { + // this skips invisible series + if (!extremes.hasOwnProperty(series[j])) continue; + // Only use valid extremes to stop null data series' from corrupting the scale. extremeMinY = extremes[series[j]][0]; - if (extremeMinY != null) { + if (extremeMinY !== null) { minY = Math.min(extremeMinY, minY); } extremeMaxY = extremes[series[j]][1]; - if (extremeMaxY != null) { + if (extremeMaxY !== null) { maxY = Math.max(extremeMaxY, maxY); } } if (axis.includeZero && minY > 0) minY = 0; - // Ensure we have a valid scale, otherwise defualt to zero for safety. + // Ensure we have a valid scale, otherwise default to [0, 1] for safety. if (minY == Infinity) minY = 0; - if (maxY == -Infinity) maxY = 0; + if (maxY == -Infinity) maxY = 1; // Add some padding and round up to an integer to be human-friendly. var span = maxY - minY; // special case: if we have no sense of scale, use +/-10% of the sole value. - if (span == 0) { span = maxY; } + if (span === 0) { span = maxY; } - var maxAxisY; - var minAxisY; + var maxAxisY, minAxisY; if (axis.logscale) { - var maxAxisY = maxY + 0.1 * span; - var minAxisY = minY; + maxAxisY = maxY + 0.1 * span; + minAxisY = minY; } else { - var maxAxisY = maxY + 0.1 * span; - var minAxisY = minY - 0.1 * span; + maxAxisY = maxY + 0.1 * span; + minAxisY = minY - 0.1 * span; // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense. if (!this.attr_("avoidMinZero")) { @@ -2160,7 +2617,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { // independent ticks, then that is permissible as well. var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); var ticker = opts('ticker'); - if (i == 0 || axis.independentTicks) { + if (i === 0 || axis.independentTicks) { axis.ticks = ticker(axis.computedValueRange[0], axis.computedValueRange[1], this.height_, // TODO(danvk): should be area.height @@ -2189,6 +2646,37 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { }; /** + * Extracts one series from the raw data (a 2D array) into an array of (date, + * value) tuples. + * + * This is where undesirable points (i.e. negative values on log scales and + * missing values through which we wish to connect lines) are dropped. + * + * @private + */ +Dygraph.prototype.extractSeries_ = function(rawData, i, logScale, connectSeparatedPoints) { + 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. + if (point <= 0) { + point = null; + } + series.push([x, point]); + } else { + if (point !== null || !connectSeparatedPoints) { + series.push([x, point]); + } + } + } + return series; +}; + +/** * @private * Calculates the rolling average of a data set. * If originalData is [label, val], rolls the average of those. @@ -2204,15 +2692,16 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { if (originalData.length < 2) return originalData; - var rollPeriod = Math.min(rollPeriod, originalData.length); + rollPeriod = Math.min(rollPeriod, originalData.length); var rollingData = []; var sigma = this.attr_("sigma"); + var low, high, i, j, y, sum, num_ok, stddev; if (this.fractions_) { var num = 0; var den = 0; // numerator/denominator var mult = 100.0; - for (var i = 0; i < originalData.length; i++) { + for (i = 0; i < originalData.length; i++) { num += originalData[i][1][0]; den += originalData[i][1][1]; if (i - rollPeriod >= 0) { @@ -2223,22 +2712,22 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { var date = originalData[i][0]; var value = den ? num / den : 0.0; if (this.attr_("errorBars")) { - if (this.wilsonInterval_) { + if (this.attr_("wilsonInterval")) { // For more details on this confidence interval, see: // http://en.wikipedia.org/wiki/Binomial_confidence_interval if (den) { var p = value < 0 ? 0 : value, n = den; var pm = sigma * Math.sqrt(p*(1-p)/n + sigma*sigma/(4*n*n)); var denom = 1 + sigma * sigma / den; - var low = (p + sigma * sigma / (2 * den) - pm) / denom; - var high = (p + sigma * sigma / (2 * den) + pm) / denom; + low = (p + sigma * sigma / (2 * den) - pm) / denom; + high = (p + sigma * sigma / (2 * den) + pm) / denom; rollingData[i] = [date, [p * mult, (p - low) * mult, (high - p) * mult]]; } else { rollingData[i] = [date, [0, 0, 0]]; } } else { - var stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0; + stddev = den ? sigma * Math.sqrt(value * (1 - value) / den) : 1.0; rollingData[i] = [date, [mult * value, mult * stddev, mult * stddev]]; } } else { @@ -2246,16 +2735,16 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { } } } else if (this.attr_("customBars")) { - var low = 0; + low = 0; var mid = 0; - var high = 0; + high = 0; var count = 0; - for (var i = 0; i < originalData.length; i++) { + for (i = 0; i < originalData.length; i++) { var data = originalData[i][1]; - var y = data[1]; + y = data[1]; rollingData[i] = [originalData[i][0], [y, y - data[0], data[2] - y]]; - if (y != null && !isNaN(y)) { + if (y !== null && !isNaN(y)) { low += data[0]; mid += y; high += data[2]; @@ -2263,7 +2752,7 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { } if (i - rollPeriod >= 0) { var prev = originalData[i - rollPeriod]; - if (prev[1][1] != null && !isNaN(prev[1][1])) { + if (prev[1][1] !== null && !isNaN(prev[1][1])) { low -= prev[1][0]; mid -= prev[1][1]; high -= prev[1][2]; @@ -2281,18 +2770,17 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { } else { // Calculate the rolling average for the first rollPeriod - 1 points where // there is not enough data to roll over the full number of points - var num_init_points = Math.min(rollPeriod - 1, originalData.length - 2); if (!this.attr_("errorBars")){ if (rollPeriod == 1) { return originalData; } - for (var i = 0; i < originalData.length; i++) { - var sum = 0; - var num_ok = 0; - for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { - var y = originalData[j][1]; - if (y == null || isNaN(y)) continue; + for (i = 0; i < originalData.length; i++) { + sum = 0; + num_ok = 0; + for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { + y = originalData[j][1]; + if (y === null || isNaN(y)) continue; num_ok++; sum += originalData[j][1]; } @@ -2304,19 +2792,19 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { } } else { - for (var i = 0; i < originalData.length; i++) { - var sum = 0; + for (i = 0; i < originalData.length; i++) { + sum = 0; var variance = 0; - var num_ok = 0; - for (var j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { - var y = originalData[j][1][0]; - if (y == null || isNaN(y)) continue; + num_ok = 0; + for (j = Math.max(0, i - rollPeriod + 1); j < i + 1; j++) { + y = originalData[j][1][0]; + if (y === null || isNaN(y)) continue; num_ok++; sum += originalData[j][1][0]; variance += Math.pow(originalData[j][1][1], 2); } if (num_ok) { - var stddev = Math.sqrt(variance) / num_ok; + stddev = Math.sqrt(variance) / num_ok; rollingData[i] = [originalData[i][0], [sum / num_ok, sigma * stddev, sigma * stddev]]; } else { @@ -2337,7 +2825,8 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { */ Dygraph.prototype.detectTypeFromString_ = function(str) { var isDate = false; - if (str.indexOf('-') > 0 || + var dashPos = str.indexOf('-'); // could be 2006-01-01 _or_ 1.0e-2 + if ((dashPos > 0 && (str[dashPos-1] != 'e' && str[dashPos-1] != 'E')) || str.indexOf('/') >= 0 || isNaN(parseFloat(str))) { isDate = true; @@ -2416,6 +2905,7 @@ Dygraph.prototype.parseFloat_ = function(x, opt_line_no, opt_line) { Dygraph.prototype.parseCSV_ = function(data) { var ret = []; var lines = data.split("\n"); + var vals, j; // Use the default delimiter or fall back to a tab if that makes sense. var delim = this.attr_('delimiter'); @@ -2438,7 +2928,7 @@ Dygraph.prototype.parseCSV_ = function(data) { for (var i = start; i < lines.length; i++) { var line = lines[i]; line_no = i; - if (line.length == 0) continue; // skip blank lines + if (line.length === 0) continue; // skip blank lines if (line[0] == '#') continue; // skip comment lines var inFields = line.split(delim); if (inFields.length < 2) continue; @@ -2453,9 +2943,9 @@ Dygraph.prototype.parseCSV_ = function(data) { // If fractions are expected, parse the numbers as "A/B" if (this.fractions_) { - for (var j = 1; j < inFields.length; j++) { + for (j = 1; j < inFields.length; j++) { // TODO(danvk): figure out an appropriate way to flag parse errors. - var vals = inFields[j].split("/"); + vals = inFields[j].split("/"); if (vals.length != 2) { this.error('Expected fractional "num/den" values in CSV data ' + "but found a value '" + inFields[j] + "' on line " + @@ -2473,32 +2963,32 @@ Dygraph.prototype.parseCSV_ = function(data) { 'but line ' + (1 + i) + ' has an odd number of values (' + (inFields.length - 1) + "): '" + line + "'"); } - for (var j = 1; j < inFields.length; j += 2) { + for (j = 1; j < inFields.length; j += 2) { fields[(j + 1) / 2] = [this.parseFloat_(inFields[j], i, line), this.parseFloat_(inFields[j + 1], i, line)]; } } else if (this.attr_("customBars")) { // Bars are a low;center;high tuple - for (var j = 1; j < inFields.length; j++) { + for (j = 1; j < inFields.length; j++) { var val = inFields[j]; if (/^ *$/.test(val)) { fields[j] = [null, null, null]; } else { - var vals = val.split(";"); + vals = val.split(";"); if (vals.length == 3) { fields[j] = [ this.parseFloat_(vals[0], i, line), this.parseFloat_(vals[1], i, line), this.parseFloat_(vals[2], i, line) ]; } else { - this.warning('When using customBars, values must be either blank ' + - 'or "low;center;high" tuples (got "' + val + - '" on line ' + (1+i)); + this.warn('When using customBars, values must be either blank ' + + 'or "low;center;high" tuples (got "' + val + + '" on line ' + (1+i)); } } } } else { // Values are just numbers - for (var j = 1; j < inFields.length; j++) { + for (j = 1; j < inFields.length; j++) { fields[j] = this.parseFloat_(inFields[j], i, line); } } @@ -2516,9 +3006,9 @@ Dygraph.prototype.parseCSV_ = function(data) { // first row parsed correctly, then they probably double-specified the // labels. We go with the values set in the option, discard this row and // log a warning to the JS console. - if (i == 0 && this.attr_('labels')) { + if (i === 0 && this.attr_('labels')) { var all_null = true; - for (var j = 0; all_null && j < fields.length; j++) { + for (j = 0; all_null && j < fields.length; j++) { if (fields[j]) all_null = false; } if (all_null) { @@ -2533,7 +3023,7 @@ Dygraph.prototype.parseCSV_ = function(data) { if (outOfOrder) { this.warn("CSV is out of order; order it correctly to speed loading."); - ret.sort(function(a,b) { return a[0] - b[0] }); + ret.sort(function(a,b) { return a[0] - b[0]; }); } return ret; @@ -2549,20 +3039,21 @@ Dygraph.prototype.parseCSV_ = function(data) { */ Dygraph.prototype.parseArray_ = function(data) { // Peek at the first x value to see if it's numeric. - if (data.length == 0) { + if (data.length === 0) { this.error("Can't plot empty data set"); return null; } - if (data[0].length == 0) { + if (data[0].length === 0) { this.error("Data set cannot contain an empty row"); return null; } - if (this.attr_("labels") == null) { + var i; + if (this.attr_("labels") === null) { this.warn("Using default labels. Set labels explicitly via 'labels' " + "in the options parameter"); this.attrs_.labels = [ "X" ]; - for (var i = 1; i < data[0].length; i++) { + for (i = 1; i < data[0].length; i++) { this.attrs_.labels.push("Y" + i); } } @@ -2575,14 +3066,14 @@ Dygraph.prototype.parseArray_ = function(data) { // Assume they're all dates. var parsedData = Dygraph.clone(data); - for (var i = 0; i < data.length; i++) { - if (parsedData[i].length == 0) { + for (i = 0; i < data.length; i++) { + if (parsedData[i].length === 0) { this.error("Row " + (1 + i) + " of data is empty"); return null; } - if (parsedData[i][0] == null - || typeof(parsedData[i][0].getTime) != 'function' - || isNaN(parsedData[i][0].getTime())) { + if (parsedData[i][0] === null || + typeof(parsedData[i][0].getTime) != 'function' || + isNaN(parsedData[i][0].getTime())) { this.error("x value in row " + (1 + i) + " is not a Date"); return null; } @@ -2609,6 +3100,19 @@ Dygraph.prototype.parseArray_ = function(data) { * @private */ Dygraph.prototype.parseDataTable_ = function(data) { + var shortTextForAnnotationNum = function(num) { + // converts [0-9]+ [A-Z][a-z]* + // example: 0=A, 1=B, 25=Z, 26=Aa, 27=Ab + // and continues like.. Ba Bb .. Za .. Zz..Aaa...Zzz Aaaa Zzzz + var shortText = String.fromCharCode(65 /* A */ + num % 26); + num = Math.floor(num / 26); + while ( num > 0 ) { + shortText = String.fromCharCode(65 /* A */ + (num - 1) % 26 ) + shortText.toLowerCase(); + num = Math.floor((num - 1) / 26); + } + return shortText; + } + var cols = data.getNumberOfColumns(); var rows = data.getNumberOfRows(); @@ -2633,7 +3137,8 @@ Dygraph.prototype.parseDataTable_ = function(data) { var colIdx = []; var annotationCols = {}; // data index -> [annotation cols] var hasAnnotations = false; - for (var i = 1; i < cols; i++) { + var i, j; + for (i = 1; i < cols; i++) { var type = data.getColumnType(i); if (type == 'number') { colIdx.push(i); @@ -2655,7 +3160,7 @@ Dygraph.prototype.parseDataTable_ = function(data) { // Read column labels // TODO(danvk): add support back for errorBars var labels = [data.getColumnLabel(0)]; - for (var i = 0; i < colIdx.length; i++) { + for (i = 0; i < colIdx.length; i++) { labels.push(data.getColumnLabel(colIdx[i])); if (this.attr_("errorBars")) i += 1; } @@ -2665,7 +3170,7 @@ Dygraph.prototype.parseDataTable_ = function(data) { var ret = []; var outOfOrder = false; var annotations = []; - for (var i = 0; i < rows; i++) { + for (i = 0; i < rows; i++) { var row = []; if (typeof(data.getValue(i, 0)) === 'undefined' || data.getValue(i, 0) === null) { @@ -2680,16 +3185,16 @@ Dygraph.prototype.parseDataTable_ = function(data) { row.push(data.getValue(i, 0)); } if (!this.attr_("errorBars")) { - for (var j = 0; j < colIdx.length; j++) { + for (j = 0; j < colIdx.length; j++) { var col = colIdx[j]; row.push(data.getValue(i, col)); if (hasAnnotations && annotationCols.hasOwnProperty(col) && - data.getValue(i, annotationCols[col][0]) != null) { + data.getValue(i, annotationCols[col][0]) !== null) { var ann = {}; ann.series = data.getColumnLabel(col); ann.xval = row[0]; - ann.shortText = String.fromCharCode(65 /* A */ + annotations.length) + ann.shortText = shortTextForAnnotationNum(annotations.length); ann.text = ''; for (var k = 0; k < annotationCols[col].length; k++) { if (k) ann.text += "\n"; @@ -2700,11 +3205,11 @@ Dygraph.prototype.parseDataTable_ = function(data) { } // Strip out infinities, which give dygraphs problems later on. - for (var j = 0; j < row.length; j++) { + for (j = 0; j < row.length; j++) { if (!isFinite(row[j])) row[j] = null; } } else { - for (var j = 0; j < cols - 1; j++) { + for (j = 0; j < cols - 1; j++) { row.push([ data.getValue(i, 1 + 2 * j), data.getValue(i, 2 + 2 * j) ]); } } @@ -2716,14 +3221,14 @@ Dygraph.prototype.parseDataTable_ = function(data) { if (outOfOrder) { this.warn("DataTable is out of order; order it correctly to speed loading."); - ret.sort(function(a,b) { return a[0] - b[0] }); + ret.sort(function(a,b) { return a[0] - b[0]; }); } this.rawData_ = ret; if (annotations.length > 0) { this.setAnnotations(annotations, true); } -} +}; /** * Get the CSV data. If it's in a function, call that function. If it's in a @@ -2731,38 +3236,42 @@ Dygraph.prototype.parseDataTable_ = function(data) { * @private */ Dygraph.prototype.start_ = function() { - if (typeof this.file_ == 'function') { - // CSV string. Pretend we got it via XHR. - this.loadedEvent_(this.file_()); - } else if (Dygraph.isArrayLike(this.file_)) { - this.rawData_ = this.parseArray_(this.file_); + var data = this.file_; + + // Functions can return references of all other types. + if (typeof data == 'function') { + data = data(); + } + + if (Dygraph.isArrayLike(data)) { + this.rawData_ = this.parseArray_(data); this.predraw_(); - } else if (typeof this.file_ == 'object' && - typeof this.file_.getColumnRange == 'function') { + } else if (typeof data == 'object' && + typeof data.getColumnRange == 'function') { // must be a DataTable from gviz. - this.parseDataTable_(this.file_); + this.parseDataTable_(data); this.predraw_(); - } else if (typeof this.file_ == 'string') { + } else if (typeof data == 'string') { // Heuristic: a newline means it's CSV data. Otherwise it's an URL. - if (this.file_.indexOf('\n') >= 0) { - this.loadedEvent_(this.file_); + if (data.indexOf('\n') >= 0) { + this.loadedEvent_(data); } else { var req = new XMLHttpRequest(); var caller = this; req.onreadystatechange = function () { if (req.readyState == 4) { - if (req.status == 200 || // Normal http - req.status == 0) { // Chrome w/ --allow-file-access-from-files + if (req.status === 200 || // Normal http + req.status === 0) { // Chrome w/ --allow-file-access-from-files caller.loadedEvent_(req.responseText); } } }; - req.open("GET", this.file_, true); + req.open("GET", data, true); req.send(null); } } else { - this.error("Unknown data format: " + (typeof this.file_)); + this.error("Unknown data format: " + (typeof data)); } }; @@ -2787,7 +3296,7 @@ Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) { if (typeof(block_redraw) == 'undefined') block_redraw = false; // mapLegacyOptions_ drops the "file" parameter as a convenience to us. - var file = input_attrs['file']; + var file = input_attrs.file; var attrs = Dygraph.mapLegacyOptions_(input_attrs); // TODO(danvk): this is a mess. Move these options into attr_. @@ -2797,11 +3306,11 @@ Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) { if ('dateWindow' in attrs) { this.dateWindow_ = attrs.dateWindow; if (!('isZoomedIgnoreProgrammaticZoom' in attrs)) { - this.zoomed_x_ = attrs.dateWindow != null; + this.zoomed_x_ = (attrs.dateWindow !== null); } } if ('valueRange' in attrs && !('isZoomedIgnoreProgrammaticZoom' in attrs)) { - this.zoomed_y_ = attrs.valueRange != null; + this.zoomed_y_ = (attrs.valueRange !== null); } // TODO(danvk): validate per-series options. @@ -2936,10 +3445,11 @@ Dygraph.prototype.visibility = function() { // Do lazy-initialization, so that this happens after we know the number of // data series. if (!this.attr_("visibility")) { - this.attrs_["visibility"] = []; + this.attrs_.visibility = []; } - while (this.attr_("visibility").length < this.rawData_[0].length - 1) { - this.attr_("visibility").push(true); + // TODO(danvk): it looks like this could go into an infinite loop w/ user_attrs. + while (this.attr_("visibility").length < this.numColumns() - 1) { + this.attrs_.visibility.push(true); } return this.attr_("visibility"); }; @@ -2969,6 +3479,9 @@ Dygraph.prototype.size = function() { /** * Update the list of annotations and redraw the chart. + * See dygraphs.com/annotations.html for more info on how to use annotations. + * @param ann {Array} An array of annotation objects. + * @param suppressDraw {Boolean} Set to "true" to block chart redraw (optional). */ Dygraph.prototype.setAnnotations = function(ann, suppressDraw) { // Only add the annotation CSS rule once we know it will be used. @@ -2988,15 +3501,28 @@ 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) { + return this.attr_("labels").slice(); +}; + +/** * Get the index of a series (column) given its name. The first column is the * x-axis, so the data series start with index 1. */ Dygraph.prototype.indexFromSetName = function(name) { - var labels = this.attr_("labels"); - for (var i = 0; i < labels.length; i++) { - if (labels[i] == name) return i; - } - return null; + return this.setIndexByName_[name]; +}; + +/** + * 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)]; }; /** @@ -3038,7 +3564,7 @@ Dygraph.addAnnotationRule = function() { } this.warn("Unable to add default annotation CSS rule; display may be off."); -} +}; // Older pages may still use this name. -DateGraph = Dygraph; +var DateGraph = Dygraph;