tests/number-format.html

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