REFACTORING: moved option retrieving out of the for loop for better
[dygraphs.git] / tests / number-format.html
CommitLineData
54425b14 1<!DOCTYPE html>
15b00ba8
JB
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
15b00ba8
JB
5 <title>Test of number formatting</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
7e5ddc94
DV
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
15b00ba8
JB
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() {
7201b11e
JB
65 var headers = ['Dygraph.floatFormat()', 'toPrecision()',
66 'Dygraph.floatFormat()', 'toPrecision()'];
15b00ba8
JB
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);
7201b11e 72 numbers.push([Dygraph.floatFormat(n, p),
15b00ba8 73 n.toPrecision(p),
7201b11e 74 Dygraph.floatFormat(Math.PI * n, p),
15b00ba8
JB
75 (Math.PI * n).toPrecision(p)]);
76 }
77
78 // Check exact values of 0.
7201b11e 79 numbers.push([Dygraph.floatFormat(0.0, p),
15b00ba8
JB
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>