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, custom range selector height and plot color.
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>
38 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
40 <div id=
"nochart" style=
"width:800px; height:30px;"></div>
41 <div id=
"dark-background">
42 <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.
</p>
43 <div id=
"darkbg1" style=
"width:400px; height:300px;display:inline-block;"></div>
44 <div id=
"darkbg2" style=
"width:400px; height:300px;display:inline-block;"></div>
46 <p>Demo of range selector with stepPlot
</p>
47 <div id=
"stepplot" style=
"width:800px; height:320px;"></div>
49 <script type=
"text/javascript">
51 document.getElementById(
"noroll"),
55 title: 'Daily Temperatures in New York vs. San Francisco',
56 ylabel: 'Temperature (F)',
58 labelsDivStyles: { 'textAlign': 'right' },
59 showRangeSelector: true
63 document.getElementById(
"roll14"),
69 title: 'Daily Temperatures in New York vs. San Francisco',
70 ylabel: 'Temperature (F)',
72 labelsDivStyles: { 'textAlign': 'right' },
74 showRangeSelector: true,
75 rangeSelectorHeight:
30,
76 rangeSelectorPlotStrokeColor: 'yellow',
77 rangeSelectorPlotFillColor: 'lightyellow'
81 document.getElementById(
"selectcombined"),
89 title: 'Daily Temperatures in New York vs. San Francisco',
90 ylabel: 'Temperature (F)',
91 showRangeSelector: true,
92 labels: ['X', 'Y1', 'Y2', 'Y3'],
94 'Y1': { showInRangeSelector: true }
99 document.getElementById(
"nochart"),
108 showRangeSelector: true,
109 rangeSelectorHeight:
30
113 document.getElementById(
"darkbg1"),
119 title: 'Nightly Temperatures in NY vs. SF',
120 ylabel: 'Temperature (F)',
122 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#
101015' },
123 showRangeSelector: true,
124 rangeSelectorPlotFillColor: 'MediumSlateBlue',
125 rangeSelectorPlotFillGradientColor: 'rgba(
123,
104,
238,
0)',
126 axisLabelColor: 'white',
132 document.getElementById(
"darkbg2"),
138 title: 'Nightly Temperatures in NY vs. SF',
139 ylabel: 'Temperature (F)',
141 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#
101015' },
142 showRangeSelector: true,
143 rangeSelectorPlotFillColor: 'MediumSlateBlue',
144 axisLabelColor: 'white',
149 g7 = new Dygraph(document.getElementById(
"stepplot"),
151 "2008-05-07,70,30\n" +
152 "2008-05-08,42,88\n" +
153 "2008-05-09,88,42\n" +
154 "2008-05-10,33,37\n" +
155 "2008-05-11,30,35\n",
161 showRangeSelector: true