| 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="../dygraph-combined.js"></script> |
| 8 | <script type="text/javascript" src="../dygraph-canvas.js"></script> |
| 9 | <script type="text/javascript" src="../dygraph.js"></script> |
| 10 | </head> |
| 11 | <body> |
| 12 | <p>labelsKMB:</p> |
| 13 | <div id="labelsKMB" style="width:600px; height: 300px;"></div> |
| 14 | |
| 15 | <p>labelsKMG2:</p> |
| 16 | <div id="labelsKMG2" style="width:600px; height: 300px;"></div> |
| 17 | |
| 18 | <p>labelsKMG2 with yValueFormatter:</p> |
| 19 | <div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div> |
| 20 | |
| 21 | <p>The curves are exponentials. Zooming in should reveal each of the 'K', |
| 22 | 'M', 'B', etc. labels.</p> |
| 23 | |
| 24 | <script type="text/javascript"> |
| 25 | var data = []; |
| 26 | for (var i = 0, n = 1; i < 43; i++, n *= 2) { |
| 27 | data.push([i, n]); |
| 28 | } |
| 29 | |
| 30 | var suffixes = ['', 'k', 'M', 'G', 'T']; |
| 31 | function formatValue(v) { |
| 32 | if (v < 1000) return v; |
| 33 | |
| 34 | var magnitude = Math.floor(String(Math.floor(v)).length / 3); |
| 35 | if (magnitude > suffixes.length - 1) |
| 36 | magnitude = suffixes.length - 1; |
| 37 | return String(g.round_(v / Math.pow(10, magnitude * 3), 2)) + |
| 38 | suffixes[magnitude]; |
| 39 | } |
| 40 | |
| 41 | new Dygraph(document.getElementById("labelsKMB"), data, { labelsKMB: true }); |
| 42 | new Dygraph(document.getElementById("labelsKMG2"), data, { labelsKMG2: true }); |
| 43 | var g = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data, |
| 44 | { labelsKMG2: true, yValueFormatter: formatValue }); |
| 45 | </script> |
| 46 | </body> |
| 47 | </html> |