Use CSS for tests, gallery and docs
[dygraphs.git] / tests / two-axes.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" href="../css/dygraph.css">
5 <title>Multiple y-axes</title>
6 <!--
7 For production (minified) code, use:
8 <script type="text/javascript" src="dygraph-combined.js"></script>
9 -->
10 <script type="text/javascript" src="../dist/dygraph.js"></script>
11
12 </head>
13 <body>
14 <h2>Multiple y-axes</h2>
15 <p>The same data with both one and two y-axes. Two y-axes:</p>
16 <p>Two y-axes with y as primary axis (default):</p>
17 <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
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>
23 <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
24 <p>A single y-axis (right):</p>
25 <div id="demodiv_one_right" style="width: 640; height: 350; border: 1px solid black"></div>
26
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 }
42
43 g = new Dygraph(
44 document.getElementById("demodiv"),
45 data,
46 {
47 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
48 series: {
49 'Y3': {
50 axis: 'y2'
51 },
52 'Y4': {
53 axis: 'y2'
54 },
55 },
56 axes: {
57 y: {
58 axisLabelWidth: 60
59 },
60 y2: {
61 // set axis-related properties here
62 labelsKMB: true
63 }
64 },
65 ylabel: 'Primary y-axis',
66 y2label: 'Secondary y-axis',
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>