Merge pull request #678 from danvk/dygraphs-css
[dygraphs.git] / tests / range-selector.html
CommitLineData
ccd9d7c2
PF
1<!DOCTYPE html>
2<html>
3 <head>
93a5bb4c 4 <link rel="stylesheet" href="../css/dygraph.css">
ccd9d7c2 5 <title>Temperatures with Range Selector</title>
ccd9d7c2
PF
6 <!--
7 For production (minified) code, use:
8 <script type="text/javascript" src="dygraph-combined.js"></script>
9 -->
fbd6834a 10 <script type="text/javascript" src="../dist/dygraph.js"></script>
ccd9d7c2
PF
11
12 <script type="text/javascript" src="data.js"></script>
13 <style type="text/css">
14 #bordered {
15 border: 1px solid red;
16 }
79cb28dd 17 #dark-background {
18 background-color: #101015;
19 color: white;
20 }
93a5bb4c
DV
21 #darkbg1 .dygraph-axis-label, #darkbg2 .dygraph-axis-label {
22 color: white;
23 }
24 #noroll .dygraph-legend,
25 #roll14 .dygraph-legend,
26 #darkbg1 .dygraph-legend,
27 #darkbg2 .dygraph-legend {
28 text-align: right;
29 }
30 #darkbg1 .dygraph-legend {
31 background-color: #101015;
32 }
33 #darkbg2 .dygraph-legend {
34 background-color: #101015;
35 }
ccd9d7c2
PF
36 </style>
37 </head>
38 <body>
39 <p>Demo of a graph with the range selector.</p>
40 <p>
41 No roll period.
42 </p>
43 <div id="noroll" style="width:800px; height:320px;"></div>
2555a4ed
DV
44
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">
48
ccd9d7c2 49 <p>
31a319fe 50 Roll period of 14 timesteps, various custom range selector options.
ccd9d7c2
PF
51 </p>
52 <div id="roll14" style="width:800px; height:320px;"></div>
28dde896 53 <p>
0a0885d1 54 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
55 The default behaviour is to compute the average of <em>all</em> series.
56 </p>
57 <div id="selectcombined" style="width:800px; height:320px;"></div>
2555a4ed 58
1085dbce 59 <p>
28dde896
DE
60 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
61 </p>
62 <div id="nochart" style="width:800px; height:30px;"></div>
79cb28dd 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>
67 </div>
e03f3a93
DV
68 <p>Demo of range selector with stepPlot</p>
69 <div id="stepplot" style="width:800px; height:320px;"></div>
70
ccd9d7c2
PF
71 <script type="text/javascript">
72 g1 = new Dygraph(
73 document.getElementById("noroll"),
74 data_temp,
75 {
76 customBars: true,
77 title: 'Daily Temperatures in New York vs. San Francisco',
78 ylabel: 'Temperature (F)',
79 legend: 'always',
ccd9d7c2
PF
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',
de8f284f 93 xAxisHeight: 14,
ccd9d7c2 94 showRangeSelector: true,
2555a4ed
DV
95 rangeSelectorHeight: 80,
96 rangeSelectorPlotStrokeColor: 'purple',
31a319fe 97 rangeSelectorPlotFillColor: 'black',
2555a4ed 98 rangeSelectorBackgroundStrokeColor: 'orange',
31a319fe 99 rangeSelectorBackgroundLineWidth: 4,
2555a4ed 100 rangeSelectorPlotLineWidth: 5,
31a319fe 101 rangeSelectorForegroundStrokeColor: 'brown',
2555a4ed
DV
102 rangeSelectorForegroundLineWidth: 8,
103 rangeSelectorAlpha: 0.5,
104 rangeSelectorPlotFillGradientColor: 'red'
ccd9d7c2
PF
105 }
106 );
28dde896 107 g3 = new Dygraph(
1085dbce
PP
108 document.getElementById("selectcombined"),
109 [
110 [0, 1, 4, 10],
111 [10, 2, 8, 19],
112 [25, 15, 4, 2],
113 [35, 0, 3, 2]
114 ],
115 {
116 title: 'Daily Temperatures in New York vs. San Francisco',
117 ylabel: 'Temperature (F)',
118 showRangeSelector: true,
0a0885d1
DV
119 labels: ['X', 'Y1', 'Y2', 'Y3'],
120 series: {
121 'Y1': { showInRangeSelector: true }
122 }
1085dbce
PP
123 }
124 );
125 g4 = new Dygraph(
28dde896
DE
126 document.getElementById("nochart"),
127 [[0,1],[10,1]],
128 {
129 xAxisHeight: 30,
bfb3e0a4
RK
130 axes : {
131 x : {
132 drawAxis : false
133 }
134 },
2b66af4f 135 labels: ['X', 'Y'],
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',
79cb28dd 150 showRangeSelector: true,
151 rangeSelectorPlotFillColor: 'MediumSlateBlue',
152 rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
79cb28dd 153 colorValue: 0.9,
154 fillAlpha: 0.4
155 }
156 );
157 g6 = new Dygraph(
158 document.getElementById("darkbg2"),
159 data_temp,
160 {
161 rollPeriod: 14,
162 showRoller: true,
163 customBars: true,
164 title: 'Nightly Temperatures in NY vs. SF',
165 ylabel: 'Temperature (F)',
166 legend: 'always',
79cb28dd 167 showRangeSelector: true,
168 rangeSelectorPlotFillColor: 'MediumSlateBlue',
79cb28dd 169 colorValue: 0.9,
170 fillAlpha: 0.4
171 }
172 );
173 g7 = new Dygraph(document.getElementById("stepplot"),
e03f3a93
DV
174 "Date,Idle,Used\n" +
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",
180 {
181 stepPlot: true,
182 fillGraph: true,
183 stackedGraph: true,
184 includeZero: true,
185 showRangeSelector: true
186 });
ccd9d7c2
PF
187 </script>
188 </body>
189</html>