| 1 | <html> |
| 2 | <head> |
| 3 | <title>labelsKMB</title> |
| 4 | <!--[if IE]> |
| 5 | <script type="text/javascript" src="../excanvas.js"></script> |
| 6 | <![endif]--> |
| 7 | <script type="text/javascript" src="../strftime/strftime-min.js"></script> |
| 8 | <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> |
| 9 | <script type="text/javascript" src="../dygraph-canvas.js"></script> |
| 10 | <script type="text/javascript" src="../dygraph.js"></script> |
| 11 | </head> |
| 12 | <body> |
| 13 | <p>labelsKMB:</p> |
| 14 | <div id="labelsKMB" style="width:600px; height: 300px;"></div> |
| 15 | |
| 16 | <p>labelsKMG2:</p> |
| 17 | <div id="labelsKMG2" style="width:600px; height: 300px;"></div> |
| 18 | |
| 19 | <p>labelsKMG2 with yValueFormatter:</p> |
| 20 | <div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div> |
| 21 | |
| 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"> |
| 26 | function round(num, places) { |
| 27 | var shift = Math.pow(10, places); |
| 28 | return Math.round(num * shift)/shift; |
| 29 | }; |
| 30 | |
| 31 | var data = []; |
| 32 | for (var i = 0, n = 1; i < 43; i++, n *= 2) { |
| 33 | data.push([i, n]); |
| 34 | } |
| 35 | |
| 36 | var suffixes = ['', 'k', 'M', 'G', 'T']; |
| 37 | function formatValue(v) { |
| 38 | if (v < 1000) return v; |
| 39 | |
| 40 | var magnitude = Math.floor(String(Math.floor(v)).length / 3); |
| 41 | if (magnitude > suffixes.length - 1) |
| 42 | magnitude = suffixes.length - 1; |
| 43 | return String(round(v / Math.pow(10, magnitude * 3), 2)) + |
| 44 | suffixes[magnitude]; |
| 45 | } |
| 46 | |
| 47 | new Dygraph(document.getElementById("labelsKMB"), data, { labelsKMB: true }); |
| 48 | new Dygraph(document.getElementById("labelsKMG2"), data, { labelsKMG2: true }); |
| 49 | var g = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data, |
| 50 | { labelsKMG2: true, yValueFormatter: formatValue }); |
| 51 | </script> |
| 52 | </body> |
| 53 | </html> |