4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>labelsKMB
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
11 <div id=
"labelsKMB" style=
"width:600px; height: 300px;"></div>
14 <div id=
"labelsKMG2" style=
"width:600px; height: 300px;"></div>
16 <p>labelsKMG2 with yValueFormatter:
</p>
17 <div id=
"labelsKMG2yValueFormatter" style=
"width:600px; height: 300px;"></div>
19 <p>labelsKMG2 with very small numbers:
</p>
20 <div id=
"labelsKMG2SmallNumbers" style=
"width:600px; height: 300px;"></div>
22 <p>The curves are exponentials. Zooming in should reveal each of the 'K',
23 'M', 'B', etc. labels.
</p>
25 <script type=
"text/javascript">
26 function round(num, places) {
27 var shift = Math.pow(
10, places);
28 return Math.round(num * shift)/shift;
31 var data = [], smalldata = [];
32 for (var i =
0, n =
1; i <
63; i++, n *=
2) {
34 smalldata.push([i, Math.pow(
10,-n)]);
37 var suffixes = ['', 'k', 'M', 'G', 'T'];
38 function formatValue(v) {
39 if (v <
1000) return v;
41 var magnitude = Math.floor(String(Math.floor(v)).length /
3);
42 if (magnitude
> suffixes.length -
1)
43 magnitude = suffixes.length -
1;
44 return String(round(v / Math.pow(
10, magnitude *
3),
2)) +
48 var g = new Dygraph(document.getElementById(
"labelsKMB"), data, {
50 labels: ['Base', 'Power']
52 var g2 = new Dygraph(document.getElementById(
"labelsKMG2"), data, {
54 labels: ['Base', 'Power']
56 var g3 = new Dygraph(document.getElementById(
"labelsKMG2yValueFormatter"), data, {
60 valueFormatter: formatValue
63 labels: ['Base', 'Power']
66 var g4 = new Dygraph(document.getElementById(
"labelsKMG2SmallNumbers"), smalldata, {
68 labels: ['Base', 'Power']