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

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