4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>Multiple y-axes with valueRange
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
14 <h2>Multiple y-axes with valueRange
</h2>
15 <p>The same data with both different valueRanges. Two-axis old y[
40,
70] valueRange:
</p>
16 <div id=
"demodiv" style=
"width: 640; height: 350; border: 1px solid black"></div>
17 <p>Two-axis new valueRange y[
40,
80] set:
</p>
18 <div id=
"demodiv_one" style=
"width: 640; height: 350; border: 1px solid black"></div>
19 <p>Two-axis new valueRange y[
40,
80]
& y2[
1e6,
1.2e6] set:
</p>
20 <div id=
"demodiv_two" style=
"width: 640; height: 350; border: 1px solid black"></div>
21 <script type=
"text/javascript">
23 for (var i =
1; i <=
100; i++) {
25 if (d
> 31) { m =
"02"; d -=
31; }
26 if (m ==
"02" && d
> 28) { m =
"03"; d -=
28; }
27 if (m ==
"03" && d
> 31) { m =
"04"; d -=
31; }
28 if (d <
10) d =
"0" + d;
29 // two series, one with range
1-
100, one with range
1-
2M
30 data.push([new Date(
"2010/" + m +
"/" + d),
33 1e6 * (
1 + i * (
100 - i) / (
50 *
50)),
34 1e6 * (
2 - i * (
100 - i) / (
50 *
50))]);
38 document.getElementById(
"demodiv"),
41 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
49 // set axis-related properties here
53 ylabel: 'Primary y-axis',
54 y2label: 'Secondary y-axis'
59 document.getElementById(
"demodiv_one"),
62 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
72 // set axis-related properties here
76 ylabel: 'Primary y-axis',
77 y2label: 'Secondary y-axis',
87 document.getElementById(
"demodiv_two"),
90 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
101 // set axis-related properties here
102 valueRange: [
1e6,
1.2e6],
106 ylabel: 'Primary y-axis',
107 y2label: 'Secondary y-axis'