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