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