4 <title>Temperatures with Range Selector
</title>
6 For production (minified) code, use:
7 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
9 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
11 <script type=
"text/javascript" src=
"data.js"></script>
12 <style type=
"text/css">
14 border:
1px solid red;
17 background-color: #
101015;
23 <p>Demo of a graph with the range selector.
</p>
27 <div id=
"noroll" style=
"width:800px; height:320px;"></div>
29 Roll period of
14 timesteps, various custom range selector options.
31 <div id=
"roll14" style=
"width:800px; height:320px;"></div>
33 Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
34 The default behaviour is to compute the average of
<em>all
</em> series.
36 <div id=
"selectcombined" style=
"width:800px; height:320px;"></div>
37 <h2>Range selector options
</h2>
38 <h3>Range selector background
</h3>
40 <li>rangeSelectorBackgroundStrokeColor
</li>
41 <li>rangeSelectorBackgroundLineWidth
</li>
43 <img src=
"range-selector/range-selector-background.png">
44 <h3>Range selector foreground
</h3>
46 <li>rangeSelectorForegroundStrokeColor
</li>
47 <li>rangeSelectorForegroundLineWidth
</li>
49 <img src=
"range-selector/range-selector-foreground.png">
50 <h3>Range selector plot
</h3>
52 <li>rangeSelectorAlpha
</li>
53 <li>rangeSelectorPlotFillGradientColor
</li>
54 <li>rangeSelectorPlotFillColor
</li>
55 <li>rangeSelectorPlotStrokeColor
</li>
57 <img src=
"range-selector/range-selector-plot.png">
59 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
61 <div id=
"nochart" style=
"width:800px; height:30px;"></div>
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>
67 <p>Demo of range selector with stepPlot
</p>
68 <div id=
"stepplot" style=
"width:800px; height:320px;"></div>
70 <script type=
"text/javascript">
72 document.getElementById(
"noroll"),
76 title: 'Daily Temperatures in New York vs. San Francisco',
77 ylabel: 'Temperature (F)',
79 labelsDivStyles: { 'textAlign': 'right' },
80 showRangeSelector: true
84 document.getElementById(
"roll14"),
90 title: 'Daily Temperatures in New York vs. San Francisco',
91 ylabel: 'Temperature (F)',
93 labelsDivStyles: { 'textAlign': 'right' },
95 showRangeSelector: true,
96 rangeSelectorHeight:
30,
97 rangeSelectorPlotStrokeColor: 'yellow',
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'
109 document.getElementById(
"selectcombined"),
117 title: 'Daily Temperatures in New York vs. San Francisco',
118 ylabel: 'Temperature (F)',
119 showRangeSelector: true,
120 labels: ['X', 'Y1', 'Y2', 'Y3'],
122 'Y1': { showInRangeSelector: true }
127 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 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#
101015' },
151 showRangeSelector: true,
152 rangeSelectorPlotFillColor: 'MediumSlateBlue',
153 rangeSelectorPlotFillGradientColor: 'rgba(
123,
104,
238,
0)',
154 axisLabelColor: 'white',
160 document.getElementById(
"darkbg2"),
166 title: 'Nightly Temperatures in NY vs. SF',
167 ylabel: 'Temperature (F)',
169 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#
101015' },
170 showRangeSelector: true,
171 rangeSelectorPlotFillColor: 'MediumSlateBlue',
172 axisLabelColor: 'white',
177 g7 = new Dygraph(document.getElementById(
"stepplot"),
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",
189 showRangeSelector: true