4 <title>Multiple y-axes
</title>
6 <script type=
"text/javascript" src=
"../excanvas.js"></script>
8 <script type=
"text/javascript" src=
"../strftime/strftime-min.js"></script>
9 <script type=
"text/javascript" src=
"../rgbcolor/rgbcolor.js"></script>
10 <script type=
"text/javascript" src=
"../dygraph-canvas.js"></script>
11 <script type=
"text/javascript" src=
"../dygraph.js"></script>
14 <h2>Multiple y-axes
</h2>
15 <p>The same data with both one and two y-axes. Two y-axes:
</p>
16 <div id=
"demodiv"></div>
17 <p>A single y-axis:
</p>
18 <div id=
"demodiv_one"></div>
20 <script type=
"text/javascript">
22 for (var i =
1; i <=
100; i++) {
24 if (d
> 31) { m =
"02"; d -=
31; }
25 if (m ==
"02" && d
> 28) { m =
"03"; d -=
28; }
26 if (m ==
"03" && d
> 31) { m =
"04"; d -=
31; }
27 if (d <
10) d =
"0" + d;
28 // two series, one with range
1-
100, one with range
1-
2M
29 data.push([new Date(
"2010/" + m +
"/" + d),
32 1e6 * (
1 + i * (
100 - i) / (
50 *
50)),
33 1e6 * (
2 - i * (
100 - i) / (
50 *
50))]);
37 document.getElementById(
"demodiv"),
40 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
45 // set axis-related properties here
50 axis: 'Y3' // use the same y-axis as series Y3
56 document.getElementById(
"demodiv_one"),
59 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
67 g.updateOptions( { fillGraph: el.checked } );
68 g2.updateOptions( { fillGraph: el.checked } );
72 <input type=checkbox
id=
"check" onChange=
"update(this)"><label for=
"check"> Fill?
</label>