[dygraphs.git] / tests / labelsKMB.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>labelsKMB</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.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>labelsKMG2 with very small numbers:</p>
    <div id="labelsKMG2SmallNumbers" 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">
      function round(num, places) {
        var shift = Math.pow(10, places);
        return Math.round(num * shift)/shift;
      };

      var data = [], smalldata = [];
      for (var i = 0, n = 1; i < 63; i++, n *= 2) {
        data.push([i, n]);
        smalldata.push([i, Math.pow(10,-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(round(v / Math.pow(10, magnitude * 3), 2)) +
          suffixes[magnitude];
      }

      var g = new Dygraph(document.getElementById("labelsKMB"), data, {
        labelsKMB: true,
        labels: ['Base', 'Power']
      });
      var g2 = new Dygraph(document.getElementById("labelsKMG2"), data, {
        labelsKMG2: true,
        labels: ['Base', 'Power']
      });
      var g3 = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data, {
        labelsKMG2: true,
        yValueFormatter: formatValue,
        labels: ['Base', 'Power']
      });

      var g4 = new Dygraph(document.getElementById("labelsKMG2SmallNumbers"), smalldata, {
        labelsKMG2: true,
        labels: ['Base', 'Power']
      });
    </script>
  </body>
</html>
Commit	Line	Data
	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>