From: Jeremy Brewer Date: Fri, 7 Jan 2011 17:14:30 +0000 (-0500) Subject: Merge branch 'master' of https://github.com/danvk/dygraphs X-Git-Tag: v1.0.0~592 X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=15b00ba8914e0da9ad5dca2917d7743004485e73;hp=c69da5ec31899d82e22960550decd601399b4587;p=dygraphs.git Merge branch 'master' of https://github.com/danvk/dygraphs Conflicts: dygraph.js tests/significant-figures.html --- diff --git a/dygraph.js b/dygraph.js index 0d21e42..3b9a98d 100644 --- a/dygraph.js +++ b/dygraph.js @@ -73,6 +73,46 @@ Dygraph.toString = function() { return this.__repr__(); }; +/** + * Number formatting function which mimicks the behavior of %g in printf, i.e. + * either exponential or fixed format (without trailing 0s) is used depending on + * the length of the generated string. The advantage of this format is that + * there is a predictable upper bound on the resulting string length and + * significant figures are not dropped. + * + * NOTE: JavaScript's native toPrecision() is NOT a drop-in replacement for %g. + * It creates strings which are too long for absolute values between 10^-4 and + * 10^-6. See tests/number-format.html for examples. + * + * @param {Number} x The number to format + * @param {Number} opt_precision The precision to use, default 2. + * @return {String} A string formatted like %g in printf. The max generated + * string length should be precision + + */ +Dygraph.defaultFormat = function(x, opt_precision) { + // Avoid invalid precision values; [1, 21] is the valid range. + var p = Math.min(Math.max(1, opt_precision || 2), 21); + + // This is deceptively simple. The actual algorithm comes from: + // + // Max allowed length = p + 4 + // where 4 comes from 'e+n' and '.'. + // + // Length of fixed format = 2 + y + p + // where 2 comes from '0.' and y = # of leading zeroes. + // + // Equating the two and solving for y yields y = 2, or 0.00xxxx which is + // 1.0e-3. + // + // Since the behavior of toPrecision() is identical for larger numbers, we + // don't have to worry about the other bound. + // + // Finally, the argument for toExponential() is the number of trailing digits, + // so we take off 1 for the value before the '.'. + return (Math.abs(x) < 1.0e-3 && x != 0.0) ? + x.toExponential(p - 1) : x.toPrecision(p); +}; + // Various default values Dygraph.DEFAULT_ROLL_PERIOD = 1; Dygraph.DEFAULT_WIDTH = 480; @@ -96,7 +136,7 @@ Dygraph.DEFAULT_ATTRS = { labelsKMG2: false, showLabelsOnHighlight: true, - yValueFormatter: function(x) { return Dygraph.round_(x, 2); }, + yValueFormatter: Dygraph.defaultFormat, strokeWidth: 1.0, @@ -194,6 +234,20 @@ Dygraph.prototype.__init__ = function(div, file, attrs) { this.wilsonInterval_ = attrs.wilsonInterval || true; this.is_initial_draw_ = true; this.annotations_ = []; + + // Number of digits to use when labeling the x (if numeric) and y axis + // ticks. + this.numXDigits_ = 2; + this.numYDigits_ = 2; + + // When labeling x (if numeric) or y values in the legend, there are + // numDigits + numExtraDigits of precision used. For axes labels with N + // digits of precision, the data should be displayed with at least N+1 digits + // of precision. The reason for this is to divide each interval between + // successive ticks into tenths (for 1) or hundredths (for 2), etc. For + // example, if the labels are [0, 1, 2], we want data to be displayed as + // 0.1, 1.3, etc. + this.numExtraDigits_ = 1; // Clear the div. This ensure that, if multiple dygraphs are passed the same // div, then only one will be drawn. @@ -1392,7 +1446,8 @@ Dygraph.prototype.updateSelection_ = function() { var canvasx = this.selPoints_[0].canvasx; // Set the status message to indicate the selected point(s) - var replace = this.attr_('xValueFormatter')(this.lastx_, this) + ":"; + var replace = this.attr_('xValueFormatter')( + this.lastx_, this.numXDigits_ + this.numExtraDigits_) + ":"; var fmtFunc = this.attr_('yValueFormatter'); var clen = this.colors_.length; @@ -1406,7 +1461,7 @@ Dygraph.prototype.updateSelection_ = function() { } var point = this.selPoints_[i]; var c = new RGBColor(this.plotter_.colors[point.name]); - var yval = fmtFunc(point.yval); + var yval = fmtFunc(point.yval, this.numYDigits_ + this.numExtraDigits_); replace += " " + point.name + ":" + yval; @@ -1570,7 +1625,7 @@ Dygraph.dateAxisFormatter = function(date, granularity) { * @return {String} A date of the form "YYYY/MM/DD" * @private */ -Dygraph.dateString_ = function(date, self) { +Dygraph.dateString_ = function(date) { var zeropad = Dygraph.zeropad; var d = new Date(date); @@ -1620,17 +1675,18 @@ Dygraph.prototype.quarters = ["Jan", "Apr", "Jul", "Oct"]; */ Dygraph.prototype.addXTicks_ = function() { // Determine the correct ticks scale on the x-axis: quarterly, monthly, ... - var startDate, endDate; + var opts = {xTicks: []}; + var formatter = this.attr_('xTicker'); if (this.dateWindow_) { - startDate = this.dateWindow_[0]; - endDate = this.dateWindow_[1]; + opts.xTicks = formatter(this.dateWindow_[0], this.dateWindow_[1], this); } else { - startDate = this.rawData_[0][0]; - endDate = this.rawData_[this.rawData_.length - 1][0]; + // numericTicks() returns multiple values. + var ret = formatter(this.rawData_[0][0], + this.rawData_[this.rawData_.length - 1][0], this); + opts.xTicks = ret.ticks; + this.numXDigits_ = ret.numDigits; } - - var xTicks = this.attr_('xTicker')(startDate, endDate, this); - this.layout_.updateOptions({xTicks: xTicks}); + this.layout_.updateOptions(opts); }; // Time granularity enumeration @@ -1814,6 +1870,43 @@ Dygraph.dateTicker = function(startDate, endDate, self) { }; /** + * Determine the number of significant figures in a Number up to the specified + * precision. Note that there is no way to determine if a trailing '0' is + * significant or not, so by convention we return 1 for all of the following + * inputs: 1, 1.0, 1.00, 1.000 etc. + * @param {Number} x The input value. + * @param {Number} opt_maxPrecision Optional maximum precision to consider. + * Default and maximum allowed value is 13. + * @return {Number} The number of significant figures which is >= 1. + */ +Dygraph.significantFigures = function(x, opt_maxPrecision) { + var precision = Math.max(opt_maxPrecision || 13, 13); + + // Convert the number to its exponential notation form and work backwards, + // ignoring the 'e+xx' bit. This may seem like a hack, but doing a loop and + // dividing by 10 leads to roundoff errors. By using toExponential(), we let + // the JavaScript interpreter handle the low level bits of the Number for us. + var s = x.toExponential(precision); + var ePos = s.lastIndexOf('e'); // -1 case handled by return below. + + for (var i = ePos - 1; i >= 0; i--) { + if (s[i] == '.') { + // Got to the decimal place. We'll call this 1 digit of precision because + // we can't know for sure how many trailing 0s are significant. + return 1; + } else if (s[i] != '0') { + // Found the first non-zero digit. Return the number of characters + // except for the '.'. + return i; // This is i - 1 + 1 (-1 is for '.', +1 is for 0 based index). + } + } + + // Occurs if toExponential() doesn't return a string containing 'e', which + // should never happen. + return 1; +}; + +/** * Add ticks when the x axis has numbers on it (instead of dates) * @param {Number} startDate Start of the date window (millis since epoch) * @param {Number} endDate End of the date window (millis since epoch) @@ -1831,7 +1924,7 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) { var ticks = []; if (vals) { for (var i = 0; i < vals.length; i++) { - ticks.push({v: vals[i]}); + ticks[i].push({v: vals[i]}); } } else { // Basic idea: @@ -1886,30 +1979,35 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) { k = 1024; k_labels = [ "k", "M", "G", "T" ]; } - var formatter = attr('yAxisLabelFormatter') ? attr('yAxisLabelFormatter') : attr('yValueFormatter'); + var formatter = attr('yAxisLabelFormatter') ? + attr('yAxisLabelFormatter') : attr('yValueFormatter'); + + // Determine the number of decimal places needed for the labels below by + // taking the maximum number of significant figures for any label. We must + // take the max because we can't tell if trailing 0s are significant. + var numDigits = 0; + for (var i = 0; i < ticks.length; i++) { + numDigits = Math.max(Dygraph.significantFigures(ticks[i].v), numDigits); + } 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) { + var label = (formatter !== undefined) ? + formatter(tickV, numDigits) : tickV.toPrecision(numDigits); + if (k_labels.length > 0) { // 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]; + label = (tickV / n).toPrecision(numDigits) + k_labels[j]; break; } } } ticks[i].label = label; } - return ticks; + return {ticks: ticks, numDigits: numDigits}; }; // Computes the range of the data series (including confidence intervals). @@ -2284,11 +2382,13 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { // primary axis. However, if an axis is specifically marked as having // independent ticks, then that is permissible as well. if (i == 0 || axis.independentTicks) { - axis.ticks = + var ret = Dygraph.numericTicks(axis.computedValueRange[0], axis.computedValueRange[1], this, axis); + axis.ticks = ret.ticks; + this.numYDigits_ = ret.numDigits; } else { var p_axis = this.axes_[0]; var p_ticks = p_axis.ticks; @@ -2301,10 +2401,12 @@ Dygraph.prototype.computeYAxisRanges_ = function(extremes) { tick_values.push(y_val); } - axis.ticks = + var ret = Dygraph.numericTicks(axis.computedValueRange[0], axis.computedValueRange[1], this, axis, tick_values); + axis.ticks = ret.ticks; + this.numYDigits_ = ret.numDigits; } } @@ -2503,7 +2605,7 @@ Dygraph.prototype.detectTypeFromString_ = function(str) { this.attrs_.xTicker = Dygraph.dateTicker; this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter; } else { - this.attrs_.xValueFormatter = function(x) { return x; }; + this.attrs_.xValueFormatter = this.attrs_.yValueFormatter; this.attrs_.xValueParser = function(x) { return parseFloat(x); }; this.attrs_.xTicker = Dygraph.numericTicks; this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter; @@ -2666,7 +2768,7 @@ Dygraph.prototype.parseArray_ = function(data) { return parsedData; } else { // Some intelligent defaults for a numeric x-axis. - this.attrs_.xValueFormatter = function(x) { return x; }; + this.attrs_.xValueFormatter = this.attrs_.yValueFormatter; this.attrs_.xTicker = Dygraph.numericTicks; return data; } @@ -2692,7 +2794,7 @@ Dygraph.prototype.parseDataTable_ = function(data) { this.attrs_.xTicker = Dygraph.dateTicker; this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter; } else if (indepType == 'number') { - this.attrs_.xValueFormatter = function(x) { return x; }; + this.attrs_.xValueFormatter = this.attrs_.yValueFormatter; this.attrs_.xValueParser = function(x) { return parseFloat(x); }; this.attrs_.xTicker = Dygraph.numericTicks; this.attrs_.xAxisLabelFormatter = this.attrs_.xValueFormatter; diff --git a/tests/dygraph-many-points-benchmark.html b/tests/dygraph-many-points-benchmark.html new file mode 100644 index 0000000..3abdeb1 --- /dev/null +++ b/tests/dygraph-many-points-benchmark.html @@ -0,0 +1,55 @@ + + + Benchmarking for Plots with Many Points + + + + + + + +

Plot which can be easily generated with different numbers of points for + benchmarking/profiling and improving performance of dygraphs.

+

Number of points: +

+

Roll period (in points): +

+
+
+
+ + + + diff --git a/tests/number-format.html b/tests/number-format.html new file mode 100644 index 0000000..e17a15c --- /dev/null +++ b/tests/number-format.html @@ -0,0 +1,87 @@ + + + Test of number formatting + + + + + + + +

The default formatting mimicks printf with %.pg where p is + the precision to use. It turns out that JavaScript's toPrecision() + method is almost but not exactly equal to %g; they differ for values + with small absolute values (10^-1 to 10^-5 or so), with toPrecision() + yielding strings that are longer than they should be (i.e. using fixed + point where %g would use exponential).

+ +

This test is intended to check that our formatting works properly for a + variety of precisions.

+ +

Precision to use (1 to 21): +

+
+
+
+ + + + diff --git a/tests/significant-figures.html b/tests/significant-figures.html new file mode 100644 index 0000000..0364b34 --- /dev/null +++ b/tests/significant-figures.html @@ -0,0 +1,106 @@ + + + significant figures + + + + + + + +

Tests for various inputs to Dygraph.significantFigures(). All tests + should have result PASS.

+
+ + + +
+
+ +

Check for correct number of significant figures with very small + y values. Both plots have the same input x,y values.

+ +
+
+
+
+ + + +