projects / dygraphs.git / blame
| 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> |