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

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple y-axes with valueRange</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

  </head>
  <body>
    <h2>Multiple y-axes with valueRange</h2>
    <p>The same data with both different valueRanges. Two-axis old y[40, 70] valueRange:</p>
    <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
    <p>Two-axis new valueRange y[40, 80] set:</p>
    <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
    <p>Two-axis new valueRange y[40, 80] &amp; y2[1e6, 1.2e6] set:</p>
    <div id="demodiv_two" style="width: 640; height: 350; border: 1px solid black"></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' ],
            series : {
              'Y3': { axis: 'y2' },
              'Y4': { axis: 'y2' }
            },
            valueRange: [40, 70],
            axes: {
              y2: {
                // set axis-related properties here
                labelsKMB: true
              }
            },
            ylabel: 'Primary y-axis',
            y2label: 'Secondary y-axis'
          }
      );

      g2 = new Dygraph(
          document.getElementById("demodiv_one"),
          data,
          {
            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
            series : {
              'Y3': { axis: 'y2' },
              'Y4': { axis: 'y2' }
            },
            axes: {
              y: {
                valueRange: [40, 80]
              },
              y2: {
                // set axis-related properties here
                labelsKMB: true
              }
            },
            ylabel: 'Primary y-axis',
            y2label: 'Secondary y-axis',
            yAxisLabelWidth: 60
          }
      );

      g3 = new Dygraph(
          document.getElementById("demodiv_two"),
          data,
          {
            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
            series : {
              'Y3': { axis: 'y2' },
              'Y4': { axis: 'y2' }
            },
            axes: {
              y: {
                valueRange: [40, 80]
              },
              y2: {
                // set axis-related properties here
                valueRange: [1e6, 1.2e6],
                labelsKMB: true
              }
            },
            ylabel: 'Primary y-axis',
            y2label: 'Secondary y-axis',
            yAxisLabelWidth: 60
          }
      );


    </script>
</body>
</html>
Commit	Line	Data
	1	<!DOCTYPE html>
	2	<html>
	3	<head>
	4	<title>Multiple y-axes with valueRange</title>
	5	<!--
	6	For production (minified) code, use:
	7	<script type="text/javascript" src="dygraph-combined.js"></script>
	8	-->
	9	<script type="text/javascript" src="../dygraph-dev.js"></script>
	10
	11	</head>
	12	<body>
	13	<h2>Multiple y-axes with valueRange</h2>
	14	<p>The same data with both different valueRanges. Two-axis old y[40, 70] valueRange:</p>
	15	<div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
	16	<p>Two-axis new valueRange y[40, 80] set:</p>
	17	<div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
	18	<p>Two-axis new valueRange y[40, 80] & y2[1e6, 1.2e6] set:</p>
	19	<div id="demodiv_two" style="width: 640; height: 350; border: 1px solid black"></div>
	20	<script type="text/javascript">
	21	var data = [];
	22	for (var i = 1; i <= 100; i++) {
	23	var m = "01", d = i;
	24	if (d > 31) { m = "02"; d -= 31; }
	25	if (m == "02" && d > 28) { m = "03"; d -= 28; }
	26	if (m == "03" && d > 31) { m = "04"; d -= 31; }
	27	if (d < 10) d = "0" + d;
	28	// two series, one with range 1-100, one with range 1-2M
	29	data.push([new Date("2010/" + m + "/" + d),
	30	i,
	31	100 - i,
	32	1e6 * (1 + i * (100 - i) / (50 * 50)),
	33	1e6 * (2 - i * (100 - i) / (50 * 50))]);
	34	}
	35
	36	g = new Dygraph(
	37	document.getElementById("demodiv"),
	38	data,
	39	{
	40	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	41	series : {
	42	'Y3': { axis: 'y2' },
	43	'Y4': { axis: 'y2' }
	44	},
	45	valueRange: [40, 70],
	46	axes: {
	47	y2: {
	48	// set axis-related properties here
	49	labelsKMB: true
	50	}
	51	},
	52	ylabel: 'Primary y-axis',
	53	y2label: 'Secondary y-axis'
	54	}
	55	);
	56
	57	g2 = new Dygraph(
	58	document.getElementById("demodiv_one"),
	59	data,
	60	{
	61	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	62	series : {
	63	'Y3': { axis: 'y2' },
	64	'Y4': { axis: 'y2' }
	65	},
	66	axes: {
	67	y: {
	68	valueRange: [40, 80]
	69	},
	70	y2: {
	71	// set axis-related properties here
	72	labelsKMB: true
	73	}
	74	},
	75	ylabel: 'Primary y-axis',
	76	y2label: 'Secondary y-axis',
	77	yAxisLabelWidth: 60
	78	}
	79	);
	80
	81	g3 = new Dygraph(
	82	document.getElementById("demodiv_two"),
	83	data,
	84	{
	85	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	86	series : {
	87	'Y3': { axis: 'y2' },
	88	'Y4': { axis: 'y2' }
	89	},
	90	axes: {
	91	y: {
	92	valueRange: [40, 80]
	93	},
	94	y2: {
	95	// set axis-related properties here
	96	valueRange: [1e6, 1.2e6],
	97	labelsKMB: true
	98	}
	99	},
	100	ylabel: 'Primary y-axis',
	101	y2label: 'Secondary y-axis',
	102	yAxisLabelWidth: 60
	103	}
	104	);
	105
	106
	107	</script>
	108	</body>
	109	</html>