tests/number-format.html

   1 <html>
   2   <head>
   3     <title>Test of number formatting</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="../excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10     <script type="text/javascript" src="../dygraph.js"></script>
  11   </head>
  12   <body>
  13     <p>The default formatting mimicks printf with %.<i>p</i>g where <i>p</i> is
  14        the precision to use.  It turns out that JavaScript's toPrecision()
  15        method is almost but not exactly equal to %g; they differ for values
  16        with small absolute values (10^-1 to 10^-5 or so), with toPrecision()
  17        yielding strings that are longer than they should be (i.e. using fixed
  18        point where %g would use exponential).</p>
  19
  20     <p>This test is intended to check that our formatting works properly for a
  21        variety of precisions.</p>
  22
  23     <p>Precision to use (1 to 21):
  24       <input type="text" id="p_input" size="20" onchange="updateTable();"></p>
  25     <br>
  26     <br>
  27     <div id="content" style="font-family:'Courier New',monospace"></div>
  28
  29     <script type="text/javascript">
  30       // Helper functions for generating an HTML table for holding the test
  31       // results.
  32       createRow = function(columnType, columns) {
  33         var row = document.createElement('tr');
  34         for (var i = 0; i  < columns.length; i ++) {
  35           var th = document.createElement(columnType);
  36           var text = document.createTextNode(columns[i]);
  37           th.appendChild(text);
  38           row.appendChild(th);
  39         };
  40         return row;
  41       };
  42
  43       createHeaderRow = function(columns) {
  44         return createRow('th', columns);
  45       };
  46
  47       createDataRow = function(columns) {
  48         return createRow('td', columns);
  49       };
  50
  51       createTable = function(headerColumns, dataColumnsList) {
  52         var table = document.createElement('table');
  53         table.appendChild(createHeaderRow(headerColumns));
  54         for (var i = 0; i < dataColumnsList.length; i++) {
  55           table.appendChild(createDataRow(dataColumnsList[i]));
  56         }
  57         return table;
  58       };
  59
  60       updateTable = function() {
  61         var headers = ['Dygraph.floatFormat()', 'toPrecision()',
  62                        'Dygraph.floatFormat()', 'toPrecision()'];
  63         var numbers = [];
  64         var p = parseInt(document.getElementById('p_input').value);
  65
  66         for (var i = -10; i <= 10; i++) {
  67           var n = Math.pow(10, i);
  68           numbers.push([Dygraph.floatFormat(n, p),
  69                         n.toPrecision(p),
  70                         Dygraph.floatFormat(Math.PI * n, p),
  71                         (Math.PI * n).toPrecision(p)]);
  72         }
  73
  74         // Check exact values of 0.
  75         numbers.push([Dygraph.floatFormat(0.0, p),
  76                       0.0.toPrecision(p)]);
  77
  78         var elem = document.getElementById('content');
  79         elem.innerHTML = '';
  80         elem.appendChild(createTable(headers, numbers));
  81       };
  82
  83       document.getElementById('p_input').value = '4';
  84       updateTable();
  85     </script>
  86   </body>
  87 </html>