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

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