4 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
5 <title>Temperatures with Range Selector
</title>
6 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
8 <script type=
"text/javascript" src=
"data.js"></script>
9 <style type=
"text/css">
11 border:
1px solid red;
14 background-color: #
101015;
17 #darkbg1 .dygraph-axis-label, #darkbg2 .dygraph-axis-label {
20 #noroll .dygraph-legend,
21 #roll14 .dygraph-legend,
22 #darkbg1 .dygraph-legend,
23 #darkbg2 .dygraph-legend {
26 #darkbg1 .dygraph-legend {
27 background-color: #
101015;
29 #darkbg2 .dygraph-legend {
30 background-color: #
101015;
35 <p>Demo of a graph with the range selector.
</p>
39 <div id=
"noroll" style=
"width:800px; height:320px;"></div>
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">
46 Roll period of
14 timesteps, various custom range selector options.
48 <div id=
"roll14" style=
"width:800px; height:320px;"></div>
50 Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
51 The default behaviour is to compute the average of
<em>all
</em> series.
53 <div id=
"selectcombined" style=
"width:800px; height:320px;"></div>
56 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
58 <div id=
"nochart" style=
"width:800px; height:30px;"></div>
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>
64 <p>Demo of range selector with stepPlot
</p>
65 <div id=
"stepplot" style=
"width:800px; height:320px;"></div>
67 <script type=
"text/javascript">
69 document.getElementById(
"noroll"),
73 title: 'Daily Temperatures in New York vs. San Francisco',
74 ylabel: 'Temperature (F)',
76 showRangeSelector: true
80 document.getElementById(
"roll14"),
86 title: 'Daily Temperatures in New York vs. San Francisco',
87 ylabel: 'Temperature (F)',
90 showRangeSelector: true,
91 rangeSelectorHeight:
80,
92 rangeSelectorPlotStrokeColor: 'purple',
93 rangeSelectorPlotFillColor: 'black',
94 rangeSelectorBackgroundStrokeColor: 'orange',
95 rangeSelectorBackgroundLineWidth:
4,
96 rangeSelectorPlotLineWidth:
5,
97 rangeSelectorForegroundStrokeColor: 'brown',
98 rangeSelectorForegroundLineWidth:
8,
99 rangeSelectorAlpha:
0.5,
100 rangeSelectorPlotFillGradientColor: 'red'
104 document.getElementById(
"selectcombined"),
112 title: 'Daily Temperatures in New York vs. San Francisco',
113 ylabel: 'Temperature (F)',
114 showRangeSelector: true,
115 labels: ['X', 'Y1', 'Y2', 'Y3'],
117 'Y1': { showInRangeSelector: true }
122 document.getElementById(
"nochart"),
132 showRangeSelector: true,
133 rangeSelectorHeight:
30
137 document.getElementById(
"darkbg1"),
143 title: 'Nightly Temperatures in NY vs. SF',
144 ylabel: 'Temperature (F)',
146 showRangeSelector: true,
147 rangeSelectorPlotFillColor: 'MediumSlateBlue',
148 rangeSelectorPlotFillGradientColor: 'rgba(
123,
104,
238,
0)',
154 document.getElementById(
"darkbg2"),
160 title: 'Nightly Temperatures in NY vs. SF',
161 ylabel: 'Temperature (F)',
163 showRangeSelector: true,
164 rangeSelectorPlotFillColor: 'MediumSlateBlue',
169 g7 = new Dygraph(document.getElementById(
"stepplot"),
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",
181 showRangeSelector: true