4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Temperatures with Range Selector
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
10 For production (minified) code, use:
11 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
13 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
15 <script type=
"text/javascript" src=
"data.js"></script>
16 <style type=
"text/css">
18 border:
1px solid red;
23 <p>Demo of a graph with the range selector.
</p>
27 <div id=
"noroll" style=
"width:800px; height:320px;"></div>
29 Roll period of
14 timesteps, custom range selector height and plot color.
31 <div id=
"roll14" style=
"width:800px; height:320px;"></div>
33 Use the average of a specific subset of series to draw the mini plot (only the first series is used in this test).
34 The default behaviour is to compute the average of
<em>all
</em> series.
36 <div id=
"selectcombined" style=
"width:800px; height:320px;"></div>
38 Demo of range selecor without the chart. (interesting if multiple charts should be synced with one range selector).
40 <div id=
"nochart" style=
"width:800px; height:30px;"></div>
41 <p>Demo of range selector with stepPlot
</p>
42 <div id=
"stepplot" style=
"width:800px; height:320px;"></div>
44 <script type=
"text/javascript">
46 document.getElementById(
"noroll"),
50 title: 'Daily Temperatures in New York vs. San Francisco',
51 ylabel: 'Temperature (F)',
53 labelsDivStyles: { 'textAlign': 'right' },
54 showRangeSelector: true
58 document.getElementById(
"roll14"),
64 title: 'Daily Temperatures in New York vs. San Francisco',
65 ylabel: 'Temperature (F)',
67 labelsDivStyles: { 'textAlign': 'right' },
69 showRangeSelector: true,
70 rangeSelectorHeight:
30,
71 rangeSelectorPlotStrokeColor: 'yellow',
72 rangeSelectorPlotFillColor: 'lightyellow'
76 document.getElementById(
"selectcombined"),
84 title: 'Daily Temperatures in New York vs. San Francisco',
85 ylabel: 'Temperature (F)',
86 showRangeSelector: true,
87 labels: ['X', 'Y1', 'Y2', 'Y3'],
89 'Y1': { showInRangeSelector: true }
94 document.getElementById(
"nochart"),
99 showRangeSelector: true,
100 rangeSelectorHeight:
30
103 g5 = new Dygraph(document.getElementById(
"stepplot"),
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",
115 showRangeSelector: true