[dygraphs.git] / tests / labelsKMB.html

<html>
  <head>
    <title>labelsKMB</title>
    <!--[if IE]>
    <script type="text/javascript" src="excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../dygraph-combined.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../dygraph.js"></script>
  </head>
  <body>
    <p>labelsKMB:</p>
    <div id="labelsKMB" style="width:600px; height: 300px;"></div>

    <p>labelsKMG2:</p>
    <div id="labelsKMG2" style="width:600px; height: 300px;"></div>

    <p>labelsKMG2 with yValueFormatter:</p>
    <div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div>

    <p>The curves are exponentials. Zooming in should reveal each of the 'K',
    'M', 'B', etc. labels.</p>

    <script type="text/javascript">
      var data = [];
      for (var i = 0, n = 1; i < 43; i++, n *= 2) {
        data.push([i, n]);
      }

      var suffixes = ['', 'k', 'M', 'G', 'T'];
      function formatValue(v) {
        if (v < 1000) return v;

        var magnitude = Math.floor(String(Math.floor(v)).length / 3);
        if (magnitude > suffixes.length - 1)
          magnitude = suffixes.length - 1;
        return String(g.round_(v / Math.pow(10, magnitude * 3), 2)) +
          suffixes[magnitude];
      }

      new Dygraph(document.getElementById("labelsKMB"), data, { labelsKMB: true });
      new Dygraph(document.getElementById("labelsKMG2"), data, { labelsKMG2: true });
      var g = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data,
                          { labelsKMG2: true, yValueFormatter: formatValue });
    </script>
  </body>
</html>
Commit	Line	Data
02ecfa7a DV	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
d160cc3b	15	<p>labelsKMG2:</p>
02ecfa7a DV	16	<div id="labelsKMG2" style="width:600px; height: 300px;"></div>
02ecfa7a DV	17
d160cc3b NK	18	<p>labelsKMG2 with yValueFormatter:</p>
	19	<div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div>
	20
02ecfa7a DV	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	var data = [];
	26	for (var i = 0, n = 1; i < 43; i++, n *= 2) {
	27	data.push([i, n]);
	28	}
	29
d160cc3b NK	30	var suffixes = ['', 'k', 'M', 'G', 'T'];
	31	function formatValue(v) {
	32	if (v < 1000) return v;
	33
	34	var magnitude = Math.floor(String(Math.floor(v)).length / 3);
	35	if (magnitude > suffixes.length - 1)
	36	magnitude = suffixes.length - 1;
	37	return String(g.round_(v / Math.pow(10, magnitude * 3), 2)) +
	38	suffixes[magnitude];
	39	}
	40
02ecfa7a DV	41	new Dygraph(document.getElementById("labelsKMB"), data, { labelsKMB: true });
02ecfa7a DV	42	new Dygraph(document.getElementById("labelsKMG2"), data, { labelsKMG2: true });
d160cc3b NK	43	var g = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data,
d160cc3b NK	44	{ labelsKMG2: true, yValueFormatter: formatValue });
02ecfa7a DV	45	</script>
	46	</body>
	47	</html>