Merge branch 'master' of https://github.com/kberg/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 <div id="demodiv"></div>
20 <p>A single y-axis:</p>
21 <div id="demodiv_one"></div>
22
23 <script type="text/javascript">
24 var data = [];
25 for (var i = 1; i <= 100; i++) {
26 var m = "01", d = i;
27 if (d > 31) { m = "02"; d -= 31; }
28 if (m == "02" && d > 28) { m = "03"; d -= 28; }
29 if (m == "03" && d > 31) { m = "04"; d -= 31; }
30 if (d < 10) d = "0" + d;
31 // two series, one with range 1-100, one with range 1-2M
32 data.push([new Date("2010/" + m + "/" + d),
33 i,
34 100 - i,
35 1e6 * (1 + i * (100 - i) / (50 * 50)),
36 1e6 * (2 - i * (100 - i) / (50 * 50))]);
37 }
38
39 g = new Dygraph(
40 document.getElementById("demodiv"),
41 data,
42 {
43 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
44 width: 640,
45 height: 350,
46 'Y3': {
47 axis: {
48 // set axis-related properties here
49 labelsKMB: true
50 }
51 },
52 'Y4': {
53 axis: 'Y3' // use the same y-axis as series Y3
54 }
55 }
56 );
57
58 g2 = new Dygraph(
59 document.getElementById("demodiv_one"),
60 data,
61 {
62 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
63 width: 640,
64 height: 350,
65 labelsKMB: true
66 }
67 );
68
69 function update(el) {
70 g.updateOptions( { fillGraph: el.checked } );
71 g2.updateOptions( { fillGraph: el.checked } );
72 }
73 </script>
74
75 <input type=checkbox id="check" onChange="update(this)"><label for="check"> Fill?</label>
76 </body>
77 </html>