4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>Temperatures with Range Selector
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
12 <script type=
"text/javascript" src=
"data.js"></script>
13 <style type=
"text/css">
15 border:
1px solid red;
18 background-color: #
101015;
21 #darkbg1 .dygraph-axis-label, #darkbg2 .dygraph-axis-label {
24 #noroll .dygraph-legend,
25 #roll14 .dygraph-legend,
26 #darkbg1 .dygraph-legend,
27 #darkbg2 .dygraph-legend {
30 #darkbg1 .dygraph-legend {
31 background-color: #
101015;
33 #darkbg2 .dygraph-legend {
34 background-color: #
101015;
39 <p>Demo of a graph with the range selector.
</p>
43 <div id=
"noroll" style=
"width:800px; height:320px;"></div>
45 <h2 id=
"options">Range selector options
</h2>
46 <p>Here's a view of how the various
<a href=
"../options.html#Range%20Selector">range selector options
</a> affect the display:
</p>
47 <img width=
"954" height=
"354" src=
"range-selector-anatomy.png">
50 Roll period of
14 timesteps, various custom range selector options.
52 <div id=
"roll14" style=
"width:800px; height:320px;"></div>
54 Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
55 The default behaviour is to compute the average of
<em>all
</em> series.
57 <div id=
"selectcombined" style=
"width:800px; height:320px;"></div>
60 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
62 <div id=
"nochart" style=
"width:800px; height:30px;"></div>
63 <div id=
"dark-background">
64 <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.
</p>
65 <div id=
"darkbg1" style=
"width:400px; height:300px;display:inline-block;"></div>
66 <div id=
"darkbg2" style=
"width:400px; height:300px;display:inline-block;"></div>
68 <p>Demo of range selector with stepPlot
</p>
69 <div id=
"stepplot" style=
"width:800px; height:320px;"></div>
71 <script type=
"text/javascript">
73 document.getElementById(
"noroll"),
77 title: 'Daily Temperatures in New York vs. San Francisco',
78 ylabel: 'Temperature (F)',
80 showRangeSelector: true
84 document.getElementById(
"roll14"),
90 title: 'Daily Temperatures in New York vs. San Francisco',
91 ylabel: 'Temperature (F)',
94 showRangeSelector: true,
95 rangeSelectorHeight:
80,
96 rangeSelectorPlotStrokeColor: 'purple',
97 rangeSelectorPlotFillColor: 'black',
98 rangeSelectorBackgroundStrokeColor: 'orange',
99 rangeSelectorBackgroundLineWidth:
4,
100 rangeSelectorPlotLineWidth:
5,
101 rangeSelectorForegroundStrokeColor: 'brown',
102 rangeSelectorForegroundLineWidth:
8,
103 rangeSelectorAlpha:
0.5,
104 rangeSelectorPlotFillGradientColor: 'red'
108 document.getElementById(
"selectcombined"),
116 title: 'Daily Temperatures in New York vs. San Francisco',
117 ylabel: 'Temperature (F)',
118 showRangeSelector: true,
119 labels: ['X', 'Y1', 'Y2', 'Y3'],
121 'Y1': { showInRangeSelector: true }
126 document.getElementById(
"nochart"),
136 showRangeSelector: true,
137 rangeSelectorHeight:
30
141 document.getElementById(
"darkbg1"),
147 title: 'Nightly Temperatures in NY vs. SF',
148 ylabel: 'Temperature (F)',
150 showRangeSelector: true,
151 rangeSelectorPlotFillColor: 'MediumSlateBlue',
152 rangeSelectorPlotFillGradientColor: 'rgba(
123,
104,
238,
0)',
158 document.getElementById(
"darkbg2"),
164 title: 'Nightly Temperatures in NY vs. SF',
165 ylabel: 'Temperature (F)',
167 showRangeSelector: true,
168 rangeSelectorPlotFillColor: 'MediumSlateBlue',
173 g7 = new Dygraph(document.getElementById(
"stepplot"),
175 "2008-05-07,70,30\n" +
176 "2008-05-08,42,88\n" +
177 "2008-05-09,88,42\n" +
178 "2008-05-10,33,37\n" +
179 "2008-05-11,30,35\n",
185 showRangeSelector: true