Commit | Line | Data |
---|---|---|
4dd0ac55 RV |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
4dd0ac55 | 5 | <title>Multiple y-axes with valueRange</title> |
fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
4dd0ac55 RV |
7 | |
8 | </head> | |
9 | <body> | |
10 | <h2>Multiple y-axes with valueRange</h2> | |
11 | <p>The same data with both different valueRanges. Two-axis old y[40, 70] valueRange:</p> | |
12 | <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div> | |
13 | <p>Two-axis new valueRange y[40, 80] set:</p> | |
14 | <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div> | |
15 | <p>Two-axis new valueRange y[40, 80] & y2[1e6, 1.2e6] set:</p> | |
16 | <div id="demodiv_two" style="width: 640; height: 350; border: 1px solid black"></div> | |
17 | <script type="text/javascript"> | |
18 | var data = []; | |
19 | for (var i = 1; i <= 100; i++) { | |
20 | var m = "01", d = i; | |
21 | if (d > 31) { m = "02"; d -= 31; } | |
22 | if (m == "02" && d > 28) { m = "03"; d -= 28; } | |
23 | if (m == "03" && d > 31) { m = "04"; d -= 31; } | |
24 | if (d < 10) d = "0" + d; | |
25 | // two series, one with range 1-100, one with range 1-2M | |
26 | data.push([new Date("2010/" + m + "/" + d), | |
27 | i, | |
28 | 100 - i, | |
29 | 1e6 * (1 + i * (100 - i) / (50 * 50)), | |
30 | 1e6 * (2 - i * (100 - i) / (50 * 50))]); | |
31 | } | |
32 | ||
33 | g = new Dygraph( | |
34 | document.getElementById("demodiv"), | |
35 | data, | |
36 | { | |
37 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
30abcfb6 | 38 | series : { |
e4dfed73 DV |
39 | 'Y3': { axis: 'y2' }, |
40 | 'Y4': { axis: 'y2' } | |
4dd0ac55 | 41 | }, |
4dd0ac55 RV |
42 | valueRange: [40, 70], |
43 | axes: { | |
44 | y2: { | |
45 | // set axis-related properties here | |
46 | labelsKMB: true | |
47 | } | |
48 | }, | |
49 | ylabel: 'Primary y-axis', | |
b504bdd2 | 50 | y2label: 'Secondary y-axis' |
4dd0ac55 RV |
51 | } |
52 | ); | |
53 | ||
54 | g2 = new Dygraph( | |
55 | document.getElementById("demodiv_one"), | |
56 | data, | |
57 | { | |
58 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
30abcfb6 | 59 | series : { |
e4dfed73 DV |
60 | 'Y3': { axis: 'y2' }, |
61 | 'Y4': { axis: 'y2' } | |
4dd0ac55 | 62 | }, |
4dd0ac55 RV |
63 | axes: { |
64 | y: { | |
65 | valueRange: [40, 80] | |
66 | }, | |
67 | y2: { | |
68 | // set axis-related properties here | |
69 | labelsKMB: true | |
70 | } | |
71 | }, | |
72 | ylabel: 'Primary y-axis', | |
73 | y2label: 'Secondary y-axis', | |
2b66af4f DV |
74 | axes: { |
75 | y: { | |
76 | axisLabelWidth: 60 | |
77 | } | |
78 | } | |
4dd0ac55 RV |
79 | } |
80 | ); | |
81 | ||
b504bdd2 | 82 | g3 = new Dygraph( |
4dd0ac55 RV |
83 | document.getElementById("demodiv_two"), |
84 | data, | |
85 | { | |
86 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
30abcfb6 | 87 | series : { |
e4dfed73 DV |
88 | 'Y3': { axis: 'y2' }, |
89 | 'Y4': { axis: 'y2' } | |
4dd0ac55 | 90 | }, |
4dd0ac55 RV |
91 | axes: { |
92 | y: { | |
2b66af4f DV |
93 | valueRange: [40, 80], |
94 | axisLabelWidth: 60 | |
4dd0ac55 RV |
95 | }, |
96 | y2: { | |
97 | // set axis-related properties here | |
98 | valueRange: [1e6, 1.2e6], | |
99 | labelsKMB: true | |
100 | } | |
101 | }, | |
102 | ylabel: 'Primary y-axis', | |
2b66af4f | 103 | y2label: 'Secondary y-axis' |
4dd0ac55 RV |
104 | } |
105 | ); | |
106 | ||
107 | ||
108 | </script> | |
109 | </body> | |
110 | </html> |