Merge branch 'master' of github.com:danvk/dygraphs
[dygraphs.git] / tests / two-axes.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Multiple y-axes</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 </head>
16 <body>
17 <h2>Multiple y-axes</h2>
18 <p>The same data with both one and two y-axes. Two y-axes:</p>
19 <p>Two y-axes with y as primary axis (default):</p>
20 <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
21 <p>Two y-axes with y2 as primary axis:</p>
22 <div id="demodiv_y2_primary" style="width: 640; height: 350; border: 1px solid black"></div>
23 <p>Two y-axes using different grids:</p>
24 <div id="demodiv_two_grids" style="width: 640; height: 350; border: 1px solid black"></div>
25 <p>A single y-axis (left):</p>
26 <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
27 <p>A single y-axis (right):</p>
28 <div id="demodiv_one_right" style="width: 640; height: 350; border: 1px solid black"></div>
29
30 <script type="text/javascript">
31 var data = [];
32 for (var i = 1; i <= 100; i++) {
33 var m = "01", d = i;
34 if (d > 31) { m = "02"; d -= 31; }
35 if (m == "02" && d > 28) { m = "03"; d -= 28; }
36 if (m == "03" && d > 31) { m = "04"; d -= 31; }
37 if (d < 10) d = "0" + d;
38 // two series, one with range 1-100, one with range 1-2M
39 data.push([new Date("2010/" + m + "/" + d),
40 i,
41 100 - i,
42 1e6 * (1 + i * (100 - i) / (50 * 50)),
43 1e6 * (2 - i * (100 - i) / (50 * 50))]);
44 }
45
46 g = new Dygraph(
47 document.getElementById("demodiv"),
48 data,
49 {
50 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
51 'Y3': {
52 axis: {
53 }
54 },
55 'Y4': {
56 axis: 'Y3' // use the same y-axis as series Y3
57 },
58 axes: {
59 y2: {
60 // set axis-related properties here
61 labelsKMB: true
62 }
63 },
64 ylabel: 'Primary y-axis',
65 y2label: 'Secondary y-axis',
66 yAxisLabelWidth: 60
67 }
68 );
69
70 g2 = new Dygraph(
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"),
103 data,
104 {
105 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
106 ylabel: 'Primary y-axis',
107 y2label: 'Secondary y-axis',
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 }
125 }
126 );
127
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
176 function update(el) {
177 g.updateOptions( { fillGraph: el.checked } );
178 g2.updateOptions( { fillGraph: el.checked } );
179 g3.updateOptions( { fillGraph: el.checked } );
180 g4.updateOptions( { fillGraph: el.checked } );
181 g5.updateOptions( { fillGraph: el.checked } );
182 }
183 </script>
184
185 <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
186 </body>
187 </html>