Use CSS for styling
[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>",
79cb28dd 14 "<div id='roll14' style='width:600px; height:300px;'></div>",
15 "",
16 "<div style='background-color: #101015; color: white'>",
17 "<p>Dark background, custom range selector gradient color.</p>",
18 "<div id='darkbg' style='width:600px; height:300px;'></div>",
19 "</div>"].join("\n");
72c8bf99
RK
20 },
21 run: function() {
e88a95b4 22 new Dygraph(
72c8bf99
RK
23 document.getElementById("noroll"),
24 data_temp,
25 {
26 customBars: true,
27 title: 'Daily Temperatures in New York vs. San Francisco',
28 ylabel: 'Temperature (F)',
29 legend: 'always',
30 labelsDivStyles: { 'textAlign': 'right' },
31 showRangeSelector: true
32 }
33 );
e88a95b4 34 new Dygraph(
72c8bf99
RK
35 document.getElementById("roll14"),
36 data_temp,
37 {
38 rollPeriod: 14,
39 showRoller: true,
40 customBars: true,
41 title: 'Daily Temperatures in New York vs. San Francisco',
42 ylabel: 'Temperature (F)',
43 legend: 'always',
44 labelsDivStyles: { 'textAlign': 'right' },
45 showRangeSelector: true,
46 rangeSelectorHeight: 30,
47 rangeSelectorPlotStrokeColor: 'yellow',
48 rangeSelectorPlotFillColor: 'lightyellow'
79cb28dd 49 }
50 );
51 new Dygraph(
52 document.getElementById("darkbg"),
53 data_temp,
54 {
55 rollPeriod: 14,
56 showRoller: true,
57 customBars: true,
58 title: 'Nightly Temperatures in New York vs. San Francisco',
59 ylabel: 'Temperature (F)',
60 legend: 'always',
61 labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' },
62 showRangeSelector: true,
63 rangeSelectorPlotFillColor: 'MediumSlateBlue',
64 rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)',
65 axisLabelColor: 'white',
66 colorValue: 0.9,
67 fillAlpha: 0.4
68 }
69 );
72c8bf99
RK
70 }
71 });