[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]-->
    <!--
    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</h2>
    <p>The same data with both one and two y-axes. Two y-axes:</p>
    <p>Two y-axes with y as primary axis (default):</p>
    <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
    <p>Two y-axes with y2 as primary axis:</p>
    <div id="demodiv_y2_primary" style="width: 640; height: 350; border: 1px solid black"></div>
    <p>Two y-axes using different grids:</p>
    <div id="demodiv_two_grids" style="width: 640; height: 350; border: 1px solid black"></div>
    <p>A single y-axis (left):</p>
    <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
    <p>A single y-axis (right):</p>
    <div id="demodiv_one_right" 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' ],
            'Y3': {
              axis: {
              }
            },
            'Y4': {
              axis: 'Y3'  // use the same y-axis as series Y3
            },
            axes: {
              y2: {
                // set axis-related properties here
                labelsKMB: true
              }
            },
            ylabel: 'Primary y-axis',
            y2label: 'Secondary y-axis',
            yAxisLabelWidth: 60
          }
      );
      
      g2 = new Dygraph(
          document.getElementById("demodiv_y2_primary"),
          data,
          {
            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
            ylabel: 'Primary y-axis',
            y2label: 'Secondary y-axis',
            series : {
              'Y3': {
                axis: 'y2'
              },
              'Y4': {
                axis: 'y2'
              }
            },
            axes: {
              y: {
                // set axis-related properties here
                drawGrid: false,
                independentTicks: false
              },
              y2: {
                // set axis-related properties here
                labelsKMB: true,
                drawGrid: true,
                independentTicks: true
              }
            }
          }
      );
      
      g3 = new Dygraph(
          document.getElementById("demodiv_two_grids"),
          data,
          {
            labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
            ylabel: 'Primary y-axis',
            y2label: 'Secondary y-axis',
            series : {
              'Y3': {
                axis: 'y2'
              },
              'Y4': {
                axis: 'y2'
              }
            },
            axes: {
              y2: {
                // set axis-related properties here
                labelsKMB: true,
                drawGrid: true,
                independentTicks: true,
                gridLinePattern: [2,2]
              }
            }
          }
      );

      g4 = new Dygraph(
        document.getElementById("demodiv_one"),
        data,
        {
          labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
          labelsKMB: true,
          ylabel: 'Primary y-axis',
          y2label: 'Secondary y-axis',
        }
      );
      
      g5 = new Dygraph(
       document.getElementById("demodiv_one_right"),
       data,
       {
         labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
         ylabel: 'Primary y-axis',
         y2label: 'Secondary y-axis',
          series : {
            'Y1': {
               axis: 'y2'
            },
            'Y2': {
              axis: 'y2'
            },
            'Y3': {
              axis: 'y2'
            },
            'Y4': {
              axis: 'y2'
            }
          },
          axes: {
            y: {
              // set axis-related properties here
              drawGrid: false,
              independentTicks: false
            },
            y2: {
              // set axis-related properties here
              labelsKMB: true,
              drawGrid: true,
              independentTicks: true
            }
          }
        }
      );
      
      function update(el) {
        g.updateOptions( { fillGraph: el.checked } );
        g2.updateOptions( { fillGraph: el.checked } );
        g3.updateOptions( { fillGraph: el.checked } );
        g4.updateOptions( { fillGraph: el.checked } );
        g5.updateOptions( { fillGraph: el.checked } );
      }
    </script>

    <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
</body>
</html>
Commit	Line	Data
54425b14	1	<!DOCTYPE html>
f09fc545 DV	2	<html>
f09fc545 DV	3	<head>
10494b48	4	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
f09fc545 DV	5	<title>Multiple y-axes</title>
f09fc545 DV	6	<!--[if IE]>
e1fb3740	7	<script type="text/javascript" src="../excanvas.js"></script>
f09fc545	8	<![endif]-->
7e5ddc94 DV	9	<!--
	10	For production (minified) code, use:
	11	<script type="text/javascript" src="dygraph-combined.js"></script>
	12	-->
	13	<script type="text/javascript" src="../dygraph-dev.js"></script>
	14
f09fc545 DV	15	</head>
	16	<body>
	17	<h2>Multiple y-axes</h2>
aa4ddc56	18	<p>The same data with both one and two y-axes. Two y-axes:</p>
c866c1fe	19	<p>Two y-axes with y as primary axis (default):</p>
70be5ed1	20	<div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
c866c1fe DE	21	<p>Two y-axes with y2 as primary axis:</p>
	22	<div id="demodiv_y2_primary" style="width: 640; height: 350; border: 1px solid black"></div>
	23	<p>Two y-axes using different grids:</p>
	24	<div id="demodiv_two_grids" style="width: 640; height: 350; border: 1px solid black"></div>
	25	<p>A single y-axis (left):</p>
70be5ed1	26	<div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
c866c1fe DE	27	<p>A single y-axis (right):</p>
c866c1fe DE	28	<div id="demodiv_one_right" style="width: 640; height: 350; border: 1px solid black"></div>
aa4ddc56	29
f09fc545 DV	30	<script type="text/javascript">
	31	var data = [];
	32	for (var i = 1; i <= 100; i++) {
	33	var m = "01", d = i;
	34	if (d > 31) { m = "02"; d -= 31; }
	35	if (m == "02" && d > 28) { m = "03"; d -= 28; }
	36	if (m == "03" && d > 31) { m = "04"; d -= 31; }
	37	if (d < 10) d = "0" + d;
	38	// two series, one with range 1-100, one with range 1-2M
	39	data.push([new Date("2010/" + m + "/" + d),
	40	i,
	41	100 - i,
	42	1e6 * (1 + i * (100 - i) / (50 * 50)),
	43	1e6 * (2 - i * (100 - i) / (50 * 50))]);
	44	}
aa4ddc56	45
f09fc545	46	g = new Dygraph(
aa4ddc56 DV	47	document.getElementById("demodiv"),
	48	data,
	49	{
	50	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
aa4ddc56 DV	51	'Y3': {
aa4ddc56 DV	52	axis: {
f09fc545	53	}
aa4ddc56 DV	54	},
	55	'Y4': {
	56	axis: 'Y3' // use the same y-axis as series Y3
48e614ac DV	57	},
	58	axes: {
	59	y2: {
	60	// set axis-related properties here
	61	labelsKMB: true
	62	}
d0c39108 DV	63	},
	64	ylabel: 'Primary y-axis',
	65	y2label: 'Secondary y-axis',
	66	yAxisLabelWidth: 60
aa4ddc56 DV	67	}
aa4ddc56 DV	68	);
c866c1fe	69
aa4ddc56	70	g2 = new Dygraph(
c866c1fe DE	71	document.getElementById("demodiv_y2_primary"),
	72	data,
	73	{
	74	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	75	ylabel: 'Primary y-axis',
	76	y2label: 'Secondary y-axis',
	77	series : {
	78	'Y3': {
	79	axis: 'y2'
	80	},
	81	'Y4': {
	82	axis: 'y2'
	83	}
	84	},
	85	axes: {
	86	y: {
	87	// set axis-related properties here
	88	drawGrid: false,
	89	independentTicks: false
	90	},
	91	y2: {
	92	// set axis-related properties here
	93	labelsKMB: true,
	94	drawGrid: true,
	95	independentTicks: true
	96	}
	97	}
	98	}
	99	);
	100
	101	g3 = new Dygraph(
	102	document.getElementById("demodiv_two_grids"),
aa4ddc56 DV	103	data,
	104	{
	105	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
107f9d8e DV	106	ylabel: 'Primary y-axis',
107f9d8e DV	107	y2label: 'Secondary y-axis',
c866c1fe DE	108	series : {
	109	'Y3': {
	110	axis: 'y2'
	111	},
	112	'Y4': {
	113	axis: 'y2'
	114	}
	115	},
	116	axes: {
	117	y2: {
	118	// set axis-related properties here
	119	labelsKMB: true,
	120	drawGrid: true,
	121	independentTicks: true,
	122	gridLinePattern: [2,2]
	123	}
	124	}
aa4ddc56 DV	125	}
aa4ddc56 DV	126	);
44c6bc29	127
c866c1fe DE	128	g4 = new Dygraph(
	129	document.getElementById("demodiv_one"),
	130	data,
	131	{
	132	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	133	labelsKMB: true,
	134	ylabel: 'Primary y-axis',
	135	y2label: 'Secondary y-axis',
	136	}
	137	);
	138
	139	g5 = new Dygraph(
	140	document.getElementById("demodiv_one_right"),
	141	data,
	142	{
	143	labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
	144	ylabel: 'Primary y-axis',
	145	y2label: 'Secondary y-axis',
	146	series : {
	147	'Y1': {
	148	axis: 'y2'
	149	},
	150	'Y2': {
	151	axis: 'y2'
	152	},
	153	'Y3': {
	154	axis: 'y2'
	155	},
	156	'Y4': {
	157	axis: 'y2'
	158	}
	159	},
	160	axes: {
	161	y: {
	162	// set axis-related properties here
	163	drawGrid: false,
	164	independentTicks: false
	165	},
	166	y2: {
	167	// set axis-related properties here
	168	labelsKMB: true,
	169	drawGrid: true,
	170	independentTicks: true
	171	}
	172	}
	173	}
	174	);
	175
44c6bc29 DV	176	function update(el) {
	177	g.updateOptions( { fillGraph: el.checked } );
	178	g2.updateOptions( { fillGraph: el.checked } );
c866c1fe DE	179	g3.updateOptions( { fillGraph: el.checked } );
	180	g4.updateOptions( { fillGraph: el.checked } );
	181	g5.updateOptions( { fillGraph: el.checked } );
44c6bc29	182	}
f09fc545	183	</script>
44c6bc29 DV	184
44c6bc29 DV	185	<input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
f09fc545 DV	186	</body>
f09fc545 DV	187	</html>