Merge pull request #484 from danvk/wrapped-labels
[dygraphs.git] / tests / two-axes-vr.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 with valueRange</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 with valueRange</h2>
18 <p>The same data with both different valueRanges. Two-axis old y[40, 70] valueRange:</p>
19 <div id="demodiv" style="width: 640; height: 350; border: 1px solid black"></div>
20 <p>Two-axis new valueRange y[40, 80] set:</p>
21 <div id="demodiv_one" style="width: 640; height: 350; border: 1px solid black"></div>
22 <p>Two-axis new valueRange y[40, 80] &amp; y2[1e6, 1.2e6] set:</p>
23 <div id="demodiv_two" style="width: 640; height: 350; border: 1px solid black"></div>
24 <script type="text/javascript">
25 var data = [];
26 for (var i = 1; i <= 100; i++) {
27 var m = "01", d = i;
28 if (d > 31) { m = "02"; d -= 31; }
29 if (m == "02" && d > 28) { m = "03"; d -= 28; }
30 if (m == "03" && d > 31) { m = "04"; d -= 31; }
31 if (d < 10) d = "0" + d;
32 // two series, one with range 1-100, one with range 1-2M
33 data.push([new Date("2010/" + m + "/" + d),
34 i,
35 100 - i,
36 1e6 * (1 + i * (100 - i) / (50 * 50)),
37 1e6 * (2 - i * (100 - i) / (50 * 50))]);
38 }
39
40 g = new Dygraph(
41 document.getElementById("demodiv"),
42 data,
43 {
44 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
45 series : {
46 'Y3': { axis: 'y2' },
47 'Y4': { axis: 'y2' }
48 },
49 valueRange: [40, 70],
50 axes: {
51 y2: {
52 // set axis-related properties here
53 labelsKMB: true
54 }
55 },
56 ylabel: 'Primary y-axis',
57 y2label: 'Secondary y-axis'
58 }
59 );
60
61 g2 = new Dygraph(
62 document.getElementById("demodiv_one"),
63 data,
64 {
65 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
66 series : {
67 'Y3': { axis: 'y2' },
68 'Y4': { axis: 'y2' }
69 },
70 axes: {
71 y: {
72 valueRange: [40, 80]
73 },
74 y2: {
75 // set axis-related properties here
76 labelsKMB: true
77 }
78 },
79 ylabel: 'Primary y-axis',
80 y2label: 'Secondary y-axis',
81 yAxisLabelWidth: 60
82 }
83 );
84
85 g3 = new Dygraph(
86 document.getElementById("demodiv_two"),
87 data,
88 {
89 labels: [ 'Date', 'Y1', 'Y2', 'Y3', 'Y4' ],
90 series : {
91 'Y3': { axis: 'y2' },
92 'Y4': { axis: 'y2' }
93 },
94 axes: {
95 y: {
96 valueRange: [40, 80]
97 },
98 y2: {
99 // set axis-related properties here
100 valueRange: [1e6, 1.2e6],
101 labelsKMB: true
102 }
103 },
104 ylabel: 'Primary y-axis',
105 y2label: 'Secondary y-axis',
106 yAxisLabelWidth: 60
107 }
108 );
109
110
111 </script>
112 </body>
113 </html>