merging addition of range selector secondary gradient color (formerly PR 314) with...
[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>
28 <p>
29 Roll period of 14 timesteps, custom range selector height and plot color.
30 </p>
31 <div id="roll14" style="width:800px; height:320px;"></div>
28dde896 32 <p>
0a0885d1 33 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
34 The default behaviour is to compute the average of <em>all</em> series.
35 </p>
36 <div id="selectcombined" style="width:800px; height:320px;"></div>
37 <p>
28dde896
DE
38 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
39 </p>
40 <div id="nochart" style="width:800px; height:30px;"></div>
79cb28dd 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>
45 </div>
e03f3a93
DV
46 <p>Demo of range selector with stepPlot</p>
47 <div id="stepplot" style="width:800px; height:320px;"></div>
48
ccd9d7c2
PF
49 <script type="text/javascript">
50 g1 = new Dygraph(
51 document.getElementById("noroll"),
52 data_temp,
53 {
54 customBars: true,
55 title: 'Daily Temperatures in New York vs. San Francisco',
56 ylabel: 'Temperature (F)',
57 legend: 'always',
58 labelsDivStyles: { 'textAlign': 'right' },
59 showRangeSelector: true
60 }
61 );
62 g2 = new Dygraph(
63 document.getElementById("roll14"),
64 data_temp,
65 {
66 rollPeriod: 14,
67 showRoller: true,
68 customBars: true,
69 title: 'Daily Temperatures in New York vs. San Francisco',
70 ylabel: 'Temperature (F)',
71 legend: 'always',
72 labelsDivStyles: { 'textAlign': 'right' },
de8f284f 73 xAxisHeight: 14,
ccd9d7c2
PF
74 showRangeSelector: true,
75 rangeSelectorHeight: 30,
76 rangeSelectorPlotStrokeColor: 'yellow',
77 rangeSelectorPlotFillColor: 'lightyellow'
78 }
79 );
28dde896 80 g3 = new Dygraph(
1085dbce
PP
81 document.getElementById("selectcombined"),
82 [
83 [0, 1, 4, 10],
84 [10, 2, 8, 19],
85 [25, 15, 4, 2],
86 [35, 0, 3, 2]
87 ],
88 {
89 title: 'Daily Temperatures in New York vs. San Francisco',
90 ylabel: 'Temperature (F)',
91 showRangeSelector: true,
0a0885d1
DV
92 labels: ['X', 'Y1', 'Y2', 'Y3'],
93 series: {
94 'Y1': { showInRangeSelector: true }
95 }
1085dbce
PP
96 }
97 );
98 g4 = new Dygraph(
28dde896
DE
99 document.getElementById("nochart"),
100 [[0,1],[10,1]],
101 {
102 xAxisHeight: 30,
bfb3e0a4
RK
103 axes : {
104 x : {
105 drawAxis : false
106 }
107 },
28dde896 108 showRangeSelector: true,
8ef9d44d 109 rangeSelectorHeight: 30
28dde896
DE
110 }
111 );
79cb28dd 112 g5 = new Dygraph(
113 document.getElementById("darkbg1"),
114 data_temp,
115 {
116 rollPeriod: 14,
117 showRoller: true,
118 customBars: true,
119 title: 'Nightly Temperatures in NY vs. SF',
120 ylabel: 'Temperature (F)',
121 legend: 'always',
122 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
123 showRangeSelector: true,
124 rangeSelectorPlotFillColor: 'MediumSlateBlue',
125 rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
126 axisLabelColor: 'white',
127 colorValue: 0.9,
128 fillAlpha: 0.4
129 }
130 );
131 g6 = new Dygraph(
132 document.getElementById("darkbg2"),
133 data_temp,
134 {
135 rollPeriod: 14,
136 showRoller: true,
137 customBars: true,
138 title: 'Nightly Temperatures in NY vs. SF',
139 ylabel: 'Temperature (F)',
140 legend: 'always',
141 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
142 showRangeSelector: true,
143 rangeSelectorPlotFillColor: 'MediumSlateBlue',
144 axisLabelColor: 'white',
145 colorValue: 0.9,
146 fillAlpha: 0.4
147 }
148 );
149 g7 = new Dygraph(document.getElementById("stepplot"),
e03f3a93
DV
150 "Date,Idle,Used\n" +
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",
156 {
157 stepPlot: true,
158 fillGraph: true,
159 stackedGraph: true,
160 includeZero: true,
161 showRangeSelector: true
162 });
ccd9d7c2
PF
163 </script>
164 </body>
165</html>