Set this for drawCallback
[dygraphs.git] / tests / range-selector.html
CommitLineData
ccd9d7c2
PF
1<!DOCTYPE html>
2<html>
3 <head>
ccd9d7c2 4 <title>Temperatures with Range Selector</title>
ccd9d7c2
PF
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
9 <script type="text/javascript" src="../dygraph-dev.js"></script>
10
11 <script type="text/javascript" src="data.js"></script>
12 <style type="text/css">
13 #bordered {
14 border: 1px solid red;
15 }
79cb28dd 16 #dark-background {
17 background-color: #101015;
18 color: white;
19 }
ccd9d7c2
PF
20 </style>
21 </head>
22 <body>
23 <p>Demo of a graph with the range selector.</p>
24 <p>
25 No roll period.
26 </p>
27 <div id="noroll" style="width:800px; height:320px;"></div>
2555a4ed
DV
28
29 <h2 id="options">Range selector options</h2>
30 <p>Here's a view of how the various <a href="../options.html#Range%20Selector">range selector options</a> affect the display:</p>
31 <img width="954" height="354" src="range-selector-anatomy.png">
32
ccd9d7c2 33 <p>
31a319fe 34 Roll period of 14 timesteps, various custom range selector options.
ccd9d7c2
PF
35 </p>
36 <div id="roll14" style="width:800px; height:320px;"></div>
28dde896 37 <p>
0a0885d1 38 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
39 The default behaviour is to compute the average of <em>all</em> series.
40 </p>
41 <div id="selectcombined" style="width:800px; height:320px;"></div>
2555a4ed 42
1085dbce 43 <p>
28dde896
DE
44 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
45 </p>
46 <div id="nochart" style="width:800px; height:30px;"></div>
79cb28dd 47 <div id="dark-background">
48 <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p>
49 <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div>
50 <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div>
51 </div>
e03f3a93
DV
52 <p>Demo of range selector with stepPlot</p>
53 <div id="stepplot" style="width:800px; height:320px;"></div>
54
ccd9d7c2
PF
55 <script type="text/javascript">
56 g1 = new Dygraph(
57 document.getElementById("noroll"),
58 data_temp,
59 {
60 customBars: true,
61 title: 'Daily Temperatures in New York vs. San Francisco',
62 ylabel: 'Temperature (F)',
63 legend: 'always',
64 labelsDivStyles: { 'textAlign': 'right' },
65 showRangeSelector: true
66 }
67 );
68 g2 = new Dygraph(
69 document.getElementById("roll14"),
70 data_temp,
71 {
72 rollPeriod: 14,
73 showRoller: true,
74 customBars: true,
75 title: 'Daily Temperatures in New York vs. San Francisco',
76 ylabel: 'Temperature (F)',
77 legend: 'always',
78 labelsDivStyles: { 'textAlign': 'right' },
de8f284f 79 xAxisHeight: 14,
ccd9d7c2 80 showRangeSelector: true,
2555a4ed
DV
81 rangeSelectorHeight: 80,
82 rangeSelectorPlotStrokeColor: 'purple',
31a319fe 83 rangeSelectorPlotFillColor: 'black',
2555a4ed 84 rangeSelectorBackgroundStrokeColor: 'orange',
31a319fe 85 rangeSelectorBackgroundLineWidth: 4,
2555a4ed 86 rangeSelectorPlotLineWidth: 5,
31a319fe 87 rangeSelectorForegroundStrokeColor: 'brown',
2555a4ed
DV
88 rangeSelectorForegroundLineWidth: 8,
89 rangeSelectorAlpha: 0.5,
90 rangeSelectorPlotFillGradientColor: 'red'
ccd9d7c2
PF
91 }
92 );
28dde896 93 g3 = new Dygraph(
1085dbce
PP
94 document.getElementById("selectcombined"),
95 [
96 [0, 1, 4, 10],
97 [10, 2, 8, 19],
98 [25, 15, 4, 2],
99 [35, 0, 3, 2]
100 ],
101 {
102 title: 'Daily Temperatures in New York vs. San Francisco',
103 ylabel: 'Temperature (F)',
104 showRangeSelector: true,
0a0885d1
DV
105 labels: ['X', 'Y1', 'Y2', 'Y3'],
106 series: {
107 'Y1': { showInRangeSelector: true }
108 }
1085dbce
PP
109 }
110 );
111 g4 = new Dygraph(
28dde896
DE
112 document.getElementById("nochart"),
113 [[0,1],[10,1]],
114 {
115 xAxisHeight: 30,
bfb3e0a4
RK
116 axes : {
117 x : {
118 drawAxis : false
119 }
120 },
28dde896 121 showRangeSelector: true,
8ef9d44d 122 rangeSelectorHeight: 30
28dde896
DE
123 }
124 );
79cb28dd 125 g5 = new Dygraph(
126 document.getElementById("darkbg1"),
127 data_temp,
128 {
129 rollPeriod: 14,
130 showRoller: true,
131 customBars: true,
132 title: 'Nightly Temperatures in NY vs. SF',
133 ylabel: 'Temperature (F)',
134 legend: 'always',
135 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
136 showRangeSelector: true,
137 rangeSelectorPlotFillColor: 'MediumSlateBlue',
138 rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
139 axisLabelColor: 'white',
140 colorValue: 0.9,
141 fillAlpha: 0.4
142 }
143 );
144 g6 = new Dygraph(
145 document.getElementById("darkbg2"),
146 data_temp,
147 {
148 rollPeriod: 14,
149 showRoller: true,
150 customBars: true,
151 title: 'Nightly Temperatures in NY vs. SF',
152 ylabel: 'Temperature (F)',
153 legend: 'always',
154 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
155 showRangeSelector: true,
156 rangeSelectorPlotFillColor: 'MediumSlateBlue',
157 axisLabelColor: 'white',
158 colorValue: 0.9,
159 fillAlpha: 0.4
160 }
161 );
162 g7 = new Dygraph(document.getElementById("stepplot"),
e03f3a93
DV
163 "Date,Idle,Used\n" +
164 "2008-05-07,70,30\n" +
165 "2008-05-08,42,88\n" +
166 "2008-05-09,88,42\n" +
167 "2008-05-10,33,37\n" +
168 "2008-05-11,30,35\n",
169 {
170 stepPlot: true,
171 fillGraph: true,
172 stackedGraph: true,
173 includeZero: true,
174 showRangeSelector: true
175 });
ccd9d7c2
PF
176 </script>
177 </body>
178</html>