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