Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / two-axes.html
CommitLineData
54425b14 1<!DOCTYPE html>
f09fc545
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
f09fc545
DV
5 <title>Multiple y-axes</title>
6 <!--[if IE]>
e1fb3740 7 <script type="text/javascript" src="../excanvas.js"></script>
f09fc545
DV
8 <![endif]-->
9 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
10 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
11 <script type="text/javascript" src="../dygraph-canvas.js"></script>
12 <script type="text/javascript" src="../dygraph.js"></script>
13 </head>
14 <body>
15 <h2>Multiple y-axes</h2>
aa4ddc56 16 <p>The same data with both one and two y-axes. Two y-axes:</p>
f09fc545 17 <div id="demodiv"></div>
aa4ddc56
DV
18 <p>A single y-axis:</p>
19 <div id="demodiv_one"></div>
20
f09fc545
DV
21 <script type="text/javascript">
22 var data = [];
23 for (var i = 1; i <= 100; i++) {
24 var m = "01", d = i;
25 if (d > 31) { m = "02"; d -= 31; }
26 if (m == "02" && d > 28) { m = "03"; d -= 28; }
27 if (m == "03" && d > 31) { m = "04"; d -= 31; }
28 if (d < 10) d = "0" + d;
29 // two series, one with range 1-100, one with range 1-2M
30 data.push([new Date("2010/" + m + "/" + d),
31 i,
32 100 - i,
33 1e6 * (1 + i * (100 - i) / (50 * 50)),
34 1e6 * (2 - i * (100 - i) / (50 * 50))]);
35 }
aa4ddc56 36
f09fc545 37 g = new Dygraph(
aa4ddc56
DV
38 document.getElementById("demodiv"),
39 data,
40 {
41 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
42 width: 640,
43 height: 350,
44 'Y3': {
45 axis: {
46 // set axis-related properties here
47 labelsKMB: true
f09fc545 48 }
aa4ddc56
DV
49 },
50 'Y4': {
51 axis: 'Y3' // use the same y-axis as series Y3
52 }
53 }
54 );
55
56 g2 = new Dygraph(
57 document.getElementById("demodiv_one"),
58 data,
59 {
60 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
61 width: 640,
62 height: 350,
63 labelsKMB: true
64 }
65 );
44c6bc29
DV
66
67 function update(el) {
68 g.updateOptions( { fillGraph: el.checked } );
69 g2.updateOptions( { fillGraph: el.checked } );
70 }
f09fc545 71 </script>
44c6bc29
DV
72
73 <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
f09fc545
DV
74</body>
75</html>