Set this for drawCallback
[dygraphs.git] / tests / range-selector.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Temperatures with Range Selector</title>
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 }
16 #dark-background {
17 background-color: #101015;
18 color: white;
19 }
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
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
33 <p>
34 Roll period of 14 timesteps, various custom range selector options.
35 </p>
36 <div id="roll14" style="width:800px; height:320px;"></div>
37 <p>
38 Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
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>
42
43 <p>
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>
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>
52 <p>Demo of range selector with stepPlot</p>
53 <div id="stepplot" style="width:800px; height:320px;"></div>
54
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' },
79 xAxisHeight: 14,
80 showRangeSelector: true,
81 rangeSelectorHeight: 80,
82 rangeSelectorPlotStrokeColor: 'purple',
83 rangeSelectorPlotFillColor: 'black',
84 rangeSelectorBackgroundStrokeColor: 'orange',
85 rangeSelectorBackgroundLineWidth: 4,
86 rangeSelectorPlotLineWidth: 5,
87 rangeSelectorForegroundStrokeColor: 'brown',
88 rangeSelectorForegroundLineWidth: 8,
89 rangeSelectorAlpha: 0.5,
90 rangeSelectorPlotFillGradientColor: 'red'
91 }
92 );
93 g3 = new Dygraph(
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,
105 labels: ['X', 'Y1', 'Y2', 'Y3'],
106 series: {
107 'Y1': { showInRangeSelector: true }
108 }
109 }
110 );
111 g4 = new Dygraph(
112 document.getElementById("nochart"),
113 [[0,1],[10,1]],
114 {
115 xAxisHeight: 30,
116 axes : {
117 x : {
118 drawAxis : false
119 }
120 },
121 showRangeSelector: true,
122 rangeSelectorHeight: 30
123 }
124 );
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"),
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 });
176 </script>
177 </body>
178 </html>