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