Commit | Line | Data |
---|---|---|
c1f22b5a RK |
1 | Gallery.register( |
2 | 'two-axes', | |
3 | { | |
4 | name: "Multiple y-axes", | |
5 | setup: function(parent) { | |
6 | parent.innerHTML = | |
7 | "<p>The same data with both one and two y-axes. Two y-axes:</p>" + | |
8 | "<div id='demodiv' style='width: 640; height: 350; border: 1px solid black'></div>" + | |
9 | "<p>A single y-axis:</p>" + | |
10 | "<div id='demodiv_one' style='width: 640; height: 350; border: 1px solid black'></div>" + | |
11 | "<input type=checkbox id='check' onChange='update(this)'><label for='check'> Fill?</label>"; | |
12 | }, | |
13 | run: function() { | |
14 | var data = []; | |
15 | for (var i = 1; i <= 100; i++) { | |
16 | var m = "01", d = i; | |
17 | if (d > 31) { m = "02"; d -= 31; } | |
18 | if (m == "02" && d > 28) { m = "03"; d -= 28; } | |
19 | if (m == "03" && d > 31) { m = "04"; d -= 31; } | |
20 | if (d < 10) d = "0" + d; | |
21 | // two series, one with range 1-100, one with range 1-2M | |
22 | data.push([new Date("2010/" + m + "/" + d), | |
23 | i, | |
24 | 100 - i, | |
25 | 1e6 * (1 + i * (100 - i) / (50 * 50)), | |
26 | 1e6 * (2 - i * (100 - i) / (50 * 50))]); | |
27 | } | |
28 | ||
29 | g = new Dygraph( | |
30 | document.getElementById("demodiv"), | |
31 | data, | |
32 | { | |
33 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
34 | 'Y3': { | |
35 | axis: { | |
36 | } | |
37 | }, | |
38 | 'Y4': { | |
39 | axis: 'Y3' // use the same y-axis as series Y3 | |
40 | }, | |
41 | axes: { | |
42 | y2: { | |
43 | // set axis-related properties here | |
44 | labelsKMB: true | |
45 | } | |
46 | }, | |
47 | ylabel: 'Primary y-axis', | |
48 | y2label: 'Secondary y-axis', | |
49 | yAxisLabelWidth: 60 | |
50 | } | |
51 | ); | |
52 | ||
53 | g2 = new Dygraph( | |
54 | document.getElementById("demodiv_one"), | |
55 | data, | |
56 | { | |
57 | labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ], | |
58 | labelsKMB: true, | |
59 | ylabel: 'Primary y-axis', | |
60 | y2label: 'Secondary y-axis', | |
61 | } | |
62 | ); | |
63 | ||
64 | window.update = function(el) { | |
65 | g.updateOptions( { fillGraph: el.checked } ); | |
66 | g2.updateOptions( { fillGraph: el.checked } ); | |
67 | } | |
68 | } | |
69 | }); |