tests/number-format.html

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