tests/labelsKMB.html

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