tests/labelsKMB.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>labelsKMB</title>
   5     <!--
   6     For production (minified) code, use:
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     -->
   9     <script type="text/javascript" src="../dygraph-dev.js"></script>
  10
  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>labelsKMG2 with very small numbers:</p>
  23     <div id="labelsKMG2SmallNumbers" style="width:600px; height: 300px;"></div>
  24
  25     <p>The curves are exponentials. Zooming in should reveal each of the 'K',
  26     'M', 'B', etc. labels.</p>
  27
  28     <script type="text/javascript">
  29       function round(num, places) {
  30         var shift = Math.pow(10, places);
  31         return Math.round(num * shift)/shift;
  32       };
  33
  34       var data = [], smalldata = [];
  35       for (var i = 0, n = 1; i < 63; i++, n *= 2) {
  36         data.push([i, n]);
  37         smalldata.push([i, Math.pow(10,-n)]);
  38       }
  39
  40       var suffixes = ['', 'k', 'M', 'G', 'T'];
  41       function formatValue(v) {
  42         if (v < 1000) return v;
  43
  44         var magnitude = Math.floor(String(Math.floor(v)).length / 3);
  45         if (magnitude > suffixes.length - 1)
  46           magnitude = suffixes.length - 1;
  47         return String(round(v / Math.pow(10, magnitude * 3), 2)) +
  48           suffixes[magnitude];
  49       }
  50
  51       var g = new Dygraph(document.getElementById("labelsKMB"), data, {
  52         labelsKMB: true,
  53         labels: ['Base', 'Power']
  54       });
  55       var g2 = new Dygraph(document.getElementById("labelsKMG2"), data, {
  56         labelsKMG2: true,
  57         labels: ['Base', 'Power']
  58       });
  59       var g3 = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data, {
  60         labelsKMG2: true,
  61         yValueFormatter: formatValue,
  62         labels: ['Base', 'Power']
  63       });
  64
  65       var g4 = new Dygraph(document.getElementById("labelsKMG2SmallNumbers"), smalldata, {
  66         labelsKMG2: true,
  67         labels: ['Base', 'Power']
  68       });
  69     </script>
  70   </body>
  71 </html>