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;
labelsKMG2: false,
showLabelsOnHighlight: true,
- yValueFormatter: function(x) { return Dygraph.round_(x, 2); },
+ yValueFormatter: Dygraph.defaultFormat,
strokeWidth: 1.0,
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.
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;
}
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 += " <b><font color='" + c.toHex() + "'>"
+ point.name + "</font></b>:"
+ yval;
* @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);
*/
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
};
/**
+ * 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)
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:
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).
// 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;
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;
}
}
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;
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;
}
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;
--- /dev/null
+<html>
+ <head>
+ <title>Test of number formatting</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="../excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+ <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ </head>
+ <body>
+ <p>The default formatting mimicks printf with %.<i>p</i>g where <i>p</i> 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).</p>
+
+ <p>This test is intended to check that our formatting works properly for a
+ variety of precisions.</p>
+
+ <p>Precision to use (1 to 21):
+ <input type="text" id="p_input" size="20" onchange="updateTable();"></p>
+ <br>
+ <br>
+ <div id="content" style="font-family:'Courier New',monospace"></div>
+
+ <script type="text/javascript">
+ // Helper functions for generating an HTML table for holding the test
+ // results.
+ createRow = function(columnType, columns) {
+ var row = document.createElement('tr');
+ for (var i = 0; i < columns.length; i ++) {
+ var th = document.createElement(columnType);
+ var text = document.createTextNode(columns[i]);
+ th.appendChild(text);
+ row.appendChild(th);
+ };
+ return row;
+ };
+
+ createHeaderRow = function(columns) {
+ return createRow('th', columns);
+ };
+
+ createDataRow = function(columns) {
+ return createRow('td', columns);
+ };
+
+ createTable = function(headerColumns, dataColumnsList) {
+ var table = document.createElement('table');
+ table.appendChild(createHeaderRow(headerColumns));
+ for (var i = 0; i < dataColumnsList.length; i++) {
+ table.appendChild(createDataRow(dataColumnsList[i]));
+ }
+ return table;
+ };
+
+ updateTable = function() {
+ var headers = ['Dygraph.defaultFormat()', 'toPrecision()',
+ 'Dygraph.defaultFormat()', 'toPrecision()'];
+ var numbers = [];
+ var p = parseInt(document.getElementById('p_input').value);
+
+ for (var i = -10; i <= 10; i++) {
+ var n = Math.pow(10, i);
+ numbers.push([Dygraph.defaultFormat(n, p),
+ n.toPrecision(p),
+ Dygraph.defaultFormat(Math.PI * n, p),
+ (Math.PI * n).toPrecision(p)]);
+ }
+
+ // Check exact values of 0.
+ numbers.push([Dygraph.defaultFormat(0.0, p),
+ 0.0.toPrecision(p)]);
+
+ var elem = document.getElementById('content');
+ elem.innerHTML = '';
+ elem.appendChild(createTable(headers, numbers));
+ };
+
+ document.getElementById('p_input').value = '4';
+ updateTable();
+ </script>
+ </body>
+</html>
--- /dev/null
+<html>
+ <head>
+ <title>significant figures</title>
+ <!--[if IE]>
+ <script type="text/javascript" src="../excanvas.js"></script>
+ <![endif]-->
+ <script type="text/javascript" src="../strftime/strftime-min.js"></script>
+ <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
+ <script type="text/javascript" src="../dygraph-canvas.js"></script>
+ <script type="text/javascript" src="../dygraph.js"></script>
+ </head>
+ <body>
+ <p>Tests for various inputs to Dygraph.significantFigures(). All tests
+ should have result PASS.</p>
+ <div id="tests"></div>
+
+ <script type="text/javascript">
+ // Helper functions for generating an HTML table for holding the test
+ // results.
+ createRow = function(columnType, columns) {
+ var row = document.createElement('tr');
+ for (var i = 0; i < columns.length; i ++) {
+ var th = document.createElement(columnType);
+ var text = document.createTextNode(columns[i]);
+ th.appendChild(text);
+ row.appendChild(th);
+ };
+ return row;
+ };
+
+ createHeaderRow = function(columns) {
+ return createRow('th', columns);
+ };
+
+ createDataRow = function(columns) {
+ return createRow('td', columns);
+ };
+
+ createTable = function(headerColumns, dataColumnsList) {
+ var table = document.createElement('table');
+ table.appendChild(createHeaderRow(headerColumns));
+ for (var i = 0; i < dataColumnsList.length; i++) {
+ table.appendChild(createDataRow(dataColumnsList[i]));
+ }
+ table.setAttribute('border', '1');
+ return table;
+ };
+
+ // input gives input floating point in string form
+ // expected gives number of significant figures
+ var testData = [
+ {input: '1.0', expected: 1},
+ {input: '1.0000', expected: 1},
+ {input: '3.14159', expected: 6},
+ {input: '3.05', expected: 3},
+ {input: '3.0000001', expected: 8},
+ {input: '1.999999999999', expected: 13} // = 13 digits.
+ ];
+
+ var headers = ['Input', 'Output', 'Expected', 'Test Result'];
+ var data = [];
+
+ for (var i = 0; i < testData.length; i++) {
+ var test = testData[i];
+ var output = Dygraph.significantFigures(parseFloat(test.input));
+ data[i] = [test.input, output, test.expected,
+ (output == test.expected ? 'PASS' : 'FAIL')];
+ }
+
+ var root = document.getElementById('tests');
+ root.appendChild(createTable(headers, data));
+ </script>
+
+ <br>
+ <br>
+
+ <p>Check for correct number of significant figures with very small
+ y values. Both plots have the same input x,y values.</p>
+
+ <div id="smallvals1" style="width:600px; height:300px;"></div>
+ <br>
+ <br>
+ <div id="smallvals2" style="width:600px; height:300px;"></div>
+
+ <script type="text/javascript">
+ var data = [
+ [2.036e-7, 1.02e-7],
+ [2.125e-7, 1.1e-7],
+ [2.212e-7, 1.2e-7],
+ [2.333e-7, 1.522e-7]
+ ];
+
+ new Dygraph(document.getElementById("smallvals1"), data,
+ {
+ labels: ["Date","CustomFormatting"],
+ xValueFormatter: function(x) { return x.toPrecision(4); },
+ yValueFormatter: function(x) { return x.toPrecision(3); }
+ });
+
+ new Dygraph(document.getElementById("smallvals2"), data,
+ {
+ labels: ["Date","DefaultFormat"]
+ });
+ </script>
+ </body>
+</html>
projects / dygraphs.git / commitdiff