tests/labelsKMB.html

   1 <html>
   2   <head>
   3     <title>labelsKMB</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../dygraph-combined.js"></script>
   8     <script type="text/javascript" src="../dygraph-canvas.js"></script>
   9     <script type="text/javascript" src="../dygraph.js"></script>
  10   </head>
  11   <body>
  12     <p>labelsKMB:</p>
  13     <div id="labelsKMB" style="width:600px; height: 300px;"></div>
  14
  15     <p>labelsKMG2:</p>
  16     <div id="labelsKMG2" style="width:600px; height: 300px;"></div>
  17
  18     <p>labelsKMG2 with yValueFormatter:</p>
  19     <div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div>
  20
  21     <p>The curves are exponentials. Zooming in should reveal each of the 'K',
  22     'M', 'B', etc. labels.</p>
  23
  24     <script type="text/javascript">
  25       function round(num, places) {
  26         var shift = Math.pow(10, places);
  27         return Math.round(num * shift)/shift;
  28       };
  29
  30       var data = [];
  31       for (var i = 0, n = 1; i < 43; i++, n *= 2) {
  32         data.push([i, n]);
  33       }
  34
  35       var suffixes = ['', 'k', 'M', 'G', 'T'];
  36       function formatValue(v) {
  37         if (v < 1000) return v;
  38
  39         var magnitude = Math.floor(String(Math.floor(v)).length / 3);
  40         if (magnitude > suffixes.length - 1)
  41           magnitude = suffixes.length - 1;
  42         return String(round(v / Math.pow(10, magnitude * 3), 2)) +
  43           suffixes[magnitude];
  44       }
  45
  46       new Dygraph(document.getElementById("labelsKMB"), data, { labelsKMB: true });
  47       new Dygraph(document.getElementById("labelsKMG2"), data, { labelsKMG2: true });
  48       var g = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data,
  49                           { labelsKMG2: true, yValueFormatter: formatValue });
  50     </script>
  51   </body>
  52 </html>