4 <title>Multiple y-axes
</title>
6 For production (minified) code, use:
7 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
9 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
13 <h2>Multiple y-axes
</h2>
14 <p>The same data with both one and two y-axes. Two y-axes:
</p>
15 <p>Two y-axes with y as primary axis (default):
</p>
16 <div id=
"demodiv" style=
"width: 640; height: 350; border: 1px solid black"></div>
17 <p>Two y-axes with y2 as primary axis:
</p>
18 <div id=
"demodiv_y2_primary" style=
"width: 640; height: 350; border: 1px solid black"></div>
19 <p>Two y-axes using different grids:
</p>
20 <div id=
"demodiv_two_grids" style=
"width: 640; height: 350; border: 1px solid black"></div>
21 <p>A single y-axis (left):
</p>
22 <div id=
"demodiv_one" style=
"width: 640; height: 350; border: 1px solid black"></div>
23 <p>A single y-axis (right):
</p>
24 <div id=
"demodiv_one_right" style=
"width: 640; height: 350; border: 1px solid black"></div>
26 <script type=
"text/javascript">
28 for (var i =
1; i <=
100; i++) {
30 if (d
> 31) { m =
"02"; d -=
31; }
31 if (m ==
"02" && d
> 28) { m =
"03"; d -=
28; }
32 if (m ==
"03" && d
> 31) { m =
"04"; d -=
31; }
33 if (d <
10) d =
"0" + d;
34 // two series, one with range
1-
100, one with range
1-
2M
35 data.push([new Date(
"2010/" + m +
"/" + d),
38 1e6 * (
1 + i * (
100 - i) / (
50 *
50)),
39 1e6 * (
2 - i * (
100 - i) / (
50 *
50))]);
43 document.getElementById(
"demodiv"),
46 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
60 // set axis-related properties here
64 ylabel: 'Primary y-axis',
65 y2label: 'Secondary y-axis',
70 document.getElementById(
"demodiv_y2_primary"),
73 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
74 ylabel: 'Primary y-axis',
75 y2label: 'Secondary y-axis',
86 // set axis-related properties here
88 independentTicks: false
91 // set axis-related properties here
94 independentTicks: true
101 document.getElementById(
"demodiv_two_grids"),
104 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
105 ylabel: 'Primary y-axis',
106 y2label: 'Secondary y-axis',
117 // set axis-related properties here
120 independentTicks: true,
121 gridLinePattern: [
2,
2]
128 document.getElementById(
"demodiv_one"),
131 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
133 ylabel: 'Primary y-axis',
134 y2label: 'Secondary y-axis',
139 document.getElementById(
"demodiv_one_right"),
142 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
143 ylabel: 'Primary y-axis',
144 y2label: 'Secondary y-axis',
161 // set axis-related properties here
163 independentTicks: false
166 // set axis-related properties here
169 independentTicks: true
175 function update(el) {
176 g.updateOptions( { fillGraph: el.checked } );
177 g2.updateOptions( { fillGraph: el.checked } );
178 g3.updateOptions( { fillGraph: el.checked } );
179 g4.updateOptions( { fillGraph: el.checked } );
180 g5.updateOptions( { fillGraph: el.checked } );
184 <input type=checkbox
id=
"check" onChange=
"update(this)"><label for=
"check"> Fill?
</label>