Commit | Line | Data |
---|---|---|
ccd9d7c2 PF |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
fd6b8dad | 4 | <link rel="stylesheet" href="../dist/dygraph.css"> |
ccd9d7c2 | 5 | <title>Temperatures with Range Selector</title> |
fbd6834a | 6 | <script type="text/javascript" src="../dist/dygraph.js"></script> |
ccd9d7c2 PF |
7 | |
8 | <script type="text/javascript" src="data.js"></script> | |
9 | <style type="text/css"> | |
10 | #bordered { | |
11 | border: 1px solid red; | |
12 | } | |
79cb28dd | 13 | #dark-background { |
14 | background-color: #101015; | |
15 | color: white; | |
16 | } | |
93a5bb4c DV |
17 | #darkbg1 .dygraph-axis-label, #darkbg2 .dygraph-axis-label { |
18 | color: white; | |
19 | } | |
20 | #noroll .dygraph-legend, | |
21 | #roll14 .dygraph-legend, | |
22 | #darkbg1 .dygraph-legend, | |
23 | #darkbg2 .dygraph-legend { | |
24 | text-align: right; | |
25 | } | |
26 | #darkbg1 .dygraph-legend { | |
27 | background-color: #101015; | |
28 | } | |
29 | #darkbg2 .dygraph-legend { | |
30 | background-color: #101015; | |
31 | } | |
ccd9d7c2 PF |
32 | </style> |
33 | </head> | |
34 | <body> | |
35 | <p>Demo of a graph with the range selector.</p> | |
36 | <p> | |
37 | No roll period. | |
38 | </p> | |
39 | <div id="noroll" style="width:800px; height:320px;"></div> | |
2555a4ed DV |
40 | |
41 | <h2 id="options">Range selector options</h2> | |
42 | <p>Here's a view of how the various <a href="../options.html#Range%20Selector">range selector options</a> affect the display:</p> | |
43 | <img width="954" height="354" src="range-selector-anatomy.png"> | |
44 | ||
ccd9d7c2 | 45 | <p> |
31a319fe | 46 | Roll period of 14 timesteps, various custom range selector options. |
ccd9d7c2 PF |
47 | </p> |
48 | <div id="roll14" style="width:800px; height:320px;"></div> | |
28dde896 | 49 | <p> |
0a0885d1 | 50 | 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 |
51 | The default behaviour is to compute the average of <em>all</em> series. |
52 | </p> | |
53 | <div id="selectcombined" style="width:800px; height:320px;"></div> | |
2555a4ed | 54 | |
1085dbce | 55 | <p> |
28dde896 DE |
56 | Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector). |
57 | </p> | |
58 | <div id="nochart" style="width:800px; height:30px;"></div> | |
79cb28dd | 59 | <div id="dark-background"> |
60 | <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p> | |
61 | <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div> | |
62 | <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div> | |
63 | </div> | |
e03f3a93 DV |
64 | <p>Demo of range selector with stepPlot</p> |
65 | <div id="stepplot" style="width:800px; height:320px;"></div> | |
66 | ||
ccd9d7c2 PF |
67 | <script type="text/javascript"> |
68 | g1 = new Dygraph( | |
69 | document.getElementById("noroll"), | |
70 | data_temp, | |
71 | { | |
72 | customBars: true, | |
73 | title: 'Daily Temperatures in New York vs. San Francisco', | |
74 | ylabel: 'Temperature (F)', | |
75 | legend: 'always', | |
ccd9d7c2 PF |
76 | showRangeSelector: true |
77 | } | |
78 | ); | |
79 | g2 = new Dygraph( | |
80 | document.getElementById("roll14"), | |
81 | data_temp, | |
82 | { | |
83 | rollPeriod: 14, | |
84 | showRoller: true, | |
85 | customBars: true, | |
86 | title: 'Daily Temperatures in New York vs. San Francisco', | |
87 | ylabel: 'Temperature (F)', | |
88 | legend: 'always', | |
de8f284f | 89 | xAxisHeight: 14, |
ccd9d7c2 | 90 | showRangeSelector: true, |
2555a4ed DV |
91 | rangeSelectorHeight: 80, |
92 | rangeSelectorPlotStrokeColor: 'purple', | |
31a319fe | 93 | rangeSelectorPlotFillColor: 'black', |
2555a4ed | 94 | rangeSelectorBackgroundStrokeColor: 'orange', |
31a319fe | 95 | rangeSelectorBackgroundLineWidth: 4, |
2555a4ed | 96 | rangeSelectorPlotLineWidth: 5, |
31a319fe | 97 | rangeSelectorForegroundStrokeColor: 'brown', |
2555a4ed DV |
98 | rangeSelectorForegroundLineWidth: 8, |
99 | rangeSelectorAlpha: 0.5, | |
100 | rangeSelectorPlotFillGradientColor: 'red' | |
ccd9d7c2 PF |
101 | } |
102 | ); | |
28dde896 | 103 | g3 = new Dygraph( |
1085dbce PP |
104 | document.getElementById("selectcombined"), |
105 | [ | |
106 | [0, 1, 4, 10], | |
107 | [10, 2, 8, 19], | |
108 | [25, 15, 4, 2], | |
109 | [35, 0, 3, 2] | |
110 | ], | |
111 | { | |
112 | title: 'Daily Temperatures in New York vs. San Francisco', | |
113 | ylabel: 'Temperature (F)', | |
114 | showRangeSelector: true, | |
0a0885d1 DV |
115 | labels: ['X', 'Y1', 'Y2', 'Y3'], |
116 | series: { | |
117 | 'Y1': { showInRangeSelector: true } | |
118 | } | |
1085dbce PP |
119 | } |
120 | ); | |
121 | g4 = new Dygraph( | |
28dde896 DE |
122 | document.getElementById("nochart"), |
123 | [[0,1],[10,1]], | |
124 | { | |
125 | xAxisHeight: 30, | |
bfb3e0a4 RK |
126 | axes : { |
127 | x : { | |
128 | drawAxis : false | |
129 | } | |
130 | }, | |
2b66af4f | 131 | labels: ['X', 'Y'], |
28dde896 | 132 | showRangeSelector: true, |
8ef9d44d | 133 | rangeSelectorHeight: 30 |
28dde896 DE |
134 | } |
135 | ); | |
79cb28dd | 136 | g5 = new Dygraph( |
137 | document.getElementById("darkbg1"), | |
138 | data_temp, | |
139 | { | |
140 | rollPeriod: 14, | |
141 | showRoller: true, | |
142 | customBars: true, | |
143 | title: 'Nightly Temperatures in NY vs. SF', | |
144 | ylabel: 'Temperature (F)', | |
145 | legend: 'always', | |
79cb28dd | 146 | showRangeSelector: true, |
147 | rangeSelectorPlotFillColor: 'MediumSlateBlue', | |
148 | rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)', | |
79cb28dd | 149 | colorValue: 0.9, |
150 | fillAlpha: 0.4 | |
151 | } | |
152 | ); | |
153 | g6 = new Dygraph( | |
154 | document.getElementById("darkbg2"), | |
155 | data_temp, | |
156 | { | |
157 | rollPeriod: 14, | |
158 | showRoller: true, | |
159 | customBars: true, | |
160 | title: 'Nightly Temperatures in NY vs. SF', | |
161 | ylabel: 'Temperature (F)', | |
162 | legend: 'always', | |
79cb28dd | 163 | showRangeSelector: true, |
164 | rangeSelectorPlotFillColor: 'MediumSlateBlue', | |
79cb28dd | 165 | colorValue: 0.9, |
166 | fillAlpha: 0.4 | |
167 | } | |
168 | ); | |
169 | g7 = new Dygraph(document.getElementById("stepplot"), | |
e03f3a93 DV |
170 | "Date,Idle,Used\n" + |
171 | "2008-05-07,70,30\n" + | |
172 | "2008-05-08,42,88\n" + | |
173 | "2008-05-09,88,42\n" + | |
174 | "2008-05-10,33,37\n" + | |
175 | "2008-05-11,30,35\n", | |
176 | { | |
177 | stepPlot: true, | |
178 | fillGraph: true, | |
179 | stackedGraph: true, | |
180 | includeZero: true, | |
181 | showRangeSelector: true | |
182 | }); | |
ccd9d7c2 PF |
183 | </script> |
184 | </body> | |
185 | </html> |