X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph.js;h=671de647fd9baa7ac07af4db18f8c72fc46ccdd9;hb=dcb25130b93f7d1ca126c01fb90f1b1aa413c54d;hp=d738e54129c784dd03456e627a28decce533c883;hpb=9da9874082de50040c37a771ef45aead75443a20;p=dygraphs.git diff --git a/dygraph.js b/dygraph.js index d738e54..671de64 100644 --- a/dygraph.js +++ b/dygraph.js @@ -24,7 +24,6 @@ If the 'errorBars' option is set in the constructor, the input should be of the form - Date,SeriesA,SeriesB,... YYYYMMDD,A1,sigmaA1,B1,sigmaB1,... YYYYMMDD,A2,sigmaA2,B2,sigmaB2,... @@ -80,9 +79,9 @@ Dygraph.DEFAULT_HEIGHT = 320; Dygraph.AXIS_LINE_WIDTH = 0.3; Dygraph.LOG_SCALE = 10; -Dygraph.LOG_BASE_E_OF_TEN = Math.log(Dygraph.LOG_SCALE); +Dygraph.LN_TEN = Math.log(Dygraph.LOG_SCALE); Dygraph.log10 = function(x) { - return Math.log(x) / Dygraph.LOG_BASE_E_OF_TEN; + return Math.log(x) / Dygraph.LN_TEN; } // Default attribute values. @@ -119,7 +118,6 @@ Dygraph.DEFAULT_ATTRS = { delimiter: ',', - logScale: false, sigma: 2.0, errorBars: false, fractions: false, @@ -200,6 +198,10 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { this.is_initial_draw_ = true; this.annotations_ = []; + // Zoomed indicators - These indicate when the graph has been zoomed and on what axis. + this.zoomed_x_ = false; + this.zoomed_y_ = false; + // Clear the div. This ensure that, if multiple dygraphs are passed the same // div, then only one will be drawn. div.innerHTML = ""; @@ -262,6 +264,28 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { this.start_(); }; +/** + * Returns the zoomed status of the chart for one or both axes. + * + * Axis is an optional parameter. Can be set to 'x' or 'y'. + * + * The zoomed status for an axis is set whenever a user zooms using the mouse + * or when the dateWindow or valueRange are updated (unless the noZoomFlagChange + * option is also specified). + */ +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'."; +}; + +Dygraph.prototype.toString = function() { + var maindiv = this.maindiv_; + var id = (maindiv && maindiv.id) ? maindiv.id : maindiv + return "[Dygraph " + id + "]"; +} + Dygraph.prototype.attr_ = function(name, seriesName) { if (seriesName && typeof(this.user_attrs_[seriesName]) != 'undefined' && @@ -362,7 +386,7 @@ Dygraph.prototype.yAxisRanges = function() { * axis. Uses the first axis by default. * Returns a two-element array: [X, Y] * - * Note: use toDomXCoord instead of toDomCoords(x. null) and use toDomYCoord + * Note: use toDomXCoord instead of toDomCoords(x, null) and use toDomYCoord * instead of toDomCoords(null, y, axis). */ Dygraph.prototype.toDomCoords = function(x, y, axis) { @@ -372,8 +396,8 @@ Dygraph.prototype.toDomCoords = function(x, y, axis) { /** * Convert from data x coordinates to canvas/div X coordinate. * If specified, do this conversion for the coordinate system of a particular - * axis. Uses the first axis by default. - * returns a single value or null if x is null. + * axis. + * Returns a single value or null if x is null. */ Dygraph.prototype.toDomXCoord = function(x) { if (x == null) { @@ -392,11 +416,12 @@ Dygraph.prototype.toDomXCoord = function(x) { * returns a single value or null if y is null. */ Dygraph.prototype.toDomYCoord = function(y, axis) { - var pct = toPercentYCoord(y, axis); + var pct = this.toPercentYCoord(y, axis); if (pct == null) { return null; } + var area = this.plotter_.area; return area.y + pct * area.h; } @@ -406,7 +431,7 @@ Dygraph.prototype.toDomYCoord = function(y, axis) { * axis. Uses the first axis by default. * Returns a two-element array: [X, Y]. * - * Note: use toDataXCoord instead of toDataCoords(x. null) and use toDataYCoord + * Note: use toDataXCoord instead of toDataCoords(x, null) and use toDataYCoord * instead of toDataCoords(null, y, axis). */ Dygraph.prototype.toDataCoords = function(x, y, axis) { @@ -442,7 +467,8 @@ Dygraph.prototype.toDataYCoord = function(y, axis) { var area = this.plotter_.area; var yRange = this.yAxisRange(axis); - if (!this.attr_("logscale")) { + if (typeof(axis) == "undefined") axis = 0; + if (!this.axes_[axis].logscale) { return yRange[0] + (area.h - y) / area.h * (yRange[1] - yRange[0]); } else { // Computing the inverse of toDomCoord. @@ -488,12 +514,13 @@ Dygraph.prototype.toPercentYCoord = function(y, axis) { if (y == null) { return null; } + if (typeof(axis) == "undefined") axis = 0; var area = this.plotter_.area; var yRange = this.yAxisRange(axis); var pct; - if (!this.attr_("logscale")) { + if (!this.axes_[axis].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. @@ -911,6 +938,8 @@ Dygraph.startPan = function(event, g, context) { context.isPanning = true; var xRange = g.xAxisRange(); context.dateRange = xRange[1] - xRange[0]; + context.initialLeftmostDate = xRange[0]; + context.xUnitsPerPixel = context.dateRange / (g.plotter_.area.w - 1); // 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. @@ -918,14 +947,20 @@ Dygraph.startPan = function(event, g, context) { for (var i = 0; i < g.axes_.length; i++) { var axis = g.axes_[i]; var yRange = g.yAxisRange(i); - axis.dragValueRange = yRange[1] - yRange[0]; - axis.draggingValue = g.toDataYCoord(context.dragStartY, i); + // TODO(konigsberg): These values should be in |context|. + // In log scale, initialTopValue, dragValueRange and unitsPerPixel are log scale. + if (axis.logscale) { + axis.initialTopValue = Dygraph.log10(yRange[1]); + axis.dragValueRange = Dygraph.log10(yRange[1]) - Dygraph.log10(yRange[0]); + } else { + axis.initialTopValue = yRange[1]; + axis.dragValueRange = yRange[1] - yRange[0]; + } + axis.unitsPerPixel = axis.dragValueRange / (g.plotter_.area.h - 1); + + // While calculating axes, set 2dpan. if (axis.valueWindow || axis.valueRange) context.is2DPan = true; } - - // TODO(konigsberg): Switch from all this math to toDataCoords? - // Seems to work for the dragging value. - context.draggingDate = (context.dragStartX / g.width_) * context.dateRange + xRange[0]; }; // Called in response to an interaction model operation that @@ -939,33 +974,29 @@ Dygraph.movePan = function(event, g, context) { context.dragEndX = g.dragGetX_(event, context); context.dragEndY = g.dragGetY_(event, context); - // TODO(danvk): update this comment - // Want to have it so that: - // 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 = context.draggingDate - (context.dragEndX / g.width_) * context.dateRange; + var minDate = context.initialLeftmostDate - + (context.dragEndX - context.dragStartX) * context.xUnitsPerPixel; var maxDate = minDate + context.dateRange; g.dateWindow_ = [minDate, maxDate]; // y-axis scaling is automatic unless this is a full 2D pan. if (context.is2DPan) { // Adjust each axis appropriately. - // NOTE(konigsberg): I don't think this computation for y_frac is correct. - // I think it doesn't take into account the display of the x axis. - // See, when I tested this with console.log(y_frac), and move the mouse - // cursor to the botom, the largest y_frac was 0.94, and not 1.0. That - // could also explain why panning tends to start with a small jumpy shift. - var y_frac = context.dragEndY / g.height_; - for (var i = 0; i < g.axes_.length; i++) { var axis = g.axes_[i]; - var maxValue = axis.draggingValue + y_frac * axis.dragValueRange; + + var pixelsDragged = context.dragEndY - context.dragStartY; + var unitsDragged = pixelsDragged * axis.unitsPerPixel; + + // In log scale, maxValue and minValue are the logs of those values. + var maxValue = axis.initialTopValue + unitsDragged; var minValue = maxValue - axis.dragValueRange; - console.log(axis.draggingValue, axis.dragValueRange, minValue, maxValue, y_frac); - axis.valueWindow = [ minValue, maxValue ]; + if (axis.logscale) { + axis.valueWindow = [ Math.pow(Dygraph.LOG_SCALE, minValue), + Math.pow(Dygraph.LOG_SCALE, maxValue) ]; + } else { + axis.valueWindow = [ minValue, maxValue ]; + } } } @@ -980,9 +1011,12 @@ Dygraph.movePan = function(event, g, context) { // panning behavior. // Dygraph.endPan = function(event, g, context) { + // TODO(konigsberg): Clear the context data from the axis. + // TODO(konigsberg): mouseup should just delete the + // context object, and mousedown should create a new one. context.isPanning = false; context.is2DPan = false; - context.draggingDate = null; + context.initialLeftmostDate = null; context.dateRange = null; context.valueRange = null; } @@ -1158,12 +1192,12 @@ Dygraph.prototype.createDragInterface_ = function() { prevEndY: null, 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] - draggingDate: null, + // The value on the left side of the graph when a pan operation starts. + initialLeftmostDate: null, + + // The number of units each pixel spans. (This won't be valid for log + // scales) + xUnitsPerPixel: null, // TODO(danvk): update this comment // The range in second/value units that the viewport encompasses during a @@ -1310,6 +1344,7 @@ Dygraph.prototype.doZoomX_ = function(lowX, highX) { */ Dygraph.prototype.doZoomXDates_ = function(minDate, maxDate) { this.dateWindow_ = [minDate, maxDate]; + this.zoomed_x_ = true; this.drawGraph_(); if (this.attr_("zoomCallback")) { this.attr_("zoomCallback")(minDate, maxDate, this.yAxisRanges()); @@ -1337,9 +1372,11 @@ Dygraph.prototype.doZoomY_ = function(lowY, highY) { valueRanges.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()); } }; @@ -1367,6 +1404,8 @@ Dygraph.prototype.doUnzoom_ = function() { 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]; @@ -1403,10 +1442,6 @@ Dygraph.prototype.mouseMove_ = function(event) { idx = i; } if (idx >= 0) lastx = points[idx].xval; - // Check that you can really highlight the last day's data - var last = points[points.length-1]; - if (last != null && canvasx > last.canvasx) - lastx = points[points.length-1].xval; // Extract the points we've selected this.selPoints_ = []; @@ -1914,12 +1949,75 @@ Dygraph.dateTicker = function(startDate, endDate, self) { } }; +// This is a list of human-friendly values at which to show tick marks on a log +// scale. It is k * 10^n, where k=1..9 and n=-39..+39, so: +// ..., 1, 2, 3, 4, 5, ..., 9, 10, 20, 30, ..., 90, 100, 200, 300, ... +// NOTE: this assumes that Dygraph.LOG_SCALE = 10. +Dygraph.PREFERRED_LOG_TICK_VALUES = function() { + var vals = []; + for (var power = -39; power <= 39; power++) { + var range = Math.pow(10, power); + for (var mult = 1; mult <= 9; mult++) { + var val = range * mult; + vals.push(val); + } + } + return vals; +}(); + +// val is the value to search for +// arry is the value over which to search +// if abs > 0, find the lowest entry greater than val +// if abs < 0, find the highest entry less than val +// if abs == 0, find the entry that equals val. +// Currently does not work when val is outside the range of arry's values. +Dygraph.binarySearch = function(val, arry, abs, low, high) { + if (low == null || high == null) { + low = 0; + high = arry.length - 1; + } + if (low > high) { + return -1; + } + if (abs == null) { + abs = 0; + } + var validIndex = function(idx) { + return idx >= 0 && idx < arry.length; + } + var mid = parseInt((low + high) / 2); + var element = arry[mid]; + if (element == val) { + return mid; + } + if (element > val) { + if (abs > 0) { + // Accept if element > val, but also if prior element < val. + var idx = mid - 1; + if (validIndex(idx) && arry[idx] < val) { + return mid; + } + } + return Dygraph.binarySearch(val, arry, abs, low, mid - 1); + } + if (element < val) { + if (abs < 0) { + // Accept if element < val, but also if prior element > val. + var idx = mid + 1; + if (validIndex(idx) && arry[idx] > val) { + return mid; + } + } + return Dygraph.binarySearch(val, arry, abs, mid + 1, high); + } +}; + /** * Add ticks when the x axis has numbers on it (instead of dates) * TODO(konigsberg): Update comment. * - * @param {Number} startDate Start of the date window (millis since epoch) - * @param {Number} endDate End of the date window (millis since epoch) + * @param {Number} minV minimum value + * @param {Number} maxV maximum value * @param self * @param {function} attribute accessor function. * @return {Array.} Array of {label, value} tuples. @@ -1937,23 +2035,51 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) { ticks.push({v: vals[i]}); } } else { - if (self.attr_("logscale")) { - // As opposed to the other ways for computing ticks, we're just going - // for nearby values. There's no reasonable way to scale the values - // (unless we want to show strings like "log(" + x + ")") in which case - // x can be integer values. - - // so compute height / pixelsPerTick and move on. + if (axis_props && attr("logscale")) { var pixelsPerTick = attr('pixelsPerYLabel'); + // NOTE(konigsberg): Dan, should self.height_ be self.plotter_.area.h? var nTicks = Math.floor(self.height_ / pixelsPerTick); - var vv = minV; - - // Construct the set of ticks. - for (var i = 0; i < nTicks; i++) { - ticks.push( {v: vv} ); - vv = vv * Dygraph.LOG_SCALE; + var minIdx = Dygraph.binarySearch(minV, Dygraph.PREFERRED_LOG_TICK_VALUES, 1); + var maxIdx = Dygraph.binarySearch(maxV, Dygraph.PREFERRED_LOG_TICK_VALUES, -1); + if (minIdx == -1) { + minIdx = 0; } - } else { + if (maxIdx == -1) { + maxIdx = Dygraph.PREFERRED_LOG_TICK_VALUES.length - 1; + } + // Count the number of tick values would appear, if we can get at least + // nTicks / 4 accept them. + var lastDisplayed = null; + if (maxIdx - minIdx >= nTicks / 4) { + var axisId = axis_props.yAxisId; + for (var idx = maxIdx; idx >= minIdx; idx--) { + var tickValue = Dygraph.PREFERRED_LOG_TICK_VALUES[idx]; + var domCoord = axis_props.g.toDomYCoord(tickValue, axisId); + var tick = { v: tickValue }; + if (lastDisplayed == null) { + lastDisplayed = { + tickValue : tickValue, + domCoord : domCoord + }; + } else { + if (domCoord - lastDisplayed.domCoord >= pixelsPerTick) { + lastDisplayed = { + tickValue : tickValue, + domCoord : domCoord + }; + } else { + tick.label = ""; + } + } + ticks.push(tick); + } + // Since we went in backwards order. + ticks.reverse(); + } + } + + // ticks.length won't be 0 if the log scale function finds values to insert. + if (ticks.length == 0) { // Basic idea: // Try labels every 1, 2, 5, 10, 20, 50, 100, etc. // Calculate the resulting tick spacing (i.e. this.height_ / nTicks). @@ -2009,26 +2135,29 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) { } var formatter = attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter'); + // Add labels to the ticks. for (var i = 0; i < ticks.length; i++) { - var tickV = ticks[i].v; - var absTickV = Math.abs(tickV); - var label; - if (formatter != undefined) { - label = formatter(tickV); - } else { - label = Dygraph.round_(tickV, 2); - } - if (k_labels.length) { - // Round up to an appropriate unit. - var n = k*k*k*k; - for (var j = 3; j >= 0; j--, n /= k) { - if (absTickV >= n) { - label = Dygraph.round_(tickV / n, 1) + k_labels[j]; - break; + if (ticks[i].label == null) { + var tickV = ticks[i].v; + var absTickV = Math.abs(tickV); + var label; + if (formatter != undefined) { + label = formatter(tickV); + } else { + label = Dygraph.round_(tickV, 2); + } + if (k_labels.length) { + // Round up to an appropriate unit. + var n = k*k*k*k; + for (var j = 3; j >= 0; j--, n /= k) { + if (absTickV >= n) { + label = Dygraph.round_(tickV / n, 1) + k_labels[j]; + break; + } } } + ticks[i].label = label; } - ticks[i].label = label; } return ticks; }; @@ -2135,12 +2264,24 @@ Dygraph.prototype.drawGraph_ = function() { var seriesName = this.attr_("labels")[i]; var connectSeparatedPoints = this.attr_('connectSeparatedPoints', i); + var logScale = this.attr_('logscale', i); var series = []; for (var j = 0; j < data.length; j++) { - if (data[j][i] != null || !connectSeparatedPoints) { - var date = data[j][0]; - series.push([date, data[j][i]]); + 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]); + } } } @@ -2220,18 +2361,22 @@ Dygraph.prototype.drawGraph_ = function() { this.layout_.addDataset(this.attr_("labels")[i], datasets[i]); } - // TODO(danvk): this method doesn't need to return anything. - var out = this.computeYAxisRanges_(extremes); - var axes = out[0]; - var seriesToAxisMap = out[1]; - this.layout_.updateOptions( { yAxes: axes, - seriesToAxisMap: seriesToAxisMap - } ); - + if (datasets.length > 0) { + // TODO(danvk): this method doesn't need to return anything. + var out = this.computeYAxisRanges_(extremes); + var axes = out[0]; + var seriesToAxisMap = out[1]; + this.layout_.updateOptions( { yAxes: axes, + seriesToAxisMap: seriesToAxisMap + } ); + } this.addXTicks_(); + // Save the X axis zoomed status as the updateOptions call will tend to set it errorneously + var tmp_zoomed_x = this.zoomed_x_; // Tell PlotKit to use this new data and render itself this.layout_.updateOptions({dateWindow: this.dateWindow_}); + this.zoomed_x_ = tmp_zoomed_x; this.layout_.evaluateWithError(); this.plotter_.clear(); this.plotter_.render(); @@ -2254,7 +2399,16 @@ Dygraph.prototype.drawGraph_ = function() { * indices are into the axes_ array. */ Dygraph.prototype.computeYAxes_ = function() { - this.axes_ = [{}]; // always have at least one y-axis. + var valueWindows; + if (this.axes_ != undefined) { + // Preserve valueWindow settings. + valueWindows = []; + for (var index = 0; index < this.axes_.length; index++) { + valueWindows.push(this.axes_[index].valueWindow); + } + } + + this.axes_ = [{ yAxisId : 0, g : this }]; // always have at least one y-axis. this.seriesToAxisMap_ = {}; // Get a list of series names. @@ -2271,7 +2425,8 @@ Dygraph.prototype.computeYAxes_ = function() { 'pixelsPerYLabel', 'yAxisLabelWidth', 'axisLabelFontSize', - 'axisTickSize' + 'axisTickSize', + 'logscale' ]; // Copy global axis options over to the first axis. @@ -2294,9 +2449,12 @@ Dygraph.prototype.computeYAxes_ = function() { var 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); - this.seriesToAxisMap_[seriesName] = this.axes_.length - 1; + this.seriesToAxisMap_[seriesName] = yAxisId; } } @@ -2326,6 +2484,13 @@ Dygraph.prototype.computeYAxes_ = function() { if (vis[i - 1]) seriesToAxisFiltered[s] = this.seriesToAxisMap_[s]; } this.seriesToAxisMap_ = seriesToAxisFiltered; + + if (valueWindows != undefined) { + // Restore valueWindow settings. + for (var index = 0; index < valueWindows.length; index++) { + this.axes_[index].valueWindow = valueWindows[index]; + } + } }; /** @@ -2359,7 +2524,6 @@ 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 isLogScale = this.attr_("logscale"); var axis = this.axes_[i]; if (axis.valueWindow) { // This is only set if the user has zoomed on the y-axis. It is never set @@ -2387,7 +2551,7 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { var maxAxisY; var minAxisY; - if (isLogScale) { + if (axis.logscale) { var maxAxisY = maxY + 0.1 * span; var minAxisY = minY; } else { @@ -2617,7 +2781,7 @@ Dygraph.dateParser = function(dateStr, self) { */ Dygraph.prototype.detectTypeFromString_ = function(str) { var isDate = false; - if (str.indexOf('-') >= 0 || + if (str.indexOf('-') > 0 || str.indexOf('/') >= 0 || isNaN(parseFloat(str))) { isDate = true; @@ -3021,6 +3185,12 @@ Dygraph.prototype.start_ = function() { *
  • file: changes the source data for the graph
    • *
  • errorBars: changes whether the data contains stddev
    • * + * + * If the dateWindow or valueRange options are specified, the relevant zoomed_x_ + * or zoomed_y_ flags are set, unless the noZoomFlagChange option is also + * secified. This allows for the chart to be programmatically zoomed without + * altering the zoomed flags. + * * @param {Object} attrs The new properties and values */ Dygraph.prototype.updateOptions = function(attrs) { @@ -3030,6 +3200,12 @@ Dygraph.prototype.updateOptions = function(attrs) { } if ('dateWindow' in attrs) { this.dateWindow_ = attrs.dateWindow; + if (!('noZoomFlagChange' in attrs)) { + this.zoomed_x_ = attrs.dateWindow != null; + } + } + if ('valueRange' in attrs && !('noZoomFlagChange' in attrs)) { + this.zoomed_y_ = attrs.valueRange != null; } // TODO(danvk): validate per-series options.