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