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