Merge pull request #504 from danvk/death-to-ie
[dygraphs.git] / gallery / range-selector.js
CommitLineData
e88a95b4
DV
1/*global Gallery,Dygraph,data */
2/*global data_temp */
72c8bf99
RK
3Gallery.register(
4 'range-selector',
5 {
6 name: 'Range Selector',
7 title: 'Demo of the Range Selector',
8 setup: function(parent) {
605b6119
RK
9 parent.innerHTML = [
10 "<p>No roll period.</p>",
10eef8e9 11 "<div id='noroll' style='width:600px; height:300px;'></div>",
605b6119
RK
12 "",
13 "<p>Roll period of 14 timesteps, custom range selector height and plot color.</p>",
10eef8e9 14 "<div id='roll14' style='width:600px; height:300px;'></div>"].join("\n");
72c8bf99
RK
15 },
16 run: function() {
e88a95b4 17 new Dygraph(
72c8bf99
RK
18 document.getElementById("noroll"),
19 data_temp,
20 {
21 customBars: true,
22 title: 'Daily Temperatures in New York vs. San Francisco',
23 ylabel: 'Temperature (F)',
24 legend: 'always',
25 labelsDivStyles: { 'textAlign': 'right' },
26 showRangeSelector: true
27 }
28 );
e88a95b4 29 new Dygraph(
72c8bf99
RK
30 document.getElementById("roll14"),
31 data_temp,
32 {
33 rollPeriod: 14,
34 showRoller: true,
35 customBars: true,
36 title: 'Daily Temperatures in New York vs. San Francisco',
37 ylabel: 'Temperature (F)',
38 legend: 'always',
39 labelsDivStyles: { 'textAlign': 'right' },
40 showRangeSelector: true,
41 rangeSelectorHeight: 30,
42 rangeSelectorPlotStrokeColor: 'yellow',
43 rangeSelectorPlotFillColor: 'lightyellow'
44 });
45 }
46 });