tests/labelsKMB.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>labelsKMB</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8   </head>
   9   <body>
  10     <p>labelsKMB:</p>
  11     <div id="labelsKMB" style="width:600px; height: 300px;"></div>
  12
  13     <p>labelsKMG2:</p>
  14     <div id="labelsKMG2" style="width:600px; height: 300px;"></div>
  15
  16     <p>labelsKMG2 with yValueFormatter:</p>
  17     <div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div>
  18
  19     <p>labelsKMG2 with very small numbers:</p>
  20     <div id="labelsKMG2SmallNumbers" 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 = [], smalldata = [];
  32       for (var i = 0, n = 1; i < 63; i++, n *= 2) {
  33         data.push([i, n]);
  34         smalldata.push([i, Math.pow(10,-n)]);
  35       }
  36
  37       var suffixes = ['', 'k', 'M', 'G', 'T'];
  38       function formatValue(v) {
  39         if (v < 1000) return v;
  40
  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)) +
  45           suffixes[magnitude];
  46       }
  47
  48       var g = new Dygraph(document.getElementById("labelsKMB"), data, {
  49         labelsKMB: true,
  50         labels: ['Base', 'Power']
  51       });
  52       var g2 = new Dygraph(document.getElementById("labelsKMG2"), data, {
  53         labelsKMG2: true,
  54         labels: ['Base', 'Power']
  55       });
  56       var g3 = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data, {
  57         labelsKMG2: true,
  58         axes: {
  59           y: {
  60             valueFormatter: formatValue
  61           }
  62         },
  63         labels: ['Base', 'Power']
  64       });
  65
  66       var g4 = new Dygraph(document.getElementById("labelsKMG2SmallNumbers"), smalldata, {
  67         labelsKMG2: true,
  68         labels: ['Base', 'Power']
  69       });
  70     </script>
  71   </body>
  72 </html>