[dygraphs.git] / tests / two-axes.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>Multiple y-axes</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../strftime/strftime-min.js"></script>
    <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
    <script type="text/javascript" src="../dygraph-canvas.js"></script>
    <script type="text/javascript" src="../dygraph.js"></script>
  </head>
  <body>
    <h2>Multiple y-axes</h2>
    <p>The same data with both one and two y-axes. Two y-axes:</p>
    <div id="demodiv"></div>
    <p>A single y-axis:</p>
    <div id="demodiv_one"></div>

    <script type="text/javascript">
      var data = [];
      for (var i = 1; i <= 100; i++) {
        var m = "01", d = i;
        if (d > 31) { m = "02"; d -= 31; }
        if (m == "02" && d > 28) { m = "03"; d -= 28; }
        if (m == "03" && d > 31) { m = "04"; d -= 31; }
        if (d < 10) d = "0" + d;
        // two series, one with range 1-100, one with range 1-2M
        data.push([new Date("2010/" + m + "/" + d),
                   i,
                   100 - i,
                   1e6 * (1 + i * (100 - i) / (50 * 50)),
                   1e6 * (2 - i * (100 - i) / (50 * 50))]);
      }

      g = new Dygraph(
          document.getElementById("demodiv"),
          data,
          {
            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
            width: 640,
            height: 350,
            'Y3': {
              axis: {
                // set axis-related properties here
                labelsKMB: true
              }
            },
            'Y4': {
              axis: 'Y3'  // use the same y-axis as series Y3
            }
          }
      );

      g2 = new Dygraph(
          document.getElementById("demodiv_one"),
          data,
          {
            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
            width: 640,
            height: 350,
            labelsKMB: true
          }
      );

      function update(el) {
        g.updateOptions( { fillGraph: el.checked } );
        g2.updateOptions( { fillGraph: el.checked } );
      }
    </script>

    <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
</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>Multiple y-axes</title>
	6	<!--[if IE]>
	7	<script type="text/javascript" src="../excanvas.js"></script>
	8	<![endif]-->
	9	<script type="text/javascript" src="../strftime/strftime-min.js"></script>
	10	<script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
	11	<script type="text/javascript" src="../dygraph-canvas.js"></script>
	12	<script type="text/javascript" src="../dygraph.js"></script>
	13	</head>
	14	<body>
	15	<h2>Multiple y-axes</h2>
	16	<p>The same data with both one and two y-axes. Two y-axes:</p>
	17	<div id="demodiv"></div>
	18	<p>A single y-axis:</p>
	19	<div id="demodiv_one"></div>
	20
	21	<script type="text/javascript">
	22	var data = [];
	23	for (var i = 1; i <= 100; i++) {
	24	var m = "01", d = i;
	25	if (d > 31) { m = "02"; d -= 31; }
	26	if (m == "02" && d > 28) { m = "03"; d -= 28; }
	27	if (m == "03" && d > 31) { m = "04"; d -= 31; }
	28	if (d < 10) d = "0" + d;
	29	// two series, one with range 1-100, one with range 1-2M
	30	data.push([new Date("2010/" + m + "/" + d),
	31	i,
	32	100 - i,
	33	1e6 * (1 + i * (100 - i) / (50 * 50)),
	34	1e6 * (2 - i * (100 - i) / (50 * 50))]);
	35	}
	36
	37	g = new Dygraph(
	38	document.getElementById("demodiv"),
	39	data,
	40	{
	41	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	42	width: 640,
	43	height: 350,
	44	'Y3': {
	45	axis: {
	46	// set axis-related properties here
	47	labelsKMB: true
	48	}
	49	},
	50	'Y4': {
	51	axis: 'Y3' // use the same y-axis as series Y3
	52	}
	53	}
	54	);
	55
	56	g2 = new Dygraph(
	57	document.getElementById("demodiv_one"),
	58	data,
	59	{
	60	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	61	width: 640,
	62	height: 350,
	63	labelsKMB: true
	64	}
	65	);
	66
	67	function update(el) {
	68	g.updateOptions( { fillGraph: el.checked } );
	69	g2.updateOptions( { fillGraph: el.checked } );
	70	}
	71	</script>
	72
	73	<input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
	74	</body>
	75	</html>