4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Multiple y-axes
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
10 For production (minified) code, use:
11 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
13 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
17 <h2>Multiple y-axes
</h2>
18 <p>The same data with both one and two y-axes. Two y-axes:
</p>
19 <p>Two y-axes with y as primary axis (default):
</p>
20 <div id=
"demodiv" style=
"width: 640; height: 350; border: 1px solid black"></div>
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>
26 <div id=
"demodiv_one" style=
"width: 640; height: 350; border: 1px solid black"></div>
27 <p>A single y-axis (right):
</p>
28 <div id=
"demodiv_one_right" style=
"width: 640; height: 350; border: 1px solid black"></div>
30 <script type=
"text/javascript">
32 for (var i =
1; i <=
100; 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),
42 1e6 * (
1 + i * (
100 - i) / (
50 *
50)),
43 1e6 * (
2 - i * (
100 - i) / (
50 *
50))]);
47 document.getElementById(
"demodiv"),
50 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
61 // set axis-related properties here
65 ylabel: 'Primary y-axis',
66 y2label: 'Secondary y-axis',
72 document.getElementById(
"demodiv_y2_primary"),
75 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
76 ylabel: 'Primary y-axis',
77 y2label: 'Secondary y-axis',
88 // set axis-related properties here
90 independentTicks: false
93 // set axis-related properties here
96 independentTicks: true
103 document.getElementById(
"demodiv_two_grids"),
106 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
107 ylabel: 'Primary y-axis',
108 y2label: 'Secondary y-axis',
119 // set axis-related properties here
122 independentTicks: true,
123 gridLinePattern: [
2,
2]
130 document.getElementById(
"demodiv_one"),
133 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
135 ylabel: 'Primary y-axis',
136 y2label: 'Secondary y-axis',
141 document.getElementById(
"demodiv_one_right"),
144 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
145 ylabel: 'Primary y-axis',
146 y2label: 'Secondary y-axis',
163 // set axis-related properties here
165 independentTicks: false
168 // set axis-related properties here
171 independentTicks: true
177 function update(el) {
178 g.updateOptions( { fillGraph: el.checked } );
179 g2.updateOptions( { fillGraph: el.checked } );
180 g3.updateOptions( { fillGraph: el.checked } );
181 g4.updateOptions( { fillGraph: el.checked } );
182 g5.updateOptions( { fillGraph: el.checked } );
186 <input type=checkbox
id=
"check" onChange=
"update(this)"><label for=
"check"> Fill?
</label>