FEATURE: Added documentation of new gridLinePattern and adapted other
[dygraphs.git] / tests / two-axes.html
CommitLineData
54425b14 1<!DOCTYPE html>
f09fc545
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
f09fc545
DV
5 <title>Multiple y-axes</title>
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>
70be5ed1 19 <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
aa4ddc56 20 <p>A single y-axis:</p>
70be5ed1 21 <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
aa4ddc56 22
f09fc545
DV
23 <script type="text/javascript">
24 var data = [];
25 for (var i = 1; i <= 100; i++) {
26 var m = "01", d = i;
27 if (d > 31) { m = "02"; d -= 31; }
28 if (m == "02" && d > 28) { m = "03"; d -= 28; }
29 if (m == "03" && d > 31) { m = "04"; d -= 31; }
30 if (d < 10) d = "0" + d;
31 // two series, one with range 1-100, one with range 1-2M
32 data.push([new Date("2010/" + m + "/" + d),
33 i,
34 100 - i,
35 1e6 * (1 + i * (100 - i) / (50 * 50)),
36 1e6 * (2 - i * (100 - i) / (50 * 50))]);
37 }
aa4ddc56 38
f09fc545 39 g = new Dygraph(
aa4ddc56
DV
40 document.getElementById("demodiv"),
41 data,
42 {
43 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
aa4ddc56
DV
44 'Y3': {
45 axis: {
f09fc545 46 }
aa4ddc56
DV
47 },
48 'Y4': {
49 axis: 'Y3' // use the same y-axis as series Y3
48e614ac
DV
50 },
51 axes: {
52 y2: {
53 // set axis-related properties here
54 labelsKMB: true
55 }
d0c39108
DV
56 },
57 ylabel: 'Primary y-axis',
58 y2label: 'Secondary y-axis',
59 yAxisLabelWidth: 60
aa4ddc56
DV
60 }
61 );
62
63 g2 = new Dygraph(
64 document.getElementById("demodiv_one"),
65 data,
66 {
67 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
d0c39108 68 labelsKMB: true,
107f9d8e
DV
69 ylabel: 'Primary y-axis',
70 y2label: 'Secondary y-axis',
aa4ddc56
DV
71 }
72 );
44c6bc29
DV
73
74 function update(el) {
75 g.updateOptions( { fillGraph: el.checked } );
76 g2.updateOptions( { fillGraph: el.checked } );
77 }
f09fc545 78 </script>
44c6bc29
DV
79
80 <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
f09fc545
DV
81</body>
82</html>