X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=0dba5343943aeef6282f7e916f584db21a8d397d;hb=dea5c743421af0b2299fb7ebd4cf5ee094b831f8;hp=a266af05403128bd6c1bd36d5137067a4a395f01;hpb=0d64e59698803a7347189136831054ed19c45b04;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index a266af0..0dba534 100644 --- a/dygraph.js +++ b/dygraph.js @@ -136,6 +136,11 @@ Dygraph.INFO = 2; Dygraph.WARNING = 3; Dygraph.ERROR = 3; +// Directions for panning and zooming. Use bit operations when combined +// values are possible. +Dygraph.HORIZONTAL = 1; +Dygraph.VERTICAL = 2; + // Used for initializing annotation CSS rules only once. Dygraph.addedAnnotationCSS = false; @@ -161,6 +166,16 @@ Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) { * @private */ Dygraph.prototype.__init__ = function(div, file, attrs) { + // Hack for IE: if we're using excanvas and the document hasn't finished + // loading yet (and hence may not have initialized whatever it needs to + // initialize), then keep calling this routine periodically until it has. + if (/MSIE/.test(navigator.userAgent) && !window.opera && + typeof(G_vmlCanvasManager) != 'undefined' && + document.readyState != 'complete') { + var self = this; + setTimeout(function() { self.__init__(div, file, attrs) }, 100); + } + // Support two-argument constructor if (attrs == null) { attrs = {}; } @@ -172,6 +187,7 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { this.previousVerticalX_ = -1; this.fractions_ = attrs.fractions || false; this.dateWindow_ = attrs.dateWindow || null; + this.wilsonInterval_ = attrs.wilsonInterval || true; this.is_initial_draw_ = true; this.annotations_ = []; @@ -183,10 +199,10 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { // If the div isn't already sized then inherit from our attrs or // give it a default size. if (div.style.width == '') { - div.style.width = attrs.width || Dygraph.DEFAULT_WIDTH + "px"; + div.style.width = (attrs.width || Dygraph.DEFAULT_WIDTH) + "px"; } if (div.style.height == '') { - div.style.height = attrs.height || Dygraph.DEFAULT_HEIGHT + "px"; + div.style.height = (attrs.height || Dygraph.DEFAULT_HEIGHT) + "px"; } this.width_ = parseInt(div.style.width, 10); this.height_ = parseInt(div.style.height, 10); @@ -306,19 +322,39 @@ Dygraph.prototype.xAxisRange = function() { }; /** - * Returns the currently-visible y-range. This can be affected by zooming, - * panning or a call to updateOptions. + * Returns the currently-visible y-range for an axis. This can be affected by + * zooming, panning or a call to updateOptions. Axis indices are zero-based. If + * called with no arguments, returns the range of the first axis. * Returns a two-element array: [bottom, top]. */ -Dygraph.prototype.yAxisRange = function() { - return this.displayedYRange_; +Dygraph.prototype.yAxisRange = function(idx) { + if (typeof(idx) == "undefined") idx = 0; + if (idx < 0 || idx >= this.axes_.length) return null; + return [ this.axes_[idx].computedValueRange[0], + this.axes_[idx].computedValueRange[1] ]; +}; + +/** + * Returns the currently-visible y-ranges for each axis. This can be affected by + * zooming, panning, calls to updateOptions, etc. + * Returns an array of [bottom, top] pairs, one for each y-axis. + */ +Dygraph.prototype.yAxisRanges = function() { + var ret = []; + for (var i = 0; i < this.axes_.length; i++) { + ret.push(this.yAxisRange(i)); + } + return ret; }; +// TODO(danvk): use these functions throughout dygraphs. /** * Convert from data coordinates to canvas/div X/Y coordinates. + * If specified, do this conversion for the coordinate system of a particular + * axis. Uses the first axis by default. * Returns a two-element array: [X, Y] */ -Dygraph.prototype.toDomCoords = function(x, y) { +Dygraph.prototype.toDomCoords = function(x, y, axis) { var ret = [null, null]; var area = this.plotter_.area; if (x !== null) { @@ -327,19 +363,20 @@ Dygraph.prototype.toDomCoords = function(x, y) { } if (y !== null) { - var yRange = this.yAxisRange(); + var yRange = this.yAxisRange(axis); ret[1] = area.y + (yRange[1] - y) / (yRange[1] - yRange[0]) * area.h; } return ret; }; -// TODO(danvk): use these functions throughout dygraphs. /** * Convert from canvas/div coords to data coordinates. + * If specified, do this conversion for the coordinate system of a particular + * axis. Uses the first axis by default. * Returns a two-element array: [X, Y] */ -Dygraph.prototype.toDataCoords = function(x, y) { +Dygraph.prototype.toDataCoords = function(x, y, axis) { var ret = [null, null]; var area = this.plotter_.area; if (x !== null) { @@ -348,7 +385,7 @@ Dygraph.prototype.toDataCoords = function(x, y) { } if (y !== null) { - var yRange = this.yAxisRange(); + var yRange = this.yAxisRange(axis); ret[1] = yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]); } @@ -655,36 +692,49 @@ Dygraph.prototype.createStatusMessage_ = function() { }; /** + * Position the labels div so that its right edge is flush with the right edge + * of the charting area. + */ +Dygraph.prototype.positionLabelsDiv_ = function() { + // Don't touch a user-specified labelsDiv. + if (this.user_attrs_.hasOwnProperty("labelsDiv")) return; + + var area = this.plotter_.area; + var div = this.attr_("labelsDiv"); + div.style.left = area.x + area.w - this.attr_("labelsDivWidth") - 1 + "px"; +}; + +/** * Create the text box to adjust the averaging period - * @return {Object} The newly-created text box * @private */ Dygraph.prototype.createRollInterface_ = function() { - // Destroy any existing roller. - if (this.roller_) this.graphDiv.removeChild(this.roller_); + // Create a roller if one doesn't exist already. + if (!this.roller_) { + this.roller_ = document.createElement("input"); + this.roller_.type = "text"; + this.roller_.style.display = "none"; + this.graphDiv.appendChild(this.roller_); + } + + var display = this.attr_('showRoller') ? 'block' : 'none'; - var display = this.attr_('showRoller') ? "block" : "none"; var textAttr = { "position": "absolute", "zIndex": 10, "top": (this.plotter_.area.h - 25) + "px", "left": (this.plotter_.area.x + 1) + "px", "display": display }; - var roller = document.createElement("input"); - roller.type = "text"; - roller.size = "2"; - roller.value = this.rollPeriod_; + this.roller_.size = "2"; + this.roller_.value = this.rollPeriod_; for (var name in textAttr) { if (textAttr.hasOwnProperty(name)) { - roller.style[name] = textAttr[name]; + this.roller_.style[name] = textAttr[name]; } } - var pa = this.graphDiv; - pa.appendChild(roller); var dygraph = this; - roller.onchange = function() { dygraph.adjustRoll(roller.value); }; - return roller; + this.roller_.onchange = function() { dygraph.adjustRoll(dygraph.roller_.value); }; }; // These functions are taken from MochiKit.Signal @@ -722,13 +772,27 @@ Dygraph.prototype.createDragInterface_ = function() { // Tracks whether the mouse is down right now var isZooming = false; - var isPanning = false; + var isPanning = false; // is this drag part of a pan? + var is2DPan = false; // if so, is that pan 1- or 2-dimensional? var dragStartX = null; var dragStartY = null; var dragEndX = null; var dragEndY = null; + var dragDirection = null; var prevEndX = null; + var prevEndY = null; + var prevDragDirection = null; + + // TODO(danvk): update this comment + // draggingDate and draggingValue represent the [date,value] point on the + // graph at which the mouse was pressed. As the mouse moves while panning, + // the viewport must pan so that the mouse position points to + // [draggingDate, draggingValue] var draggingDate = null; + + // TODO(danvk): update this comment + // The range in second/value units that the viewport encompasses during a + // panning operation. var dateRange = null; // Utility function to convert page-wide coordinates to canvas coords @@ -743,35 +807,95 @@ Dygraph.prototype.createDragInterface_ = function() { dragEndX = getX(event); dragEndY = getY(event); - self.drawZoomRect_(dragStartX, dragEndX, prevEndX); + var xDelta = Math.abs(dragStartX - dragEndX); + var yDelta = Math.abs(dragStartY - dragEndY); + + // drag direction threshold for y axis is twice as large as x axis + dragDirection = (xDelta < yDelta / 2) ? Dygraph.VERTICAL : Dygraph.HORIZONTAL; + + self.drawZoomRect_(dragDirection, dragStartX, dragEndX, dragStartY, dragEndY, + prevDragDirection, prevEndX, prevEndY); + prevEndX = dragEndX; + prevEndY = dragEndY; + prevDragDirection = dragDirection; } else if (isPanning) { dragEndX = getX(event); dragEndY = getY(event); + // TODO(danvk): update this comment // Want to have it so that: - // 1. draggingDate appears at dragEndX + // 1. draggingDate appears at dragEndX, draggingValue appears at dragEndY. // 2. daterange = (dateWindow_[1] - dateWindow_[0]) is unaltered. + // 3. draggingValue appears at dragEndY. + // 4. valueRange is unaltered. + + var minDate = draggingDate - (dragEndX / self.width_) * dateRange; + var maxDate = minDate + dateRange; + self.dateWindow_ = [minDate, maxDate]; + + + // y-axis scaling is automatic unless this is a full 2D pan. + if (is2DPan) { + // Adjust each axis appropriately. + var y_frac = dragEndY / self.height_; + for (var i = 0; i < self.axes_.length; i++) { + var axis = self.axes_[i]; + var maxValue = axis.draggingValue + y_frac * axis.dragValueRange; + var minValue = maxValue - axis.dragValueRange; + axis.valueWindow = [ minValue, maxValue ]; + } + } - self.dateWindow_[0] = draggingDate - (dragEndX / self.width_) * dateRange; - self.dateWindow_[1] = self.dateWindow_[0] + dateRange; self.drawGraph_(); } }); // Track the beginning of drag events Dygraph.addEvent(this.mouseEventElement_, 'mousedown', function(event) { + // prevents mouse drags from selecting page text. + if (event.preventDefault) { + event.preventDefault(); // Firefox, Chrome, etc. + } else { + event.returnValue = false; // IE + event.cancelBubble = true; + } + px = Dygraph.findPosX(self.canvas_); py = Dygraph.findPosY(self.canvas_); dragStartX = getX(event); dragStartY = getY(event); if (event.altKey || event.shiftKey) { - if (!self.dateWindow_) return; // have to be zoomed in to pan. + // have to be zoomed in to pan. + var zoomedY = false; + for (var i = 0; i < self.axes_.length; i++) { + if (self.axes_[i].valueWindow || self.axes_[i].valueRange) { + zoomedY = true; + break; + } + } + if (!self.dateWindow_ && !zoomedY) return; + isPanning = true; - dateRange = self.dateWindow_[1] - self.dateWindow_[0]; - draggingDate = (dragStartX / self.width_) * dateRange + - self.dateWindow_[0]; + var xRange = self.xAxisRange(); + dateRange = xRange[1] - xRange[0]; + + // Record the range of each y-axis at the start of the drag. + // If any axis has a valueRange or valueWindow, then we want a 2D pan. + is2DPan = false; + for (var i = 0; i < self.axes_.length; i++) { + var axis = self.axes_[i]; + var yRange = self.yAxisRange(i); + axis.dragValueRange = yRange[1] - yRange[0]; + var r = self.toDataCoords(null, dragStartY, i); + axis.draggingValue = r[1]; + if (axis.valueWindow || axis.valueRange) is2DPan = true; + } + + // TODO(konigsberg): Switch from all this math to toDataCoords? + // Seems to work for the dragging value. + draggingDate = (dragStartX / self.width_) * dateRange + xRange[0]; } else { isZooming = true; } @@ -790,6 +914,10 @@ Dygraph.prototype.createDragInterface_ = function() { isPanning = false; draggingDate = null; dateRange = null; + for (var i = 0; i < self.axes_.length; i++) { + delete self.axes_[i].draggingValue; + delete self.axes_[i].dragValueRange; + } } }); @@ -839,9 +967,12 @@ Dygraph.prototype.createDragInterface_ = function() { } } - if (regionWidth >= 10) { - self.doZoom_(Math.min(dragStartX, dragEndX), + if (regionWidth >= 10 && dragDirection == Dygraph.HORIZONTAL) { + self.doZoomX_(Math.min(dragStartX, dragEndX), Math.max(dragStartX, dragEndX)); + } else if (regionHeight >= 10 && dragDirection == Dygraph.VERTICAL){ + self.doZoomY_(Math.min(dragStartY, dragEndY), + Math.max(dragStartY, dragEndY)); } else { self.canvas_.getContext("2d").clearRect(0, 0, self.canvas_.width, @@ -854,21 +985,19 @@ Dygraph.prototype.createDragInterface_ = function() { if (isPanning) { isPanning = false; + is2DPan = false; draggingDate = null; dateRange = null; + valueRange = null; } }); // Double-clicking zooms back out Dygraph.addEvent(this.mouseEventElement_, 'dblclick', function(event) { - if (self.dateWindow_ == null) return; - self.dateWindow_ = null; - self.drawGraph_(); - var minDate = self.rawData_[0][0]; - var maxDate = self.rawData_[self.rawData_.length - 1][0]; - if (self.attr_("zoomCallback")) { - self.attr_("zoomCallback")(minDate, maxDate); - } + // Disable zooming out if panning. + if (event.altKey || event.shiftKey) return; + + self.doUnzoom_(); }); }; @@ -877,49 +1006,148 @@ Dygraph.prototype.createDragInterface_ = function() { * up any previous zoom rectangles that were drawn. This could be optimized to * avoid extra redrawing, but it's tricky to avoid interactions with the status * dots. + * + * @param {Number} direction the direction of the zoom rectangle. Acceptable + * values are Dygraph.HORIZONTAL and Dygraph.VERTICAL. * @param {Number} startX The X position where the drag started, in canvas * coordinates. * @param {Number} endX The current X position of the drag, in canvas coords. + * @param {Number} startY The Y position where the drag started, in canvas + * coordinates. + * @param {Number} endY The current Y position of the drag, in canvas coords. + * @param {Number} prevDirection the value of direction on the previous call to + * this function. Used to avoid excess redrawing * @param {Number} prevEndX The value of endX on the previous call to this * function. Used to avoid excess redrawing + * @param {Number} prevEndY The value of endY on the previous call to this + * function. Used to avoid excess redrawing * @private */ -Dygraph.prototype.drawZoomRect_ = function(startX, endX, prevEndX) { +Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY, endY, + prevDirection, prevEndX, prevEndY) { var ctx = this.canvas_.getContext("2d"); // Clean up from the previous rect if necessary - if (prevEndX) { + if (prevDirection == Dygraph.HORIZONTAL) { ctx.clearRect(Math.min(startX, prevEndX), 0, Math.abs(startX - prevEndX), this.height_); + } else if (prevDirection == Dygraph.VERTICAL){ + ctx.clearRect(0, Math.min(startY, prevEndY), + this.width_, Math.abs(startY - prevEndY)); } // Draw a light-grey rectangle to show the new viewing area - if (endX && startX) { - ctx.fillStyle = "rgba(128,128,128,0.33)"; - ctx.fillRect(Math.min(startX, endX), 0, - Math.abs(endX - startX), this.height_); + if (direction == Dygraph.HORIZONTAL) { + if (endX && startX) { + ctx.fillStyle = "rgba(128,128,128,0.33)"; + ctx.fillRect(Math.min(startX, endX), 0, + Math.abs(endX - startX), this.height_); + } + } + if (direction == Dygraph.VERTICAL) { + if (endY && startY) { + ctx.fillStyle = "rgba(128,128,128,0.33)"; + ctx.fillRect(0, Math.min(startY, endY), + this.width_, Math.abs(endY - startY)); + } } }; /** - * Zoom to something containing [lowX, highX]. These are pixel coordinates - * in the canvas. The exact zoom window may be slightly larger if there are no - * data points near lowX or highX. This function redraws the graph. + * Zoom to something containing [lowX, highX]. These are pixel coordinates in + * the canvas. The exact zoom window may be slightly larger if there are no data + * points near lowX or highX. Don't confuse this function with doZoomXDates, + * which accepts dates that match the raw data. This function redraws the graph. + * * @param {Number} lowX The leftmost pixel value that should be visible. * @param {Number} highX The rightmost pixel value that should be visible. * @private */ -Dygraph.prototype.doZoom_ = function(lowX, highX) { +Dygraph.prototype.doZoomX_ = function(lowX, highX) { // Find the earliest and latest dates contained in this canvasx range. + // Convert the call to date ranges of the raw data. var r = this.toDataCoords(lowX, null); var minDate = r[0]; r = this.toDataCoords(highX, null); var maxDate = r[0]; + this.doZoomXDates_(minDate, maxDate); +}; +/** + * Zoom to something containing [minDate, maxDate] values. Don't confuse this + * method with doZoomX which accepts pixel coordinates. This function redraws + * the graph. + * + * @param {Number} minDate The minimum date that should be visible. + * @param {Number} maxDate The maximum date that should be visible. + * @private + */ +Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) { this.dateWindow_ = [minDate, maxDate]; this.drawGraph_(); if (this.attr_("zoomCallback")) { - this.attr_("zoomCallback")(minDate, maxDate); + var yRange = this.yAxisRange(); + this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges()); + } +}; + +/** + * Zoom to something containing [lowY, highY]. These are pixel coordinates in + * the canvas. This function redraws the graph. + * + * @param {Number} lowY The topmost pixel value that should be visible. + * @param {Number} highY The lowest pixel value that should be visible. + * @private + */ +Dygraph.prototype.doZoomY_ = function(lowY, highY) { + // Find the highest and lowest values in pixel range for each axis. + // 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 = []; + for (var i = 0; i < this.axes_.length; i++) { + var hi = this.toDataCoords(null, lowY, i); + var low = this.toDataCoords(null, highY, i); + this.axes_[i].valueWindow = [low[1], hi[1]]; + valueRanges.push([low[1], hi[1]]); + } + + this.drawGraph_(); + if (this.attr_("zoomCallback")) { + var xRange = this.xAxisRange(); + this.attr_("zoomCallback")(xRange[0], xRange[1], this.yAxisRanges()); + } +}; + +/** + * Reset the zoom to the original view coordinates. This is the same as + * double-clicking on the graph. + * + * @private + */ +Dygraph.prototype.doUnzoom_ = function() { + var dirty = false; + if (this.dateWindow_ != null) { + dirty = true; + this.dateWindow_ = null; + } + + for (var i = 0; i < this.axes_.length; i++) { + if (this.axes_[i].valueWindow != null) { + dirty = true; + delete this.axes_[i].valueWindow; + } + } + + if (dirty) { + // Putting the drawing operation before the callback because it resets + // yAxisRange. + 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()); + } } }; @@ -942,6 +1170,8 @@ Dygraph.prototype.mouseMove_ = function(event) { var minDist = 1e+100; var idx = -1; for (var i = 0; i < points.length; i++) { + var point = points[i]; + if (point == null) continue; var dist = Math.abs(points[i].canvasx - canvasx); if (dist > minDist) continue; minDist = dist; @@ -949,7 +1179,8 @@ Dygraph.prototype.mouseMove_ = function(event) { } if (idx >= 0) lastx = points[idx].xval; // Check that you can really highlight the last day's data - if (canvasx > points[points.length-1].canvasx) + var last = points[points.length-1]; + if (last != null && canvasx > last.canvasx) lastx = points[points.length-1].xval; // Extract the points we've selected @@ -982,7 +1213,7 @@ Dygraph.prototype.mouseMove_ = function(event) { 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.attr_("highlightCallback")(event, lastx, this.selPoints_, this.idxToRow_(idx)); } } @@ -993,6 +1224,24 @@ Dygraph.prototype.mouseMove_ = function(event) { }; /** + * Transforms layout_.points index into data row number. + * @param int layout_.points index + * @return int row number, or -1 if none could be found. + * @private + */ +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; + } + idx -= this.layout_.datasets[i].length; + } + return -1; +}; + +/** * Draw dots over the selectied points in the data series. This function * takes care of cleanup of previously-drawn dots. * @private @@ -1587,13 +1836,21 @@ Dygraph.prototype.predraw_ = function() { this.hidden_, this.layout_, this.renderOptions_); - this.roller_ = this.createRollInterface_(); + // The roller sits in the bottom left corner of the chart. We don't know where + // this will be until the options are available, so it's positioned here. + this.createRollInterface_(); + + // Same thing applies for the labelsDiv. It's right edge should be flush with + // the right edge of the charting area (which may not be the same as the right + // edge of the div, if we have two y-axes. + this.positionLabelsDiv_(); // If the data or options have changed, then we'd better redraw. this.drawGraph_(); }; /** +======= * 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. @@ -1633,6 +1890,8 @@ Dygraph.prototype.drawGraph_ = function() { series.push([date, data[j][i]]); } } + + // 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) @@ -1668,11 +1927,6 @@ Dygraph.prototype.drawGraph_ = function() { } var seriesExtremes = this.extremeValues_(series); - extremes[seriesName] = seriesExtremes; - var thisMinY = seriesExtremes[0]; - var thisMaxY = seriesExtremes[1]; - if (minY === null || (thisMinY != null && thisMinY < minY)) minY = thisMinY; - if (maxY === null || (thisMaxY != null && thisMaxY > maxY)) maxY = thisMaxY; if (bars) { for (var j=0; j maxY) - maxY = cumulative_y[x]; + if (cumulative_y[x] > seriesExtremes[1]) { + seriesExtremes[1] = cumulative_y[x]; + } + if (cumulative_y[x] < seriesExtremes[0]) { + seriesExtremes[0] = cumulative_y[x]; + } } } + extremes[seriesName] = seriesExtremes; datasets[i] = series; } @@ -1711,7 +1971,6 @@ Dygraph.prototype.drawGraph_ = function() { var out = this.computeYAxisRanges_(extremes); var axes = out[0]; var seriesToAxisMap = out[1]; - this.displayedYRange_ = axes[0].valueRange; this.layout_.updateOptions( { yAxes: axes, seriesToAxisMap: seriesToAxisMap } ); @@ -1724,7 +1983,7 @@ Dygraph.prototype.drawGraph_ = function() { this.plotter_.clear(); this.plotter_.render(); this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width, - this.canvas_.height); + this.canvas_.height); if (this.attr_("drawCallback") !== null) { this.attr_("drawCallback")(this, is_initial_draw); @@ -1747,7 +2006,7 @@ Dygraph.prototype.computeYAxes_ = function() { // Get a list of series names. var labels = this.attr_("labels"); - var series = []; + var series = {}; for (var i = 1; i < labels.length; i++) series[labels[i]] = (i - 1); // all options which could be applied per-axis: @@ -1803,6 +2062,17 @@ Dygraph.prototype.computeYAxes_ = function() { this.seriesToAxisMap_[seriesName] = idx; } } + + // 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; }; /** @@ -1837,10 +2107,16 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { // Compute extreme values, a span and tick marks for each axis. for (var i = 0; i < this.axes_.length; i++) { var axis = this.axes_[i]; - if (axis.valueRange) { + if (axis.valueWindow) { + // This is only set if the user has zoomed on the y-axis. It is never set + // by a user. It takes precedence over axis.valueRange because, if you set + // valueRange, you'd still expect to be able to pan. + axis.computedValueRange = [axis.valueWindow[0], axis.valueWindow[1]]; + } else if (axis.valueRange) { + // This is a user-set value range for this axis. axis.computedValueRange = [axis.valueRange[0], axis.valueRange[1]]; } else { - // Calcuate the extremes of extremes. + // Calculate the extremes of extremes. var series = seriesForAxis[i]; var minY = Infinity; // extremes[series[0]][0]; var maxY = -Infinity; // extremes[series[0]][1]; @@ -1858,8 +2134,10 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { var minAxisY = minY - 0.1 * span; // Try to include zero and make it minAxisY (or maxAxisY) if it makes sense. - if (minAxisY < 0 && minY >= 0) minAxisY = 0; - if (maxAxisY > 0 && maxY <= 0) maxAxisY = 0; + if (!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; @@ -2135,7 +2413,8 @@ Dygraph.prototype.parseCSV_ = function(data) { // Parse the x as a float or return null if it's not a number. var parseFloatOrNull = function(x) { var val = parseFloat(x); - return isNaN(val) ? null : val; + // isFinite() returns false for NaN and +/-Infinity. + return isFinite(val) ? val : null; }; var xParser; @@ -2367,6 +2646,11 @@ Dygraph.prototype.parseDataTable_ = function(data) { if (ret.length > 0 && row[0] < ret[ret.length - 1][0]) { outOfOrder = true; } + + // Strip out infinities, which give dygraphs problems later on. + for (var j = 0; j < row.length; j++) { + if (!isFinite(row[j])) row[j] = null; + } ret.push(row); } @@ -2479,10 +2763,10 @@ Dygraph.prototype.start_ = function() { */ Dygraph.prototype.updateOptions = function(attrs) { // TODO(danvk): this is a mess. Rethink this function. - if (attrs.rollPeriod) { + if ('rollPeriod' in attrs) { this.rollPeriod_ = attrs.rollPeriod; } - if (attrs.dateWindow) { + if ('dateWindow' in attrs) { this.dateWindow_ = attrs.dateWindow; } @@ -2581,7 +2865,7 @@ Dygraph.prototype.visibility = function() { */ Dygraph.prototype.setVisibility = function(num, value) { var x = this.visibility(); - if (num < 0 && num >= x.length) { + if (num < 0 || num >= x.length) { this.warn("invalid series number in setVisibility: " + num); } else { x[num] = value; @@ -2624,30 +2908,36 @@ Dygraph.prototype.indexFromSetName = function(name) { Dygraph.addAnnotationRule = function() { if (Dygraph.addedAnnotationCSS) return; - var mysheet; - if (document.styleSheets.length > 0) { - mysheet = document.styleSheets[0]; - } else { - var styleSheetElement = document.createElement("style"); - styleSheetElement.type = "text/css"; - document.getElementsByTagName("head")[0].appendChild(styleSheetElement); - for(i = 0; i < document.styleSheets.length; i++) { - if (document.styleSheets[i].disabled) continue; - mysheet = document.styleSheets[i]; - } - } - var rule = "border: 1px solid black; " + "background-color: white; " + "text-align: center;"; - if (mysheet.insertRule) { // Firefox - var idx = mysheet.cssRules ? mysheet.cssRules.length : 0; - mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx); - } else if (mysheet.addRule) { // IE - mysheet.addRule(".dygraphDefaultAnnotation", rule); + + var styleSheetElement = document.createElement("style"); + styleSheetElement.type = "text/css"; + document.getElementsByTagName("head")[0].appendChild(styleSheetElement); + + // Find the first style sheet that we can access. + // We may not add a rule to a style sheet from another domain for security + // reasons. This sometimes comes up when using gviz, since the Google gviz JS + // adds its own style sheets from google.com. + for (var i = 0; i < document.styleSheets.length; i++) { + if (document.styleSheets[i].disabled) continue; + var mysheet = document.styleSheets[i]; + try { + if (mysheet.insertRule) { // Firefox + var idx = mysheet.cssRules ? mysheet.cssRules.length : 0; + mysheet.insertRule(".dygraphDefaultAnnotation { " + rule + " }", idx); + } else if (mysheet.addRule) { // IE + mysheet.addRule(".dygraphDefaultAnnotation", rule); + } + Dygraph.addedAnnotationCSS = true; + return; + } catch(err) { + // Was likely a security exception. + } } - Dygraph.addedAnnotationCSS = true; + this.warn("Unable to add default annotation CSS rule; display may be off."); } /** @@ -2675,7 +2965,14 @@ Dygraph.GVizChart = function(container) { } Dygraph.GVizChart.prototype.draw = function(data, options) { + // Clear out any existing dygraph. + // TODO(danvk): would it make more sense to simply redraw using the current + // date_graph object? this.container.innerHTML = ''; + if (typeof(this.date_graph) != 'undefined') { + this.date_graph.destroy(); + } + this.date_graph = new Dygraph(this.container, data, options); }