docs and test

diff --git a/dygraph.js b/dygraph.js
index 349f62c..ae1faba 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -2364,7 +2364,7 @@ Dygraph.numericTicks = function(minV, maxV, self, axis_props, vals) {
       var n = k*k*k*k;
       for (var j = 3; j >= 0; j--, n /= k) {
         if (absTickV >= n) {
       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;
         }
       }
           break;
         }
       }


@@ -3033,6 +3033,7 @@ Dygraph.prototype.detectTypeFromString_ = function(str) {
     this.attrs_.xTicker = Dygraph.dateTicker;
     this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
   } else {
     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;
     this.attrs_.xValueFormatter = function(x) { return x; };
     this.attrs_.xValueParser = function(x) { return parseFloat(x); };
     this.attrs_.xTicker = Dygraph.numericTicks;


@@ -4215,6 +4216,24 @@ Dygraph.OPTIONS_REFERENCE =  // <JSON>
     "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."
     "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>
   }
 }
 ;  // </JSON>

diff --git a/tests/number-display.html b/tests/number-display.html
new file mode 100644 (file)
index 0000000..6e81adb
--- /dev/null
+++ b/tests/number-display.html
@@ -0,0 +1,123 @@
+<!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>&nbsp;</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>