X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=941badb9a01edcf41444d34330d35825a1808470;hb=421427956b54e7c1bea26f6865eaf007d406a2d2;hp=42761cf28ee369643d87cfe89ab3acbaf4f6d443;hpb=404804efb919529cc9ac976019cfc2aef16aa908;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index 42761cf..941badb 100644 --- a/dygraph.js +++ b/dygraph.js @@ -44,7 +44,7 @@ */ /*jshint globalstrict: true */ -/*global DygraphRangeSelector:false, DygraphLayout:false, DygraphCanvasRenderer:false, G_vmlCanvasManager:false */ +/*global DygraphLayout:false, DygraphCanvasRenderer:false, DygraphOptions:false, G_vmlCanvasManager:false */ "use strict"; /** @@ -91,7 +91,8 @@ Dygraph.DEFAULT_ROLL_PERIOD = 1; Dygraph.DEFAULT_WIDTH = 480; Dygraph.DEFAULT_HEIGHT = 320; -Dygraph.ANIMATION_STEPS = 10; +// For max 60 Hz. animation: +Dygraph.ANIMATION_STEPS = 12; Dygraph.ANIMATION_DURATION = 200; // These are defined before DEFAULT_ATTRS so that it can refer to them. @@ -281,6 +282,8 @@ Dygraph.DEFAULT_ATTRS = { Dygraph.Plotters.linePlotter ], + plugins: [ ], + // per-axis options axes: { x: { @@ -355,6 +358,10 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { attrs = Dygraph.mapLegacyOptions_(attrs); + if (typeof(div) == 'string') { + div = document.getElementById(div); + } + if (!div) { Dygraph.error("Constructing dygraph with a non-existent div!"); return; @@ -408,12 +415,9 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { // TODO(nikhilk): Add any other stackedGraph checks here. } - // These two options have a bad interaction. See issue 359. - if (attrs.showRangeSelector && attrs.animatedZooms) { - this.warn('You should not set animatedZooms=true when using the range selector.'); - attrs.animatedZooms = false; - } - + // DEPRECATION WARNING: All option processing should be moved from + // attrs_ and user_attrs_ to options_, which holds all this information. + // // Dygraphs has many options, some of which interact with one another. // To keep track of everything, we maintain two sets of options: // @@ -444,8 +448,9 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { // Activate plugins. this.plugins_ = []; - for (var i = 0; i < Dygraph.PLUGINS.length; i++) { - var Plugin = Dygraph.PLUGINS[i]; + var plugins = Dygraph.PLUGINS.concat(this.getOption('plugins')); + for (var i = 0; i < plugins.length; i++) { + var Plugin = plugins[i]; var pluginInstance = new Plugin(); var pluginDict = { plugin: pluginInstance, @@ -480,6 +485,8 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { } } + this.createDragInterface_(); + this.start_(); }; @@ -569,7 +576,7 @@ Dygraph.prototype.attr_ = function(name, seriesName) { Dygraph.OPTIONS_REFERENCE[name] = true; } // - return seriesName ? this.attributes_.findForSeries(name, seriesName) : this.attributes_.find(name); + return seriesName ? this.attributes_.getForSeries(name, seriesName) : this.attributes_.get(name); }; /** @@ -590,6 +597,10 @@ Dygraph.prototype.getOption = function(name, opt_seriesName) { return this.attr_(name, opt_seriesName); }; +Dygraph.prototype.getOptionForAxis = function(name, axis) { + return this.attributes_.getForAxis(name, axis); +}; + /** * @private * @param String} axis The name of the axis (i.e. 'x', 'y' or 'y2') @@ -823,7 +834,8 @@ Dygraph.prototype.toPercentYCoord = function(y, axis) { var yRange = this.yAxisRange(axis); var pct; - if (!this.axes_[axis].logscale) { + var logscale = this.attributes_.getForAxis("logscale", axis); + if (!logscale) { // yRange[1] - y is unit distance from the bottom. // yRange[1] - yRange[0] is the scale of the range. // (yRange[1] - y) / (yRange[1] - yRange[0]) is the % from the bottom. @@ -934,12 +946,6 @@ Dygraph.prototype.createInterface_ = function() { this.hidden_ = this.createPlotKitCanvas_(this.canvas_); this.hidden_ctx_ = Dygraph.getContext(this.hidden_); - if (this.attr_('showRangeSelector')) { - // The range selector must be created here so that its canvases and contexts get created here. - // For some reason, if the canvases and contexts don't get created here, things don't work in IE. - this.rangeSelector_ = new DygraphRangeSelector(this); - } - // The interactive parts of the graph are drawn on top of the chart. this.graphDiv.appendChild(this.hidden_); this.graphDiv.appendChild(this.canvas_); @@ -948,32 +954,30 @@ Dygraph.prototype.createInterface_ = function() { // 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; - this.mouseMoveHandler = function(e) { + this.mouseMoveHandler_ = function(e) { dygraph.mouseMove_(e); }; - this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler); - this.mouseOutHandler = function(e) { + this.mouseOutHandler_ = function(e) { dygraph.mouseOut_(e); }; - this.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler); - this.createDragInterface_(); + this.addEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_); + this.addEvent(this.mouseEventElement_, 'mouseout', this.mouseOutHandler_); - 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.addEvent(window, 'resize', this.resizeHandler_); + } }; /** @@ -989,16 +993,24 @@ Dygraph.prototype.destroy = function() { } }; - for (var idx = 0; idx < this.registeredEvents_.length; idx++) { - var reg = this.registeredEvents_[idx]; - Dygraph.removeEvent(reg.elem, reg.type, reg.fn); + 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_ = []; // 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_, 'mouseout', this.mouseOutHandler_); + Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseMoveHandler_); Dygraph.removeEvent(this.mouseEventElement_, 'mousemove', this.mouseUpHandler_); + + // remove window handlers + Dygraph.removeEvent(window,'resize',this.resizeHandler_); + this.resizeHandler_ = null; + removeRecursive(this.maindiv_); var nullOut = function(obj) { @@ -1008,9 +1020,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_); @@ -1272,6 +1281,12 @@ Dygraph.prototype.createDragInterface_ = function() { bindHandler(interactionModel[eventName])); } + // unregister the handler on subsequent calls. + // This happens when the graph is resized. + if (this.mouseUpHandler_) { + Dygraph.removeEvent(document, 'mouseup', this.mouseUpHandler_); + } + // 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) { @@ -1450,10 +1465,8 @@ Dygraph.prototype.doZoomY_ = function(lowY, highY) { /** * Reset the zoom to the original view coordinates. This is the same as * double-clicking on the graph. - * - * @private */ -Dygraph.prototype.doUnzoom_ = function() { +Dygraph.prototype.resetZoom = function() { var dirty = false, dirtyX = false, dirtyY = false; if (this.dateWindow_ !== null) { dirty = true; @@ -1648,7 +1661,7 @@ Dygraph.prototype.findClosestPoint = function(domX, domY) { var minDist = Infinity; var idx = -1; var dist, dx, dy, point, closestPoint, closestSeries; - for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) { + for ( var setIdx = this.layout_.datasets.length - 1 ; setIdx >= 0 ; --setIdx ) { var points = this.layout_.points[setIdx]; for (var i = 0; i < points.length; ++i) { var point = points[i]; @@ -1688,7 +1701,6 @@ Dygraph.prototype.findStackedPoint = function(domX, domY) { var row = this.findClosestRow(domX); var boundary = this.getLeftBoundary_(); var rowIdx = row - boundary; - var sets = this.layout_.points; var closestPoint, closestSeries; for (var setIdx = 0; setIdx < this.layout_.datasets.length; ++setIdx) { var points = this.layout_.points[setIdx]; @@ -1749,7 +1761,7 @@ Dygraph.prototype.mouseMove_ = function(event) { var highlightSeriesOpts = this.attr_("highlightSeriesOpts"); var selectionChanged = false; - if (highlightSeriesOpts && !this.lockedSet_) { + if (highlightSeriesOpts && !this.isSeriesLocked()) { var closest; if (this.attr_("stackedGraph")) { closest = this.findStackedPoint(canvasx, canvasy); @@ -1839,7 +1851,8 @@ Dygraph.prototype.animateSelection_ = function(direction) { * @private */ Dygraph.prototype.updateSelection_ = function(opt_animFraction) { - var defaultPrevented = this.cascadeEvents_('select', { + /*var defaultPrevented = */ + this.cascadeEvents_('select', { selectedX: this.lastx_, selectedPoints: this.selPoints_ }); @@ -2042,6 +2055,14 @@ Dygraph.prototype.getHighlightSeries = function() { }; /** + * Returns true if the currently-highlighted series was locked + * via setSelection(..., seriesName, true). + */ +Dygraph.prototype.isSeriesLocked = function() { + return this.lockedSet_; +}; + +/** * Fires when there's data available to be graphed. * @param {String} data Raw CSV data to be plotted * @private @@ -2130,6 +2151,8 @@ Dygraph.prototype.extremeValues_ = function(series) { Dygraph.prototype.predraw_ = function() { var start = new Date(); + this.layout_.computePlotArea(); + // TODO(danvk): move more computations out of drawGraph_ and into here. this.computeYAxes_(); @@ -2149,10 +2172,6 @@ Dygraph.prototype.predraw_ = function() { this.cascadeEvents_('predraw'); - if (this.rangeSelector_) { - 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 @@ -2355,9 +2374,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"); } }; @@ -2391,11 +2408,6 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw) { this.canvas_.getContext('2d').clearRect(0, 0, this.canvas_.width, this.canvas_.height); - // Generate a static legend before any particular point is selected. - - if (this.rangeSelector_) { - this.rangeSelector_.renderInteractiveLayer(); - } if (this.attr_("drawCallback") !== null) { this.attr_("drawCallback")(this, is_initial_draw); } @@ -2414,7 +2426,7 @@ Dygraph.prototype.renderGraph_ = function(is_initial_draw) { Dygraph.prototype.computeYAxes_ = function() { // Preserve valueWindow settings if they exist, and if the user hasn't // specified a new valueRange. - var i, valueWindows, seriesName, axis, index, opts, v; + var valueWindows, axis, index, opts, v; if (this.axes_ !== undefined && this.user_attrs_.hasOwnProperty("valueRange") === false) { valueWindows = []; for (index = 0; index < this.axes_.length; index++) { @@ -2422,52 +2434,25 @@ Dygraph.prototype.computeYAxes_ = function() { } } - this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis. + // this.axes_ doesn't match this.attributes_.axes_.options. It's used for + // data computation as well as options storage. + // Go through once and add all the axes. + this.axes_ = []; - // Get a list of series names. - var labels = this.attr_("labels"); - var series = {}; - for (i = 1; i < labels.length; i++) series[labels[i]] = (i - 1); - - // all options which could be applied per-axis: - var axisOptions = [ - 'includeZero', - 'valueRange', - 'labelsKMB', - 'labelsKMG2', - 'pixelsPerYLabel', - 'yAxisLabelWidth', - 'axisLabelFontSize', - 'axisTickSize', - 'logscale' - ]; - - // Copy global axis options over to the first axis. - for (i = 0; i < axisOptions.length; i++) { - var k = axisOptions[i]; - v = this.attr_(k); - if (v) this.axes_[0][k] = v; + for (axis = 0; axis < this.attributes_.numAxes(); axis++) { + // Add a new axis, making a copy of its per-axis options. + opts = { g : this }; + Dygraph.update(opts, this.attributes_.axisOptions(axis)); + this.axes_[axis] = opts; } - // Go through once and add all the axes. - for (seriesName in series) { - if (!series.hasOwnProperty(seriesName)) continue; - axis = this.attr_("axis", seriesName); - if (axis === null) { - continue; - } - if (typeof(axis) == 'object') { - // Add a new axis, making a copy of its per-axis options. - opts = {}; - Dygraph.update(opts, this.axes_[0]); - Dygraph.update(opts, { valueRange: null }); // shouldn't inherit this. - var yAxisId = this.axes_.length; - opts.yAxisId = yAxisId; - opts.g = this; - Dygraph.update(opts, axis); - this.axes_.push(opts); - } - } + + // Copy global valueRange option over to the first axis. + // NOTE(konigsberg): Are these two statements necessary? + // I tried removing it. The automated tests pass, and manually + // messing with tests/zoom.html showed no trouble. + v = this.attr_('valueRange'); + if (v) this.axes_[0].valueRange = v; if (valueWindows !== undefined) { // Restore valueWindow settings. @@ -2476,7 +2461,6 @@ Dygraph.prototype.computeYAxes_ = function() { } } - // New axes options for (axis = 0; axis < this.axes_.length; axis++) { if (axis === 0) { opts = this.optionsViewForAxis_('y' + (axis ? '2' : '')); @@ -2490,7 +2474,6 @@ Dygraph.prototype.computeYAxes_ = function() { } } } - }; /** @@ -2520,24 +2503,25 @@ Dygraph.prototype.axisPropertiesForSeries = function(series) { * This fills in the valueRange and ticks fields in each entry of this.axes_. */ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { - // Build a map from axis number -> [list of series names] - var seriesForAxis = []; + + var isNullUndefinedOrNaN = function(num) { + return isNaN(parseFloat(num)); + }; var series; var numAxes = this.attributes_.numAxes(); - for (var yAxis = 0; yAxis < numAxes; yAxis++) { - seriesForAxis[yAxis] = this.attributes_.seriesForAxis(yAxis); - } // 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); + series = this.attributes_.seriesForAxis(i); - if (!seriesForAxis[i]) { + if (series.length === 0) { // If no series are defined or visible then use a reasonable default axis.extremeRange = [0, 1]; } else { // Calculate the extremes of extremes. - series = seriesForAxis[i]; var minY = Infinity; // extremes[series[0]][0]; var maxY = -Infinity; // extremes[series[0]][1]; var extremeMinY, extremeMaxY; @@ -2556,7 +2540,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { maxY = Math.max(extremeMaxY, maxY); } } - if (axis.includeZero && minY > 0) minY = 0; + if (includeZero && minY > 0) minY = 0; // Ensure we have a valid scale, otherwise default to [0, 1] for safety. if (minY == Infinity) minY = 0; @@ -2568,7 +2552,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { if (span === 0) { span = maxY; } var maxAxisY, minAxisY; - if (axis.logscale) { + if (logscale) { maxAxisY = maxY + 0.1 * span; minAxisY = minY; } else { @@ -2595,7 +2579,10 @@ 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 = [axis.valueRange[0], axis.valueRange[1]]; + axis.computedValueRange = [ + isNullUndefinedOrNaN(axis.valueRange[0]) ? axis.extremeRange[0] : axis.valueRange[0], + isNullUndefinedOrNaN(axis.valueRange[1]) ? axis.extremeRange[1] : axis.valueRange[1] + ]; } else { axis.computedValueRange = axis.extremeRange; } @@ -2820,6 +2807,10 @@ Dygraph.prototype.detectTypeFromString_ = function(str) { isDate = true; } + this.setXAxisOptions_(isDate); +}; + +Dygraph.prototype.setXAxisOptions_ = function(isDate) { if (isDate) { this.attrs_.xValueParser = Dygraph.dateParser; this.attrs_.axes.x.valueFormatter = Dygraph.dateString_; @@ -3056,8 +3047,8 @@ Dygraph.prototype.parseArray_ = function(data) { if (Dygraph.isDateLike(data[0][0])) { // Some intelligent defaults for a date x-axis. this.attrs_.axes.x.valueFormatter = Dygraph.dateString_; - this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter; this.attrs_.axes.x.ticker = Dygraph.dateTicker; + this.attrs_.axes.x.axisLabelFormatter = Dygraph.dateAxisFormatter; // Assume they're all dates. var parsedData = Dygraph.clone(data); @@ -3079,8 +3070,8 @@ Dygraph.prototype.parseArray_ = function(data) { // Some intelligent defaults for a numeric x-axis. /** @private (shut up, jsdoc!) */ this.attrs_.axes.x.valueFormatter = function(x) { return x; }; - this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter; this.attrs_.axes.x.ticker = Dygraph.numericLinearTicks; + this.attrs_.axes.x.axisLabelFormatter = Dygraph.numberAxisLabelFormatter; return data; } }; @@ -3223,6 +3214,7 @@ Dygraph.prototype.parseDataTable_ = function(data) { if (annotations.length > 0) { this.setAnnotations(annotations, true); } + this.attributes_.reparseSeries(); }; /** @@ -3321,6 +3313,8 @@ Dygraph.prototype.updateOptions = function(input_attrs, block_redraw) { Dygraph.updateDeep(this.user_attrs_, attrs); + this.attributes_.reparseSeries(); + if (file) { this.file_ = file; if (!block_redraw) this.start_(); @@ -3355,6 +3349,10 @@ Dygraph.mapLegacyOptions_ = function(attrs) { }; var map = function(opt, axis, new_opt) { if (typeof(attrs[opt]) != 'undefined') { + Dygraph.warn("Option " + opt + " is deprecated. Use the " + + new_opt + " option for the " + axis + " axis instead. " + + "(e.g. { axes : { " + axis + " : { " + new_opt + " : ... } } } " + + "(see http://dygraphs.com/per-axis.html for more information."); set(axis, new_opt, attrs[opt]); delete my_attrs[opt]; } @@ -3418,6 +3416,7 @@ Dygraph.prototype.resize = function(width, height) { // createInterface_ reset the layout, so we need to do this. this.layout_.setAnnotations(this.annotations_); } + this.createDragInterface_(); this.predraw_(); }