tests/significant-figures.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>significant figures</title>
   5     <!--[if IE]>
   6     <script type="text/javascript" src="../excanvas.js"></script>
   7     <![endif]-->
   8     <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   9     <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
  10     <script type="text/javascript" src="../dygraph-canvas.js"></script>
  11     <script type="text/javascript" src="../dygraph.js"></script>
  12   </head>
  13   <body>
  14     <p>Tests for various inputs to Dygraph.significantFigures().  All tests
  15        should have result PASS.</p>
  16     <div id="tests"></div>
  17
  18     <script type="text/javascript">
  19       // Helper functions for generating an HTML table for holding the test
  20       // results.
  21       createRow = function(columnType, columns) {
  22         var row = document.createElement('tr');
  23         for (var i = 0; i  < columns.length; i ++) {
  24           var th = document.createElement(columnType);
  25           var text = document.createTextNode(columns[i]);
  26           th.appendChild(text);
  27           row.appendChild(th);
  28         };
  29         return row;
  30       };
  31
  32       createHeaderRow = function(columns) {
  33         return createRow('th', columns);
  34       };
  35
  36       createDataRow = function(columns) {
  37         return createRow('td', columns);
  38       };
  39
  40       createTable = function(headerColumns, dataColumnsList) {
  41         var table = document.createElement('table');
  42         table.appendChild(createHeaderRow(headerColumns));
  43         for (var i = 0; i < dataColumnsList.length; i++) {
  44           table.appendChild(createDataRow(dataColumnsList[i]));
  45         }
  46         table.setAttribute('border', '1');
  47         return table;
  48       };
  49
  50       // input gives input floating point in string form
  51       // expected gives number of significant figures
  52       var testData = [
  53           {input: '1.0', expected: 1},
  54           {input: '1.0000', expected: 1},
  55           {input: '3.14159', expected: 6},
  56           {input: '3.05', expected: 3},
  57           {input: '3.0000001', expected: 8},
  58           {input: '1.999999999999', expected: 13}  // = 13 digits.
  59       ];
  60
  61       var headers = ['Input', 'Output', 'Expected', 'Test Result'];
  62       var data = [];
  63
  64       for (var i = 0; i < testData.length; i++) {
  65         var test = testData[i];
  66         var output = Dygraph.significantFigures(parseFloat(test.input));
  67         data[i] = [test.input, output, test.expected,
  68                    (output == test.expected ? 'PASS' : 'FAIL')];
  69       }
  70
  71       var root = document.getElementById('tests');
  72       root.appendChild(createTable(headers, data));
  73     </script>
  74
  75     <br>
  76     <br>
  77
  78     <p>Check for correct number of significant figures with very small
  79        y values.  Both plots have the same input x,y values.</p>
  80
  81     <div id="smallvals1" style="width:600px; height:300px;"></div>
  82     <br>
  83     <br>
  84     <div id="smallvals2" style="width:600px; height:300px;"></div>
  85
  86     <script type="text/javascript">
  87       var data = [
  88           [2.036e-7, 1.02e-7],
  89           [2.125e-7, 1.1e-7],
  90           [2.212e-7, 1.2e-7],
  91           [2.333e-7, 1.522e-7]
  92       ];
  93
  94       new Dygraph(document.getElementById("smallvals1"), data,
  95           {
  96             labels: ["Date","CustomFormatting"],
  97             xValueFormatter: function(x) { return x.toPrecision(4); },
  98             yValueFormatter: function(x) { return x.toPrecision(3); }
  99           });
 100
 101       new Dygraph(document.getElementById("smallvals2"), data,
 102           {
 103             labels: ["Date","DefaultFormat"]
 104           });
 105     </script>
 106   </body>
 107 </html>