Commit | Line | Data |
---|---|---|
54425b14 | 1 | <!DOCTYPE html> |
02ecfa7a DV |
2 | <html> |
3 | <head> | |
fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
02ecfa7a | 5 | <title>labelsKMB</title> |
fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
7e5ddc94 | 7 | |
02ecfa7a DV |
8 | </head> |
9 | <body> | |
10 | <p>labelsKMB:</p> | |
11 | <div id="labelsKMB" style="width:600px; height: 300px;"></div> | |
12 | ||
d160cc3b | 13 | <p>labelsKMG2:</p> |
02ecfa7a DV |
14 | <div id="labelsKMG2" style="width:600px; height: 300px;"></div> |
15 | ||
d160cc3b NK |
16 | <p>labelsKMG2 with yValueFormatter:</p> |
17 | <div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div> | |
18 | ||
e11c15fd DM |
19 | <p>labelsKMG2 with very small numbers:</p> |
20 | <div id="labelsKMG2SmallNumbers" style="width:600px; height: 300px;"></div> | |
21 | ||
02ecfa7a DV |
22 | <p>The curves are exponentials. Zooming in should reveal each of the 'K', |
23 | 'M', 'B', etc. labels.</p> | |
24 | ||
25 | <script type="text/javascript"> | |
029da4b6 DV |
26 | function round(num, places) { |
27 | var shift = Math.pow(10, places); | |
28 | return Math.round(num * shift)/shift; | |
29 | }; | |
30 | ||
e11c15fd | 31 | var data = [], smalldata = []; |
c4a1115d | 32 | for (var i = 0, n = 1; i < 63; i++, n *= 2) { |
02ecfa7a | 33 | data.push([i, n]); |
e11c15fd | 34 | smalldata.push([i, Math.pow(10,-n)]); |
02ecfa7a DV |
35 | } |
36 | ||
d160cc3b NK |
37 | var suffixes = ['', 'k', 'M', 'G', 'T']; |
38 | function formatValue(v) { | |
39 | if (v < 1000) return v; | |
40 | ||
41 | var magnitude = Math.floor(String(Math.floor(v)).length / 3); | |
42 | if (magnitude > suffixes.length - 1) | |
43 | magnitude = suffixes.length - 1; | |
029da4b6 | 44 | return String(round(v / Math.pow(10, magnitude * 3), 2)) + |
d160cc3b NK |
45 | suffixes[magnitude]; |
46 | } | |
47 | ||
300c5ff0 DV |
48 | var g = new Dygraph(document.getElementById("labelsKMB"), data, { |
49 | labelsKMB: true, | |
50 | labels: ['Base', 'Power'] | |
51 | }); | |
52 | var g2 = new Dygraph(document.getElementById("labelsKMG2"), data, { | |
53 | labelsKMG2: true, | |
54 | labels: ['Base', 'Power'] | |
55 | }); | |
56 | var g3 = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data, { | |
57 | labelsKMG2: true, | |
2b66af4f DV |
58 | axes: { |
59 | y: { | |
60 | valueFormatter: formatValue | |
61 | } | |
62 | }, | |
300c5ff0 DV |
63 | labels: ['Base', 'Power'] |
64 | }); | |
e11c15fd DM |
65 | |
66 | var g4 = new Dygraph(document.getElementById("labelsKMG2SmallNumbers"), smalldata, { | |
67 | labelsKMG2: true, | |
68 | labels: ['Base', 'Power'] | |
69 | }); | |
02ecfa7a DV |
70 | </script> |
71 | </body> | |
72 | </html> |