tests/number-display.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
   5     <title>dygraphs number display</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     <style type="text/css">
  16       .thinborder {
  17         border: 1px solid black;
  18         border-spacing: 0px;
  19         border-collapse: collapse;
  20       }
  21       .thinborder td,
  22       .thinborder th {
  23         border: 1px solid black;
  24         padding: 5px;
  25       }
  26     </style>
  27   </head>
  28   <body>
  29     <h2>dygraphs number display</h2>
  30     <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>
  31     <p>To switch to scientific mode, set the <i>sigFigs</i> option to the number of significant figures in your data.</p>
  32     <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>
  33
  34     <div id='blah'></div>
  35
  36     <script type="text/javascript">
  37       var nums = [
  38         -1.234e10,
  39         -1e10,
  40         -1.23e4,
  41         -123.456789,
  42         -123,
  43         -1,
  44         -0.123456,
  45         -0.1,
  46         -0.001234567,
  47         -0.001,
  48         -0.0000000001,
  49         0,
  50         0.0000000001,
  51         0.001,
  52         0.001234567,
  53         0.1,
  54         0.123456,
  55         1,
  56         3,
  57         3.14,
  58         3.14159,
  59         3.14159265,
  60         3.14159265358,
  61         123,
  62         123.456789,
  63         1.23e4,
  64         1e5,
  65         1e6,
  66         1e7,
  67         1e8,
  68         1e9,
  69         1e10,
  70         1.234e10
  71       ];
  72
  73     var scientific = [ 1, 2, 3, 4, 5, 6 ];
  74     var fixed = [ [2, 6], [3, 6], [5, 6], [1, 10], [2, 10], [5, 10] ];
  75
  76     // Helper functions for generating an HTML table for holding the test
  77     // results.
  78     createRow = function(columnType, columns) {
  79       var row = document.createElement('tr');
  80       for (var i = 0; i  < columns.length; i ++) {
  81         var th = document.createElement(columnType);
  82         var text = document.createTextNode(columns[i]);
  83         th.appendChild(text);
  84         row.appendChild(th);
  85       };
  86       return row;
  87     };
  88
  89     var html = '<table class=thinborder>';
  90     html += '<tr><th>&nbsp;</th><th colspan=' + scientific.length + '>Scientific (sigFigs)</th><th colspan=' + fixed.length + '>Fixed (digitsAfterDecimal, maxNumberWidth)</th></tr>\n';
  91     html += '<tr><th>Number</th>';
  92     for (var i = 0; i < scientific.length; i++) {
  93       html += '<th>' + scientific[i] + '</th>';
  94     }
  95     for (var i = 0; i < fixed.length; i++) {
  96       html += '<th>' + fixed[i] + '</th>';
  97     }
  98     html += '</tr>\n';
  99
 100     var attr = {};
 101     var opts = function(x) {
 102       return attr[x];
 103     };
 104     for (var j = 0; j < nums.length; j++) {
 105       var x = nums[j];
 106       html += '<tr>';
 107       html += '<td>' + x + '</td>';
 108       for (var i = 0; i < scientific.length; i++) {
 109         attr = { sigFigs: scientific[i] };
 110         html += '<td>' + Dygraph.numberFormatter(x, opts) + '</td>';
 111       }
 112       for (var i = 0; i < fixed.length; i++) {
 113         attr = { sigFigs: null, digitsAfterDecimal: fixed[i][0], maxNumberWidth: fixed[i][1] };
 114         html += '<td>' + Dygraph.numberFormatter(x, opts) + '</td>';
 115       }
 116       html += '</tr>\n';
 117     }
 118
 119     html += '</table>';
 120     document.getElementById('blah').innerHTML = html;
 121     </script>
 122 </body>
 123 </html>