4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>labelsKMB
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
15 <div id=
"labelsKMB" style=
"width:600px; height: 300px;"></div>
18 <div id=
"labelsKMG2" style=
"width:600px; height: 300px;"></div>
20 <p>labelsKMG2 with yValueFormatter:
</p>
21 <div id=
"labelsKMG2yValueFormatter" style=
"width:600px; height: 300px;"></div>
23 <p>labelsKMG2 with very small numbers:
</p>
24 <div id=
"labelsKMG2SmallNumbers" style=
"width:600px; height: 300px;"></div>
26 <p>The curves are exponentials. Zooming in should reveal each of the 'K',
27 'M', 'B', etc. labels.
</p>
29 <script type=
"text/javascript">
30 function round(num, places) {
31 var shift = Math.pow(
10, places);
32 return Math.round(num * shift)/shift;
35 var data = [], smalldata = [];
36 for (var i =
0, n =
1; i <
63; i++, n *=
2) {
38 smalldata.push([i, Math.pow(
10,-n)]);
41 var suffixes = ['', 'k', 'M', 'G', 'T'];
42 function formatValue(v) {
43 if (v <
1000) return v;
45 var magnitude = Math.floor(String(Math.floor(v)).length /
3);
46 if (magnitude
> suffixes.length -
1)
47 magnitude = suffixes.length -
1;
48 return String(round(v / Math.pow(
10, magnitude *
3),
2)) +
52 var g = new Dygraph(document.getElementById(
"labelsKMB"), data, {
54 labels: ['Base', 'Power']
56 var g2 = new Dygraph(document.getElementById(
"labelsKMG2"), data, {
58 labels: ['Base', 'Power']
60 var g3 = new Dygraph(document.getElementById(
"labelsKMG2yValueFormatter"), data, {
64 valueFormatter: formatValue
67 labels: ['Base', 'Power']
70 var g4 = new Dygraph(document.getElementById(
"labelsKMG2SmallNumbers"), smalldata, {
72 labels: ['Base', 'Power']