axis computation
[dygraphs.git] / tests / two-axes.html
CommitLineData
f09fc545
DV
1<html>
2 <head>
3 <title>Multiple y-axes</title>
4 <!--[if IE]>
5 <script type="text/javascript" src="excanvas.js"></script>
6 <![endif]-->
7 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
8 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
9 <script type="text/javascript" src="../dygraph-canvas.js"></script>
10 <script type="text/javascript" src="../dygraph.js"></script>
11 </head>
12 <body>
13 <h2>Multiple y-axes</h2>
14 <div id="demodiv"></div>
15 <script type="text/javascript">
16 var data = [];
17 for (var i = 1; i <= 100; i++) {
18 var m = "01", d = i;
19 if (d > 31) { m = "02"; d -= 31; }
20 if (m == "02" && d > 28) { m = "03"; d -= 28; }
21 if (m == "03" && d > 31) { m = "04"; d -= 31; }
22 if (d < 10) d = "0" + d;
23 // two series, one with range 1-100, one with range 1-2M
24 data.push([new Date("2010/" + m + "/" + d),
25 i,
26 100 - i,
27 1e6 * (1 + i * (100 - i) / (50 * 50)),
28 1e6 * (2 - i * (100 - i) / (50 * 50))]);
29 }
30 g = new Dygraph(
31 document.getElementById("demodiv"),
32 data,
33 {
34 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
35 width: 640,
36 height: 480,
37 'Y3': {
38 axis: {
39 // set axis-related properties here
40 labelsKMB: true
41 }
42 },
43 'Y4': {
44 axis: 'Y3' // use the same y-axis as series Y3
45 }
46 }
47 );
48 </script>
49</body>
50</html>