Import babel polyfill (#813)
[dygraphs.git] / tests / two-axes.html
CommitLineData
54425b14 1<!DOCTYPE html>
f09fc545
DV
2<html>
3 <head>
93a5bb4c 4 <link rel="stylesheet" href="../css/dygraph.css">
f09fc545 5 <title>Multiple y-axes</title>
7e5ddc94
DV
6 <!--
7 For production (minified) code, use:
8 <script type="text/javascript" src="dygraph-combined.js"></script>
9 -->
fbd6834a 10 <script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94 11
f09fc545
DV
12 </head>
13 <body>
14 <h2>Multiple y-axes</h2>
aa4ddc56 15 <p>The same data with both one and two y-axes. Two y-axes:</p>
c866c1fe 16 <p>Two y-axes with y as primary axis (default):</p>
70be5ed1 17 <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
c866c1fe
DE
18 <p>Two y-axes with y2 as primary axis:</p>
19 <div id="demodiv_y2_primary" style="width: 640; height: 350; border: 1px solid black"></div>
20 <p>Two y-axes using different grids:</p>
21 <div id="demodiv_two_grids" style="width: 640; height: 350; border: 1px solid black"></div>
22 <p>A single y-axis (left):</p>
70be5ed1 23 <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
c866c1fe
DE
24 <p>A single y-axis (right):</p>
25 <div id="demodiv_one_right" style="width: 640; height: 350; border: 1px solid black"></div>
aa4ddc56 26
f09fc545
DV
27 <script type="text/javascript">
28 var data = [];
29 for (var i = 1; i <= 100; i++) {
30 var m = "01", d = i;
31 if (d > 31) { m = "02"; d -= 31; }
32 if (m == "02" && d > 28) { m = "03"; d -= 28; }
33 if (m == "03" && d > 31) { m = "04"; d -= 31; }
34 if (d < 10) d = "0" + d;
35 // two series, one with range 1-100, one with range 1-2M
36 data.push([new Date("2010/" + m + "/" + d),
37 i,
38 100 - i,
39 1e6 * (1 + i * (100 - i) / (50 * 50)),
40 1e6 * (2 - i * (100 - i) / (50 * 50))]);
41 }
aa4ddc56 42
f09fc545 43 g = new Dygraph(
aa4ddc56
DV
44 document.getElementById("demodiv"),
45 data,
46 {
47 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
27fd63fc
DV
48 series: {
49 'Y3': {
50 axis: 'y2'
51 },
52 'Y4': {
53 axis: 'y2'
54 },
48e614ac
DV
55 },
56 axes: {
2b66af4f
DV
57 y: {
58 axisLabelWidth: 60
59 },
48e614ac
DV
60 y2: {
61 // set axis-related properties here
62 labelsKMB: true
63 }
d0c39108
DV
64 },
65 ylabel: 'Primary y-axis',
66 y2label: 'Secondary y-axis',
aa4ddc56
DV
67 }
68 );
c866c1fe 69
aa4ddc56 70 g2 = new Dygraph(
c866c1fe
DE
71 document.getElementById("demodiv_y2_primary"),
72 data,
73 {
74 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
75 ylabel: 'Primary y-axis',
76 y2label: 'Secondary y-axis',
77 series : {
78 'Y3': {
79 axis: 'y2'
80 },
81 'Y4': {
82 axis: 'y2'
83 }
84 },
85 axes: {
86 y: {
87 // set axis-related properties here
88 drawGrid: false,
89 independentTicks: false
90 },
91 y2: {
92 // set axis-related properties here
93 labelsKMB: true,
94 drawGrid: true,
95 independentTicks: true
96 }
97 }
98 }
99 );
100
101 g3 = new Dygraph(
102 document.getElementById("demodiv_two_grids"),
aa4ddc56
DV
103 data,
104 {
105 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
107f9d8e
DV
106 ylabel: 'Primary y-axis',
107 y2label: 'Secondary y-axis',
c866c1fe
DE
108 series : {
109 'Y3': {
110 axis: 'y2'
111 },
112 'Y4': {
113 axis: 'y2'
114 }
115 },
116 axes: {
117 y2: {
118 // set axis-related properties here
119 labelsKMB: true,
120 drawGrid: true,
121 independentTicks: true,
122 gridLinePattern: [2,2]
123 }
124 }
aa4ddc56
DV
125 }
126 );
44c6bc29 127
c866c1fe
DE
128 g4 = new Dygraph(
129 document.getElementById("demodiv_one"),
130 data,
131 {
132 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
133 labelsKMB: true,
134 ylabel: 'Primary y-axis',
135 y2label: 'Secondary y-axis',
136 }
137 );
138
139 g5 = new Dygraph(
140 document.getElementById("demodiv_one_right"),
141 data,
142 {
143 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
144 ylabel: 'Primary y-axis',
145 y2label: 'Secondary y-axis',
146 series : {
147 'Y1': {
148 axis: 'y2'
149 },
150 'Y2': {
151 axis: 'y2'
152 },
153 'Y3': {
154 axis: 'y2'
155 },
156 'Y4': {
157 axis: 'y2'
158 }
159 },
160 axes: {
161 y: {
162 // set axis-related properties here
163 drawGrid: false,
164 independentTicks: false
165 },
166 y2: {
167 // set axis-related properties here
168 labelsKMB: true,
169 drawGrid: true,
170 independentTicks: true
171 }
172 }
173 }
174 );
175
44c6bc29
DV
176 function update(el) {
177 g.updateOptions( { fillGraph: el.checked } );
178 g2.updateOptions( { fillGraph: el.checked } );
c866c1fe
DE
179 g3.updateOptions( { fillGraph: el.checked } );
180 g4.updateOptions( { fillGraph: el.checked } );
181 g5.updateOptions( { fillGraph: el.checked } );
44c6bc29 182 }
f09fc545 183 </script>
44c6bc29
DV
184
185 <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
f09fc545
DV
186</body>
187</html>