[dygraphs.git] / tests / multi-scale.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../css/dygraph.css">
    <title>multi-scale</title>
    <script type="text/javascript" src="../dist/dygraph.js"></script>
    <style type="text/css">
    body {
      line-height: 150%;
    }
    </style>
  </head>
  <body style="max-width: 700px;">
    <p>Gridlines and axis labels make charts easier to understand. They give
    the lines a clear scale. Unless you tell it otherwise, dygraphs will choose
    a y-axis and set of gridlines which include all of your data.</p>

    <p>If you have many series with different scales, this will compress the
    variation in all but the largest one. Standard ways to deal with this
    include <a href="two-axes.html">secondary y-axes</a> and <a
    href="logscale.html">log scales</a>.</p>

    <p>If neither of these is to your liking, you can manually rescale your
    series and undo that scaling for the hover values. This demo shows how to
    do it.</p>

    <div id="demodiv"></div>

    <p>Hover over to see the original values. This is what the data looks
    like without any rescaling:</p>

    <div id="reference_div"></div>

    <script type="text/javascript">
      var zp = function(x) { if (x < 10) return "0"+x; else return x; };
      var labels = ["date","parabola","line","another line","sine wave"];
      var data = [];
      for (var i=1; i<=31; i++) {
        var row = [];
        row.push(new Date("2006/10/" + zp(i)));
        row.push(10*(i*(31-i)));
        row.push(100*(8*i));
        row.push(1000*(250 - 8*i));
        row.push(10000*(125 + 125 * Math.sin(0.3*i)));
        data.push(row);
      }

      var scales = {
        "parabola": 1,
        "line": 10,
        "another line": 100,
        "sine wave": 1000
      };
      var rescaled_data = [];
      for (var i = 0; i < data.length; i++) {
        var src = data[i];
        var row = [];
        row.push(src[0]);
        for (var j = 1; j < src.length; j++) {
          row.push(src[j] / scales[labels[j]]);
        }
        rescaled_data.push(row);
      }

      g = new Dygraph(
              document.getElementById("demodiv"),
              rescaled_data,
              {
                legend: 'always',
                labels: labels,
                width: 640,
                height: 480,
                title: 'Four series on different scales',
                xlabel: 'Date',
                ylabel: 'Count',
                axes : {
                  y : {
                    valueFormatter: function(y, opts, series_name) {
                      var unscaled = y * scales[series_name];
                      if (series_name == 'sine wave') return unscaled.toPrecision(4);
                      return unscaled;
                    }
                  }
                }
              }
          );

      g_orig = new Dygraph(
              document.getElementById("reference_div"),
              data,
              {
                legend: 'always',
                labels: labels,
                width: 640,
                height: 480,
                title: 'Four series on the same scale',
                xlabel: 'Date',
                ylabel: 'Count',
                axes: {
                  y: {
                    axisLabelWidth: 80
                  }
                }
              }
          );
    </script>
</body>
</html>
Commit	Line	Data
48e614ac DV	1	<!DOCTYPE html>
	2	<html>
	3	<head>
93a5bb4c	4	<link rel="stylesheet" href="../css/dygraph.css">
48e614ac	5	<title>multi-scale</title>
fbd6834a	6	<script type="text/javascript" src="../dist/dygraph.js"></script>
d7153238 DV	7	<style type="text/css">
	8	body {
	9	line-height: 150%;
	10	}
	11	</style>
48e614ac DV	12	</head>
	13	<body style="max-width: 700px;">
	14	<p>Gridlines and axis labels make charts easier to understand. They give
	15	the lines a clear scale. Unless you tell it otherwise, dygraphs will choose
	16	a y-axis and set of gridlines which include all of your data.</p>
	17
	18	<p>If you have many series with different scales, this will compress the
	19	variation in all but the largest one. Standard ways to deal with this
	20	include <a href="two-axes.html">secondary y-axes</a> and <a
	21	href="logscale.html">log scales</a>.</p>
	22
	23	<p>If neither of these is to your liking, you can manually rescale your
	24	series and undo that scaling for the hover values. This demo shows how to
	25	do it.</p>
	26
	27	<div id="demodiv"></div>
	28
	29	<p>Hover over to see the original values. This is what the data looks
	30	like without any rescaling:</p>
	31
	32	<div id="reference_div"></div>
	33
	34	<script type="text/javascript">
	35	var zp = function(x) { if (x < 10) return "0"+x; else return x; };
	36	var labels = ["date","parabola","line","another line","sine wave"];
	37	var data = [];
	38	for (var i=1; i<=31; i++) {
	39	var row = [];
	40	row.push(new Date("2006/10/" + zp(i)));
	41	row.push(10(i(31-i)));
	42	row.push(100(8i));
	43	row.push(1000(250 - 8i));
	44	row.push(10000(125 + 125 Math.sin(0.3*i)));
	45	data.push(row);
	46	}
	47
	48	var scales = {
	49	"parabola": 1,
	50	"line": 10,
	51	"another line": 100,
	52	"sine wave": 1000
	53	};
	54	var rescaled_data = [];
	55	for (var i = 0; i < data.length; i++) {
	56	var src = data[i];
	57	var row = [];
	58	row.push(src[0]);
	59	for (var j = 1; j < src.length; j++) {
	60	row.push(src[j] / scales[labels[j]]);
	61	}
	62	rescaled_data.push(row);
	63	}
	64
	65	g = new Dygraph(
	66	document.getElementById("demodiv"),
	67	rescaled_data,
	68	{
	69	legend: 'always',
	70	labels: labels,
	71	width: 640,
	72	height: 480,
	73	title: 'Four series on different scales',
	74	xlabel: 'Date',
	75	ylabel: 'Count',
c63e32d0 RK	76	axes : {
	77	y : {
	78	valueFormatter: function(y, opts, series_name) {
	79	var unscaled = y * scales[series_name];
	80	if (series_name == 'sine wave') return unscaled.toPrecision(4);
	81	return unscaled;
	82	}
	83	}
48e614ac DV	84	}
	85	}
	86	);
	87
	88	g_orig = new Dygraph(
	89	document.getElementById("reference_div"),
	90	data,
	91	{
	92	legend: 'always',
	93	labels: labels,
	94	width: 640,
	95	height: 480,
	96	title: 'Four series on the same scale',
	97	xlabel: 'Date',
	98	ylabel: 'Count',
2b66af4f DV	99	axes: {
	100	y: {
	101	axisLabelWidth: 80
	102	}
	103	}
48e614ac DV	104	}
	105	);
	106	</script>
	107	</body>
	108	</html>