Bug 284. Check that user_attrs_ and attrs_ !== null and remove mouse event handler...
[dygraphs.git] / tests / number-display.html
CommitLineData
17d0210c
DV
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]-->
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
17d0210c
DV
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 = {};
48e614ac
DV
101 var opts = function(x) {
102 return attr[x];
17d0210c
DV
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] };
48e614ac 110 html += '<td>' + Dygraph.numberFormatter(x, opts) + '</td>';
17d0210c
DV
111 }
112 for (var i = 0; i < fixed.length; i++) {
113 attr = { sigFigs: null, digitsAfterDecimal: fixed[i][0], maxNumberWidth: fixed[i][1] };
48e614ac 114 html += '<td>' + Dygraph.numberFormatter(x, opts) + '</td>';
17d0210c
DV
115 }
116 html += '</tr>\n';
117 }
118
119 html += '</table>';
120 document.getElementById('blah').innerHTML = html;
121 </script>
122</body>
123</html>