Merge
[dygraphs.git] / tests / range-selector.html
CommitLineData
ccd9d7c2
PF
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Temperatures with Range Selector</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 <script type="text/javascript" src="data.js"></script>
16 <style type="text/css">
17 #bordered {
18 border: 1px solid red;
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 <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>
e03f3a93
DV
41 <p>Demo of range selector with stepPlot</p>
42 <div id="stepplot" style="width:800px; height:320px;"></div>
43
ccd9d7c2
PF
44 <script type="text/javascript">
45 g1 = new Dygraph(
46 document.getElementById("noroll"),
47 data_temp,
48 {
49 customBars: true,
50 title: 'Daily Temperatures in New York vs. San Francisco',
51 ylabel: 'Temperature (F)',
52 legend: 'always',
53 labelsDivStyles: { 'textAlign': 'right' },
54 showRangeSelector: true
55 }
56 );
57 g2 = new Dygraph(
58 document.getElementById("roll14"),
59 data_temp,
60 {
61 rollPeriod: 14,
62 showRoller: true,
63 customBars: true,
64 title: 'Daily Temperatures in New York vs. San Francisco',
65 ylabel: 'Temperature (F)',
66 legend: 'always',
67 labelsDivStyles: { 'textAlign': 'right' },
de8f284f 68 xAxisHeight: 14,
ccd9d7c2
PF
69 showRangeSelector: true,
70 rangeSelectorHeight: 30,
71 rangeSelectorPlotStrokeColor: 'yellow',
72 rangeSelectorPlotFillColor: 'lightyellow'
73 }
74 );
28dde896 75 g3 = new Dygraph(
1085dbce
PP
76 document.getElementById("selectcombined"),
77 [
78 [0, 1, 4, 10],
79 [10, 2, 8, 19],
80 [25, 15, 4, 2],
81 [35, 0, 3, 2]
82 ],
83 {
84 title: 'Daily Temperatures in New York vs. San Francisco',
85 ylabel: 'Temperature (F)',
86 showRangeSelector: true,
0a0885d1
DV
87 labels: ['X', 'Y1', 'Y2', 'Y3'],
88 series: {
89 'Y1': { showInRangeSelector: true }
90 }
1085dbce
PP
91 }
92 );
93 g4 = new Dygraph(
28dde896
DE
94 document.getElementById("nochart"),
95 [[0,1],[10,1]],
96 {
97 xAxisHeight: 30,
98 drawXAxis: false,
99 showRangeSelector: true,
8ef9d44d 100 rangeSelectorHeight: 30
28dde896
DE
101 }
102 );
e03f3a93
DV
103 g5 = new Dygraph(document.getElementById("stepplot"),
104 "Date,Idle,Used\n" +
105 "2008-05-07,70,30\n" +
106 "2008-05-08,42,88\n" +
107 "2008-05-09,88,42\n" +
108 "2008-05-10,33,37\n" +
109 "2008-05-11,30,35\n",
110 {
111 stepPlot: true,
112 fillGraph: true,
113 stackedGraph: true,
114 includeZero: true,
115 showRangeSelector: true
116 });
ccd9d7c2
PF
117 </script>
118 </body>
119</html>