Merge
[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>
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>
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' ],
27fd63fc
DV
51 series: {
52 'Y3': {
53 axis: 'y2'
54 },
55 'Y4': {
56 axis: 'y2'
57 },
48e614ac
DV
58 },
59 axes: {
60 y2: {
61 // set axis-related properties here
62 labelsKMB: true
63 }
d0c39108
DV
64 },
65 ylabel: 'Primary y-axis',
66 y2label: 'Secondary y-axis',
67 yAxisLabelWidth: 60
aa4ddc56
DV
68 }
69 );
c866c1fe 70
aa4ddc56 71 g2 = new Dygraph(
c866c1fe
DE
72 document.getElementById("demodiv_y2_primary"),
73 data,
74 {
75 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
76 ylabel: 'Primary y-axis',
77 y2label: 'Secondary y-axis',
78 series : {
79 'Y3': {
80 axis: 'y2'
81 },
82 'Y4': {
83 axis: 'y2'
84 }
85 },
86 axes: {
87 y: {
88 // set axis-related properties here
89 drawGrid: false,
90 independentTicks: false
91 },
92 y2: {
93 // set axis-related properties here
94 labelsKMB: true,
95 drawGrid: true,
96 independentTicks: true
97 }
98 }
99 }
100 );
101
102 g3 = new Dygraph(
103 document.getElementById("demodiv_two_grids"),
aa4ddc56
DV
104 data,
105 {
106 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
107f9d8e
DV
107 ylabel: 'Primary y-axis',
108 y2label: 'Secondary y-axis',
c866c1fe
DE
109 series : {
110 'Y3': {
111 axis: 'y2'
112 },
113 'Y4': {
114 axis: 'y2'
115 }
116 },
117 axes: {
118 y2: {
119 // set axis-related properties here
120 labelsKMB: true,
121 drawGrid: true,
122 independentTicks: true,
123 gridLinePattern: [2,2]
124 }
125 }
aa4ddc56
DV
126 }
127 );
44c6bc29 128
c866c1fe
DE
129 g4 = new Dygraph(
130 document.getElementById("demodiv_one"),
131 data,
132 {
133 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
134 labelsKMB: true,
135 ylabel: 'Primary y-axis',
136 y2label: 'Secondary y-axis',
137 }
138 );
139
140 g5 = new Dygraph(
141 document.getElementById("demodiv_one_right"),
142 data,
143 {
144 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
145 ylabel: 'Primary y-axis',
146 y2label: 'Secondary y-axis',
147 series : {
148 'Y1': {
149 axis: 'y2'
150 },
151 'Y2': {
152 axis: 'y2'
153 },
154 'Y3': {
155 axis: 'y2'
156 },
157 'Y4': {
158 axis: 'y2'
159 }
160 },
161 axes: {
162 y: {
163 // set axis-related properties here
164 drawGrid: false,
165 independentTicks: false
166 },
167 y2: {
168 // set axis-related properties here
169 labelsKMB: true,
170 drawGrid: true,
171 independentTicks: true
172 }
173 }
174 }
175 );
176
44c6bc29
DV
177 function update(el) {
178 g.updateOptions( { fillGraph: el.checked } );
179 g2.updateOptions( { fillGraph: el.checked } );
c866c1fe
DE
180 g3.updateOptions( { fillGraph: el.checked } );
181 g4.updateOptions( { fillGraph: el.checked } );
182 g5.updateOptions( { fillGraph: el.checked } );
44c6bc29 183 }
f09fc545 184 </script>
44c6bc29
DV
185
186 <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
f09fc545
DV
187</body>
188</html>