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 = Dygraph.round_(tickV / n, attr('digitsAfterDecimal')) + k_labels[j];
break;
}
}
this.attrs_.xTicker = Dygraph.dateTicker;
this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
} else {
+ // TODO(danvk): use Dygraph.numberFormatter here?
this.attrs_.xValueFormatter = function(x) { return x; };
this.attrs_.xValueParser = function(x) { return parseFloat(x); };
this.attrs_.xTicker = Dygraph.numericTicks;
"labels": ["Zooming"],
"type": "boolean",
"description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
+ },
+ "sigFigs" : {
+ "default": "null",
+ "labels": ["Value display/formatting"],
+ "type": "integer",
+ "description": "By default, dygraphs displays numbers with a fixed number of digits after the decimal point. If you'd prefer to have a fixed number of significant figures, set this option to that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3."
+ },
+ "digitsAfterDecimal" : {
+ "default": "2",
+ "labels": ["Value display/formatting"],
+ "type": "integer",
+ "description": "Unless it's run in scientific mode (see the <code>sigFigs</code> option), dygraphs displays numbers with <code>digitsAfterDecimal</code> digits after the decimal point. Trailing zeros are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be displayed in scientific notation."
+ },
+ "maxNumberWidth" : {
+ "default": "6",
+ "labels": ["Value display/formatting"],
+ "type": "integer",
+ "description": "When displaying numbers in normal (not scientific) mode, large numbers will be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. If there are more than <code>maxNumberWidth</code> digits to the left of the decimal in a number, dygraphs will switch to scientific notation, even when not operating in scientific mode. If you'd like to see all those digits, set this to something large, like 20 or 30."
}
}
; // </JSON>
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+ <title>dygraphs number display</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>
+ <style type="text/css">
+ .thinborder {
+ border: 1px solid black;
+ border-spacing: 0px;
+ border-collapse: collapse;
+ }
+ .thinborder td,
+ .thinborder th {
+ border: 1px solid black;
+ padding: 5px;
+ }
+ </style>
+ </head>
+ <body>
+ <h2>dygraphs number display</h2>
+ <p>Dygraphs can display numbers in either scientific mode (fixed number of significant figures) or fixed-point mode (fixed number of digits after the decimal point). It is in fixed-point mode by default.</p>
+ <p>To switch to scientific mode, set the <i>sigFigs</i> option to the number of significant figures in your data.</p>
+ <p>In fixed-point mode, you can control the number of digits after the decimal using the <i>digitsAfterDecimal</i> option. For particularly large numbers, this format can get unwieldy (i.e. '100000000' for 100M is a bit lengthy). Once the numbers get to a certain length, dygraphs will switch over to scientific notation. This is controlled by the <i>maxNumberWidth</i> option.</p>
+
+ <div id='blah'></div>
+
+ <script type="text/javascript">
+ var nums = [
+ -1.234e10,
+ -1e10,
+ -1.23e4,
+ -123.456789,
+ -123,
+ -1,
+ -0.123456,
+ -0.1,
+ -0.001234567,
+ -0.001,
+ -0.0000000001,
+ 0,
+ 0.0000000001,
+ 0.001,
+ 0.001234567,
+ 0.1,
+ 0.123456,
+ 1,
+ 3,
+ 3.14,
+ 3.14159,
+ 3.14159265,
+ 3.14159265358,
+ 123,
+ 123.456789,
+ 1.23e4,
+ 1e5,
+ 1e6,
+ 1e7,
+ 1e8,
+ 1e9,
+ 1e10,
+ 1.234e10
+ ];
+
+ var scientific = [ 1, 2, 3, 4, 5, 6 ];
+ var fixed = [ [2, 6], [3, 6], [5, 6], [1, 10], [2, 10], [5, 10] ];
+
+ // 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;
+ };
+
+ var html = '<table class=thinborder>';
+ html += '<tr><th> </th><th colspan=' + scientific.length + '>Scientific (sigFigs)</th><th colspan=' + fixed.length + '>Fixed (digitsAfterDecimal, maxNumberWidth)</th></tr>\n';
+ html += '<tr><th>Number</th>';
+ for (var i = 0; i < scientific.length; i++) {
+ html += '<th>' + scientific[i] + '</th>';
+ }
+ for (var i = 0; i < fixed.length; i++) {
+ html += '<th>' + fixed[i] + '</th>';
+ }
+ html += '</tr>\n';
+
+ var attr = {};
+ var g_mock = {
+ attr_: function(x) {
+ return attr[x];
+ }
+ };
+ for (var j = 0; j < nums.length; j++) {
+ var x = nums[j];
+ html += '<tr>';
+ html += '<td>' + x + '</td>';
+ for (var i = 0; i < scientific.length; i++) {
+ attr = { sigFigs: scientific[i] };
+ html += '<td>' + Dygraph.numberFormatter(x, g_mock) + '</td>';
+ }
+ for (var i = 0; i < fixed.length; i++) {
+ attr = { sigFigs: null, digitsAfterDecimal: fixed[i][0], maxNumberWidth: fixed[i][1] };
+ html += '<td>' + Dygraph.numberFormatter(x, g_mock) + '</td>';
+ }
+ html += '</tr>\n';
+ }
+
+ html += '</table>';
+ document.getElementById('blah').innerHTML = html;
+ </script>
+</body>
+</html>