X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=4ab7539e1808520a34ee5da8c9adecdc3524c806;hb=3eacb8c2d4f0aca40cf969c21cb4c4ae72704b65;hp=b516f5eb9ebe19aef9997038e1530c0944b4c73a;hpb=e4ddb639e116ae48dba0ab9c130feae6390eafa3;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index b516f5e..4ab7539 100644 --- a/dygraph.js +++ b/dygraph.js @@ -95,6 +95,12 @@ Dygraph.DEFAULT_HEIGHT = 320; Dygraph.ANIMATION_STEPS = 12; Dygraph.ANIMATION_DURATION = 200; +// Label constants for the labelsKMB and labelsKMG2 options. +// (i.e. '100000' -> '100K') +Dygraph.KMB_LABELS = [ 'K', 'M', 'B', 'T', 'Q' ]; +Dygraph.KMG2_BIG_LABELS = [ 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y' ]; +Dygraph.KMG2_SMALL_LABELS = [ 'm', 'u', 'n', 'p', 'f', 'a', 'z', 'y' ]; + // These are defined before DEFAULT_ATTRS so that it can refer to them. /** * @private @@ -116,14 +122,60 @@ Dygraph.numberValueFormatter = function(x, opts, pt, g) { var digits = opts('digitsAfterDecimal'); var maxNumberWidth = opts('maxNumberWidth'); + var kmb = opts('labelsKMB'); + var kmg2 = opts('labelsKMG2'); + + var label; + // switch to scientific notation if we underflow or overflow fixed display. if (x !== 0.0 && (Math.abs(x) >= Math.pow(10, maxNumberWidth) || Math.abs(x) < Math.pow(10, -digits))) { - return x.toExponential(digits); + label = x.toExponential(digits); } else { - return '' + Dygraph.round_(x, digits); + label = '' + Dygraph.round_(x, digits); + } + + if (kmb || kmg2) { + var k; + var k_labels = []; + var m_labels = []; + if (kmb) { + k = 1000; + k_labels = Dygraph.KMB_LABELS; + } + if (kmg2) { + if (kmb) Dygraph.warn("Setting both labelsKMB and labelsKMG2. Pick one!"); + k = 1024; + k_labels = Dygraph.KMG2_BIG_LABELS; + m_labels = Dygraph.KMG2_SMALL_LABELS; + } + + var absx = Math.abs(x); + var n = Dygraph.pow(k, k_labels.length); + for (var j = k_labels.length - 1; j >= 0; j--, n /= k) { + if (absx >= n) { + label = Dygraph.round_(x / n, digits) + k_labels[j]; + break; + } + } + if (kmg2) { + // TODO(danvk): clean up this logic. Why so different than kmb? + var x_parts = String(x.toExponential()).split('e-'); + if (x_parts.length === 2 && x_parts[1] >= 3 && x_parts[1] <= 24) { + if (x_parts[1] % 3 > 0) { + label = Dygraph.round_(x_parts[0] / + Dygraph.pow(10, (x_parts[1] % 3)), + digits); + } else { + label = Number(x_parts[0]).toFixed(2); + } + label += m_labels[Math.floor(x_parts[1] / 3) - 1]; + } + } } + + return label; }; /** @@ -246,6 +298,8 @@ Dygraph.DEFAULT_ATTRS = { stepPlot: false, avoidMinZero: false, + xRangePad: 0, + yRangePad: null, drawAxesAtZero: false, // Sizes of the various chart labels. @@ -290,18 +344,24 @@ Dygraph.DEFAULT_ATTRS = { pixelsPerLabel: 60, axisLabelFormatter: Dygraph.dateAxisFormatter, valueFormatter: Dygraph.dateString_, + drawGrid: true, + independentTicks: true, ticker: null // will be set in dygraph-tickers.js }, y: { pixelsPerLabel: 30, valueFormatter: Dygraph.numberValueFormatter, axisLabelFormatter: Dygraph.numberAxisLabelFormatter, + drawGrid: true, + independentTicks: true, ticker: null // will be set in dygraph-tickers.js }, y2: { pixelsPerLabel: 30, valueFormatter: Dygraph.numberValueFormatter, axisLabelFormatter: Dygraph.numberAxisLabelFormatter, + drawGrid: false, + independentTicks: false, ticker: null // will be set in dygraph-tickers.js } } @@ -610,7 +670,7 @@ Dygraph.prototype.optionsViewForAxis_ = function(axis) { var self = this; return function(opt) { var axis_opts = self.user_attrs_.axes; - if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) { + if (axis_opts && axis_opts[axis] && axis_opts[axis].hasOwnProperty(opt)) { return axis_opts[axis][opt]; } // user-specified attributes always trump defaults, even if they're less @@ -620,7 +680,7 @@ Dygraph.prototype.optionsViewForAxis_ = function(axis) { } axis_opts = self.attrs_.axes; - if (axis_opts && axis_opts[axis] && axis_opts[axis][opt]) { + if (axis_opts && axis_opts[axis] && axis_opts[axis].hasOwnProperty(opt)) { return axis_opts[axis][opt]; } // check old-style axis options @@ -657,8 +717,18 @@ Dygraph.prototype.xAxisRange = function() { * data set. */ Dygraph.prototype.xAxisExtremes = function() { + var pad = this.attr_('xRangePad') / this.plotter_.area.w; + if (this.numRows() === 0) { + return [0 - pad, 1 + pad]; + } var left = this.rawData_[0][0]; var right = this.rawData_[this.rawData_.length - 1][0]; + if (pad) { + // Must keep this in sync with dygraph-layout _evaluateLimits() + var range = right - left; + left -= range * pad; + right += range * pad; + } return [left, right]; }; @@ -874,6 +944,7 @@ Dygraph.prototype.toPercentXCoord = function(x) { * @return { Integer } The number of columns. */ Dygraph.prototype.numColumns = function() { + if (!this.rawData_) return 0; return this.rawData_[0] ? this.rawData_[0].length : this.attr_("labels").length; }; @@ -882,25 +953,11 @@ Dygraph.prototype.numColumns = function() { * @return { Integer } The number of rows, less any header. */ Dygraph.prototype.numRows = function() { + if (!this.rawData_) return 0; return this.rawData_.length; }; /** - * 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. @@ -928,17 +985,16 @@ Dygraph.prototype.createInterface_ = function() { var enclosing = this.maindiv_; this.graphDiv = document.createElement("div"); - this.graphDiv.style.width = this.width_ + "px"; - this.graphDiv.style.height = this.height_ + "px"; + + // TODO(danvk): any other styles that are useful to set here? + this.graphDiv.style.textAlign = 'left'; // This is a CSS "reset" enclosing.appendChild(this.graphDiv); // Create the canvas for interactive parts of the chart. this.canvas_ = Dygraph.createCanvas(); this.canvas_.style.position = "absolute"; - this.canvas_.width = this.width_; - this.canvas_.height = this.height_; - this.canvas_.style.width = this.width_ + "px"; // for IE - this.canvas_.style.height = this.height_ + "px"; // for IE + + this.resizeElements_(); this.canvas_ctx_ = Dygraph.getContext(this.canvas_); @@ -956,37 +1012,56 @@ Dygraph.prototype.createInterface_ = function() { var dygraph = this; - this.mouseMoveHandler = function(e) { + this.mouseMoveHandler_ = function(e) { dygraph.mouseMove_(e); }; - this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler); - this.mouseOutHandler = function(e) { - dygraph.mouseOut_(e); + this.mouseOutHandler_ = function(e) { + // The mouse has left the chart if: + // 1. e.target is inside the chart + // 2. e.relatedTarget is outside the chart + var target = e.target || e.fromElement; + var relatedTarget = e.relatedTarget || e.toElement; + if (Dygraph.isNodeContainedBy(target, dygraph.graphDiv) && + !Dygraph.isNodeContainedBy(relatedTarget, dygraph.graphDiv)) { + dygraph.mouseOut_(e); + } }; - this.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler); - - if (this.resizeHandler) { - // remove handler because it's already setup. - Dygraph.removeEvent(window, 'resize', this.resizeHandler); - } + this.addAndTrackEvent(window, 'mouseout', this.mouseOutHandler_); + this.addAndTrackEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_); - this.resizeHandler = function(e) { - dygraph.resize(); - }; + // Don't recreate and register the resize handler on subsequent calls. + // This happens when the graph is resized. + if (!this.resizeHandler_) { + this.resizeHandler_ = function(e) { + dygraph.resize(); + }; - // Update when the window is resized. - // TODO(danvk): drop frames depending on complexity of the chart. - this.addEvent(window, 'resize', this.resizeHandler); + // Update when the window is resized. + // TODO(danvk): drop frames depending on complexity of the chart. + this.addAndTrackEvent(window, 'resize', this.resizeHandler_); + } }; +Dygraph.prototype.resizeElements_ = function() { + this.graphDiv.style.width = this.width_ + "px"; + this.graphDiv.style.height = this.height_ + "px"; + this.canvas_.width = this.width_; + this.canvas_.height = this.height_; + this.canvas_.style.width = this.width_ + "px"; // for IE + this.canvas_.style.height = this.height_ + "px"; // for IE +} + /** * Detach DOM elements in the dygraph and null out all data references. * Calling this when you're done with a dygraph can dramatically reduce memory * usage. See, e.g., the tests/perf.html example. */ Dygraph.prototype.destroy = function() { + this.canvas_ctx_.restore(); + this.hidden_ctx_.restore(); + var removeRecursive = function(node) { while (node.hasChildNodes()) { removeRecursive(node.firstChild); @@ -994,19 +1069,16 @@ Dygraph.prototype.destroy = function() { } }; - if (this.registeredEvents_) { - for (var idx = 0; idx < this.registeredEvents_.length; idx++) { - var reg = this.registeredEvents_[idx]; - Dygraph.removeEvent(reg.elem, reg.type, reg.fn); - } - } - - this.registeredEvents_ = []; + this.removeTrackedEvents_(); // remove mouse event handlers (This may not be necessary anymore) - Dygraph.removeEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler); - Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler); - Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseUpHandler_); + Dygraph.removeEvent(window, 'mouseout', this.mouseOutHandler_); + Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_); + + // remove window handlers + Dygraph.removeEvent(window,'resize',this.resizeHandler_); + this.resizeHandler_ = null; + removeRecursive(this.maindiv_); var nullOut = function(obj) { @@ -1016,9 +1088,6 @@ 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_); @@ -1276,13 +1345,13 @@ Dygraph.prototype.createDragInterface_ = function() { for (var eventName in interactionModel) { if (!interactionModel.hasOwnProperty(eventName)) continue; - this.addEvent(this.mouseEventElement_, eventName, + this.addAndTrackEvent(this.mouseEventElement_, eventName, bindHandler(interactionModel[eventName])); } // If the user releases the mouse button during a drag, but not over the // canvas, then it doesn't count as a zooming action. - this.mouseUpHandler_ = function(event) { + var mouseUpHandler = function(event) { if (context.isZooming || context.isPanning) { context.isZooming = false; context.dragStartX = null; @@ -1302,7 +1371,7 @@ Dygraph.prototype.createDragInterface_ = function() { context.tarp.uncover(); }; - this.addEvent(document, 'mouseup', this.mouseUpHandler_); + this.addAndTrackEvent(document, 'mouseup', this.mouseUpHandler); }; /** @@ -1604,9 +1673,13 @@ Dygraph.prototype.getArea = function() { * 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]; + if (event.offsetX && event.offsetY) { + return [ event.offsetX, event.offsetY ]; + } else { + var canvasx = Dygraph.pageX(event) - Dygraph.findPosX(this.mouseEventElement_); + var canvasy = Dygraph.pageY(event) - Dygraph.findPosY(this.mouseEventElement_); + return [canvasx, canvasy]; + } }; /** @@ -1769,7 +1842,11 @@ Dygraph.prototype.mouseMove_ = function(event) { var callback = this.attr_("highlightCallback"); if (callback && selectionChanged) { - callback(event, this.lastx_, this.selPoints_, this.lastRow_, this.highlightSet_); + callback(event, + this.lastx_, + this.selPoints_, + this.lastRow_ + this.getLeftBoundary_(), + this.highlightSet_); } }; @@ -1912,7 +1989,7 @@ Dygraph.prototype.updateSelection_ = function(opt_animFraction) { ctx.strokeStyle = color; ctx.fillStyle = color; callback(this.g, pt.name, ctx, canvasx, pt.canvasy, - color, circleSize); + color, circleSize, pt.idx); } ctx.restore(); @@ -2075,7 +2152,7 @@ Dygraph.prototype.addXTicks_ = function() { if (this.dateWindow_) { range = [this.dateWindow_[0], this.dateWindow_[1]]; } else { - range = this.fullXRange_(); + range = this.xAxisExtremes(); } var xAxisOptionsView = this.optionsViewForAxis_('x'); @@ -2154,6 +2231,15 @@ Dygraph.prototype.predraw_ = function() { this.cascadeEvents_('clearChart'); this.plotter_.clear(); } + + if(!this.is_initial_draw_) { + this.canvas_ctx_.restore(); + this.hidden_ctx_.restore(); + } + + this.canvas_ctx_.save(); + this.hidden_ctx_.save(); + this.plotter_ = new DygraphCanvasRenderer(this, this.hidden_, this.hidden_ctx_, @@ -2202,6 +2288,17 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { var datasets = []; var extremes = {}; // series name -> [low, high] var i, j, k; + var errorBars = this.attr_("errorBars"); + var customBars = this.attr_("customBars"); + var bars = errorBars || customBars; + var isValueNull = function(sample) { + if (!bars) { + return sample[1] === null; + } else { + return customBars ? sample[1][1] === null : + errorBars ? sample[1][0] === null : false; + } + }; // Loop over the fields (series). Go from the last to the first, // because if they're stacked that's how we accumulate the values. @@ -2220,11 +2317,11 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { // 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 (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; @@ -2236,14 +2333,36 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { lastIdx = k; } } + if (firstIdx === null) firstIdx = 0; - if (firstIdx > 0) firstIdx--; + var correctedFirstIdx = firstIdx; + var isInvalidValue = true; + while (isInvalidValue && correctedFirstIdx > 0) { + correctedFirstIdx--; + isInvalidValue = isValueNull(series[correctedFirstIdx]); + } + if (lastIdx === null) lastIdx = series.length - 1; - if (lastIdx < series.length - 1) lastIdx++; - boundaryIds[i-1] = [firstIdx, lastIdx]; + var correctedLastIdx = lastIdx; + isInvalidValue = true; + while (isInvalidValue && correctedLastIdx < series.length - 1) { + correctedLastIdx++; + isInvalidValue = isValueNull(series[correctedLastIdx]); + } + + boundaryIds[i-1] = [(firstIdx > 0) ? firstIdx - 1 : firstIdx, + (lastIdx < series.length - 1) ? lastIdx + 1 : lastIdx]; + + if (correctedFirstIdx!==firstIdx) { + pruned.push(series[correctedFirstIdx]); + } for (k = firstIdx; k <= lastIdx; k++) { pruned.push(series[k]); } + if (correctedLastIdx !== lastIdx) { + pruned.push(series[correctedLastIdx]); + } + series = pruned; } else { boundaryIds[i-1] = [0, series.length-1]; @@ -2259,9 +2378,10 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { series[j][1][2]]; } } else if (this.attr_("stackedGraph")) { - var l = series.length; - var actual_y; - for (j = 0; j < l; j++) { + // Need to clear last_x explicitly as javascript's locals are + // local to function, not to a block of statements + var actual_y, last_x = null; + for (j = 0; j < series.length; j++) { // If one data set has a NaN, let all subsequent stacked // sets inherit the NaN -- only start at 0 for the first set. var x = series[j][0]; @@ -2275,7 +2395,11 @@ Dygraph.prototype.gatherDatasets_ = function(rolledSeries, dateWindow) { continue; } - cumulative_y[x] += actual_y; + if (last_x != x) { + cumulative_y[x] += actual_y; + // If an x-value is repeated, we ignore the duplicates. + } + last_x = x; series[j] = [x, cumulative_y[x]]; @@ -2367,9 +2491,7 @@ Dygraph.prototype.drawGraph_ = function() { if (this.attr_("timingName")) { var end = new Date(); - if (console) { - console.log(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms"); - } + Dygraph.info(this.attr_("timingName") + " - drawGraph: " + (end - start) + "ms"); } }; @@ -2397,6 +2519,7 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw) { this.cascadeEvents_('willDrawChart', e); this.plotter_.render(); this.cascadeEvents_('didDrawChart', e); + this.lastRow_ = -1; // because plugins/legend.js clears the legend // TODO(danvk): is this a performance bottleneck when panning? // The interaction canvas should already be empty in that situation. @@ -2451,7 +2574,12 @@ Dygraph.prototype.computeYAxes_ = function() { if (valueWindows !== undefined) { // Restore valueWindow settings. - for (index = 0; index < valueWindows.length; index++) { + + // When going from two axes back to one, we only restore + // one axis. + var idxCount = Math.min(valueWindows.length, this.axes_.length); + + for (index = 0; index < idxCount; index++) { this.axes_[index].valueWindow = valueWindows[index]; } } @@ -2498,16 +2626,44 @@ Dygraph.prototype.axisPropertiesForSeries = function(series) { * This fills in the valueRange and ticks fields in each entry of this.axes_. */ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { - var series; + var isNullUndefinedOrNaN = function(num) { + return isNaN(parseFloat(num)); + }; var numAxes = this.attributes_.numAxes(); + var ypadCompat, span, series, ypad; + + var p_axis; // Compute extreme values, a span and tick marks for each axis. for (var i = 0; i < numAxes; i++) { var axis = this.axes_[i]; var logscale = this.attributes_.getForAxis("logscale", i); var includeZero = this.attributes_.getForAxis("includeZero", i); + var independentTicks = this.attributes_.getForAxis("independentTicks", i); series = this.attributes_.seriesForAxis(i); + // Add some padding. This supports two Y padding operation modes: + // + // - backwards compatible (yRangePad not set): + // 10% padding for automatic Y ranges, but not for user-supplied + // ranges, and move a close-to-zero edge to zero except if + // avoidMinZero is set, since drawing at the edge results in + // invisible lines. Unfortunately lines drawn at the edge of a + // user-supplied range will still be invisible. If logscale is + // set, add a variable amount of padding at the top but + // none at the bottom. + // + // - new-style (yRangePad set by the user): + // always add the specified Y padding. + // + ypadCompat = true; + ypad = 0.1; // add 10% + if (this.attr_('yRangePad') !== null) { + ypadCompat = false; + // Convert pixel padding to ratio + ypad = this.attr_('yRangePad') / this.plotter_.area.h; + } + if (series.length === 0) { // If no series are defined or visible then use a reasonable default axis.extremeRange = [0, 1]; @@ -2531,35 +2687,49 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { maxY = Math.max(extremeMaxY, maxY); } } - if (includeZero && minY > 0) minY = 0; + + // Include zero if requested by the user. + if (includeZero && !logscale) { + if (minY > 0) minY = 0; + if (maxY < 0) maxY = 0; + } // Ensure we have a valid scale, otherwise default to [0, 1] for safety. if (minY == Infinity) minY = 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; } + span = maxY - minY; + // special case: if we have no sense of scale, center on the sole value. + if (span === 0) { + if (maxY !== 0) { + span = Math.abs(maxY); + } else { + // ... and if the sole value is zero, use range 0-1. + maxY = 1; + span = 1; + } + } var maxAxisY, minAxisY; if (logscale) { - maxAxisY = maxY + 0.1 * span; - minAxisY = minY; + if (ypadCompat) { + maxAxisY = maxY + ypad * span; + minAxisY = minY; + } else { + var logpad = Math.exp(Math.log(span) * ypad); + maxAxisY = maxY * logpad; + minAxisY = minY / logpad; + } } else { - maxAxisY = maxY + 0.1 * span; - minAxisY = minY - 0.1 * span; + maxAxisY = maxY + ypad * span; + minAxisY = minY - ypad * span; - // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense. - if (!this.attr_("avoidMinZero")) { + // Backwards-compatible behavior: Move the span to start or end at zero if it's + // close to zero, but not if avoidMinZero is set. + if (ypadCompat && !this.attr_("avoidMinZero")) { if (minAxisY < 0 && minY >= 0) minAxisY = 0; if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0; } - - if (this.attr_("includeZero")) { - if (maxY < 0) maxAxisY = 0; - if (minY > 0) minAxisY = 0; - } } axis.extremeRange = [minAxisY, maxAxisY]; } @@ -2570,27 +2740,50 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]]; } else if (axis.valueRange) { // This is a user-set value range for this axis. - axis.computedValueRange = [ - !isNaN(axis.valueRange[0]) ? axis.valueRange[0] : axis.extremeRange[0], - !isNaN(axis.valueRange[1]) ? axis.valueRange[1] : axis.extremeRange[1] - ]; + var y0 = isNullUndefinedOrNaN(axis.valueRange[0]) ? axis.extremeRange[0] : axis.valueRange[0]; + var y1 = isNullUndefinedOrNaN(axis.valueRange[1]) ? axis.extremeRange[1] : axis.valueRange[1]; + if (!ypadCompat) { + if (axis.logscale) { + var logpad = Math.exp(Math.log(span) * ypad); + y0 *= logpad; + y1 /= logpad; + } else { + span = y1 - y0; + y0 -= span * ypad; + y1 += span * ypad; + } + } + axis.computedValueRange = [y0, y1]; } else { axis.computedValueRange = axis.extremeRange; } - - // Add ticks. By default, all axes inherit the tick positions of the - // primary axis. However, if an axis is specifically marked as having - // 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(independentTicks) { + axis.independentTicks = independentTicks; + var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); + var ticker = opts('ticker'); axis.ticks = ticker(axis.computedValueRange[0], - axis.computedValueRange[1], - this.height_, // TODO(danvk): should be area.height - opts, - this); - } else { - var p_axis = this.axes_[0]; + axis.computedValueRange[1], + this.height_, // TODO(danvk): should be area.height + opts, + this); + // Define the first independent axis as primary axis. + if (!p_axis) p_axis = axis; + } + } + if (p_axis === undefined) { + throw ("Configuration Error: At least one axis has to have the \"independentTicks\" option activated."); + } + // Add ticks. By default, all axes inherit the tick positions of the + // primary axis. However, if an axis is specifically marked as having + // independent ticks, then that is permissible as well. + for (var i = 0; i < numAxes; i++) { + var axis = this.axes_[i]; + + if (!axis.independentTicks) { + var opts = this.optionsViewForAxis_('y' + (i ? '2' : '')); + var ticker = opts('ticker'); var p_ticks = p_axis.ticks; var p_scale = p_axis.computedValueRange[1] - p_axis.computedValueRange[0]; var scale = axis.computedValueRange[1] - axis.computedValueRange[0]; @@ -2624,6 +2817,8 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { Dygraph.prototype.extractSeries_ = function(rawData, i, logScale) { // TODO(danvk): pre-allocate series here. var series = []; + var errorBars = this.attr_("errorBars"); + var customBars = this.attr_("customBars"); for (var j = 0; j < rawData.length; j++) { var x = rawData[j][0]; var point = rawData[j][i]; @@ -2634,7 +2829,12 @@ Dygraph.prototype.extractSeries_ = function(rawData, i, logScale) { point = null; } } - series.push([x, point]); + // Fix null points to fit the display type standard. + if(point !== null) { + series.push([x, point]); + } else { + series.push([x, errorBars ? [null, null] : customBars ? [null, null, null] : point]); + } } return series; }; @@ -2653,8 +2853,6 @@ Dygraph.prototype.extractSeries_ = function(rawData, i, logScale) { * data */ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { - if (originalData.length < 2) - return originalData; rollPeriod = Math.min(rollPeriod, originalData.length); var rollingData = []; var sigma = this.attr_("sigma"); @@ -2771,7 +2969,10 @@ Dygraph.prototype.rollingAverage = function(originalData, rollPeriod) { rollingData[i] = [originalData[i][0], [sum / num_ok, sigma * stddev, sigma * stddev]]; } else { - rollingData[i] = [originalData[i][0], [null, null, null]]; + // This explicitly preserves NaNs to aid with "independent series". + // See testRollingAveragePreservesNaNs. + var v = (rollPeriod == 1) ? originalData[i][1][0] : null; + rollingData[i] = [originalData[i][0], [v, v, v]]; } } } @@ -3397,17 +3598,9 @@ Dygraph.prototype.resize = function(width, height) { this.height_ = this.maindiv_.clientHeight; } + this.resizeElements_(); + if (old_width != this.width_ || old_height != this.height_) { - // TODO(danvk): there should be a clear() method. - this.maindiv_.innerHTML = ""; - this.roller_ = null; - this.attrs_.labelsDiv = null; - this.createInterface_(); - if (this.annotations_.length) { - // createInterface_ reset the layout, so we need to do this. - this.layout_.setAnnotations(this.annotations_); - } - this.createDragInterface_(); this.predraw_(); } @@ -3473,6 +3666,13 @@ Dygraph.prototype.setAnnotations = function(ann, suppressDraw) { // Only add the annotation CSS rule once we know it will be used. Dygraph.addAnnotationRule(); this.annotations_ = ann; + if (!this.layout_) { + this.warn("Tried to setAnnotations before dygraph was ready. " + + "Try setting them in a drawCallback. See " + + "dygraphs.com/tests/annotation.html"); + return; + } + this.layout_.setAnnotations(this.annotations_); if (!suppressDraw) { this.predraw_(); @@ -3489,9 +3689,12 @@ 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. + * + * Returns null when labels have not yet been defined. */ Dygraph.prototype.getLabels = function() { - return this.attr_("labels").slice(); + var labels = this.attr_("labels"); + return labels ? labels.slice() : null; }; /**