Commit | Line | Data |
---|---|---|
ccd9d7c2 PF |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
4 | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> | |
5 | <title>Temperatures with Range Selector</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 | <script type="text/javascript" src="data.js"></script> | |
16 | <style type="text/css"> | |
17 | #bordered { | |
18 | border: 1px solid red; | |
19 | } | |
20 | </style> | |
21 | </head> | |
22 | <body> | |
23 | <p>Demo of a graph with the range selector.</p> | |
24 | <p> | |
25 | No roll period. | |
26 | </p> | |
27 | <div id="noroll" style="width:800px; height:320px;"></div> | |
28 | <p> | |
29 | Roll period of 14 timesteps, custom range selector height and plot color. | |
30 | </p> | |
31 | <div id="roll14" style="width:800px; height:320px;"></div> | |
28dde896 | 32 | <p> |
0a0885d1 | 33 | Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test). |
1085dbce PP |
34 | The default behaviour is to compute the average of <em>all</em> series. |
35 | </p> | |
36 | <div id="selectcombined" style="width:800px; height:320px;"></div> | |
37 | <p> | |
28dde896 DE |
38 | Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector). |
39 | </p> | |
40 | <div id="nochart" style="width:800px; height:30px;"></div> | |
ccd9d7c2 PF |
41 | <script type="text/javascript"> |
42 | g1 = new Dygraph( | |
43 | document.getElementById("noroll"), | |
44 | data_temp, | |
45 | { | |
46 | customBars: true, | |
47 | title: 'Daily Temperatures in New York vs. San Francisco', | |
48 | ylabel: 'Temperature (F)', | |
49 | legend: 'always', | |
50 | labelsDivStyles: { 'textAlign': 'right' }, | |
51 | showRangeSelector: true | |
52 | } | |
53 | ); | |
54 | g2 = new Dygraph( | |
55 | document.getElementById("roll14"), | |
56 | data_temp, | |
57 | { | |
58 | rollPeriod: 14, | |
59 | showRoller: true, | |
60 | customBars: true, | |
61 | title: 'Daily Temperatures in New York vs. San Francisco', | |
62 | ylabel: 'Temperature (F)', | |
63 | legend: 'always', | |
64 | labelsDivStyles: { 'textAlign': 'right' }, | |
de8f284f | 65 | xAxisHeight: 14, |
ccd9d7c2 PF |
66 | showRangeSelector: true, |
67 | rangeSelectorHeight: 30, | |
68 | rangeSelectorPlotStrokeColor: 'yellow', | |
69 | rangeSelectorPlotFillColor: 'lightyellow' | |
70 | } | |
71 | ); | |
28dde896 | 72 | g3 = new Dygraph( |
1085dbce PP |
73 | document.getElementById("selectcombined"), |
74 | [ | |
75 | [0, 1, 4, 10], | |
76 | [10, 2, 8, 19], | |
77 | [25, 15, 4, 2], | |
78 | [35, 0, 3, 2] | |
79 | ], | |
80 | { | |
81 | title: 'Daily Temperatures in New York vs. San Francisco', | |
82 | ylabel: 'Temperature (F)', | |
83 | showRangeSelector: true, | |
0a0885d1 DV |
84 | labels: ['X', 'Y1', 'Y2', 'Y3'], |
85 | series: { | |
86 | 'Y1': { showInRangeSelector: true } | |
87 | } | |
1085dbce PP |
88 | } |
89 | ); | |
90 | g4 = new Dygraph( | |
28dde896 DE |
91 | document.getElementById("nochart"), |
92 | [[0,1],[10,1]], | |
93 | { | |
94 | xAxisHeight: 30, | |
95 | drawXAxis: false, | |
96 | showRangeSelector: true, | |
8ef9d44d | 97 | rangeSelectorHeight: 30 |
28dde896 DE |
98 | } |
99 | ); | |
ccd9d7c2 PF |
100 | </script> |
101 | </body> | |
102 | </html> |