[dygraphs.git] / tests / labelsKMB.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>labelsKMB</title>
    <script type="text/javascript" src="../dist/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>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,
        axes: {
          y: {
            valueFormatter: formatValue
          }
        },
        labels: ['Base', 'Power']
      });

      var g4 = new Dygraph(document.getElementById("labelsKMG2SmallNumbers"), smalldata, {
        labelsKMG2: true,
        labels: ['Base', 'Power']
      });
    </script>
  </body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
02ecfa7a DV	2	<html>
02ecfa7a DV	3	<head>
fd6b8dad	4	<link rel="stylesheet" href="../dist/dygraph.css">
02ecfa7a	5	<title>labelsKMB</title>
fbd6834a	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94	7
02ecfa7a DV	8	</head>
	9	<body>
	10	<p>labelsKMB:</p>
	11	<div id="labelsKMB" style="width:600px; height: 300px;"></div>
	12
d160cc3b	13	<p>labelsKMG2:</p>
02ecfa7a DV	14	<div id="labelsKMG2" style="width:600px; height: 300px;"></div>
02ecfa7a DV	15
d160cc3b NK	16	<p>labelsKMG2 with yValueFormatter:</p>
	17	<div id="labelsKMG2yValueFormatter" style="width:600px; height: 300px;"></div>
	18
e11c15fd DM	19	<p>labelsKMG2 with very small numbers:</p>
	20	<div id="labelsKMG2SmallNumbers" style="width:600px; height: 300px;"></div>
	21
02ecfa7a DV	22	<p>The curves are exponentials. Zooming in should reveal each of the 'K',
	23	'M', 'B', etc. labels.</p>
	24
	25	<script type="text/javascript">
029da4b6 DV	26	function round(num, places) {
	27	var shift = Math.pow(10, places);
	28	return Math.round(num * shift)/shift;
	29	};
	30
e11c15fd	31	var data = [], smalldata = [];
c4a1115d	32	for (var i = 0, n = 1; i < 63; i++, n *= 2) {
02ecfa7a	33	data.push([i, n]);
e11c15fd	34	smalldata.push([i, Math.pow(10,-n)]);
02ecfa7a DV	35	}
02ecfa7a DV	36
d160cc3b NK	37	var suffixes = ['', 'k', 'M', 'G', 'T'];
	38	function formatValue(v) {
	39	if (v < 1000) return v;
	40
	41	var magnitude = Math.floor(String(Math.floor(v)).length / 3);
	42	if (magnitude > suffixes.length - 1)
	43	magnitude = suffixes.length - 1;
029da4b6	44	return String(round(v / Math.pow(10, magnitude * 3), 2)) +
d160cc3b NK	45	suffixes[magnitude];
	46	}
	47
300c5ff0 DV	48	var g = new Dygraph(document.getElementById("labelsKMB"), data, {
	49	labelsKMB: true,
	50	labels: ['Base', 'Power']
	51	});
	52	var g2 = new Dygraph(document.getElementById("labelsKMG2"), data, {
	53	labelsKMG2: true,
	54	labels: ['Base', 'Power']
	55	});
	56	var g3 = new Dygraph(document.getElementById("labelsKMG2yValueFormatter"), data, {
	57	labelsKMG2: true,
2b66af4f DV	58	axes: {
	59	y: {
	60	valueFormatter: formatValue
	61	}
	62	},
300c5ff0 DV	63	labels: ['Base', 'Power']
300c5ff0 DV	64	});
e11c15fd DM	65
	66	var g4 = new Dygraph(document.getElementById("labelsKMG2SmallNumbers"), smalldata, {
	67	labelsKMG2: true,
	68	labels: ['Base', 'Power']
	69	});
02ecfa7a DV	70	</script>
	71	</body>
	72	</html>