Commit | Line | Data |
---|---|---|
ccd9d7c2 PF |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
ccd9d7c2 | 4 | <title>Temperatures with Range Selector</title> |
ccd9d7c2 PF |
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 | } | |
79cb28dd | 16 | #dark-background { |
17 | background-color: #101015; | |
18 | color: white; | |
19 | } | |
ccd9d7c2 PF |
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> | |
31a319fe | 29 | Roll period of 14 timesteps, various custom range selector options. |
ccd9d7c2 PF |
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> | |
79cb28dd | 41 | <div id="dark-background"> |
42 | <p>Demo of range selector on dark background, with (left) and without (right) custom range selector gradient color.</p> | |
43 | <div id="darkbg1" style="width:400px; height:300px;display:inline-block;"></div> | |
44 | <div id="darkbg2" style="width:400px; height:300px;display:inline-block;"></div> | |
45 | </div> | |
e03f3a93 DV |
46 | <p>Demo of range selector with stepPlot</p> |
47 | <div id="stepplot" style="width:800px; height:320px;"></div> | |
48 | ||
ccd9d7c2 PF |
49 | <script type="text/javascript"> |
50 | g1 = new Dygraph( | |
51 | document.getElementById("noroll"), | |
52 | data_temp, | |
53 | { | |
54 | customBars: true, | |
55 | title: 'Daily Temperatures in New York vs. San Francisco', | |
56 | ylabel: 'Temperature (F)', | |
57 | legend: 'always', | |
58 | labelsDivStyles: { 'textAlign': 'right' }, | |
59 | showRangeSelector: true | |
60 | } | |
61 | ); | |
62 | g2 = new Dygraph( | |
63 | document.getElementById("roll14"), | |
64 | data_temp, | |
65 | { | |
66 | rollPeriod: 14, | |
67 | showRoller: true, | |
68 | customBars: true, | |
69 | title: 'Daily Temperatures in New York vs. San Francisco', | |
70 | ylabel: 'Temperature (F)', | |
71 | legend: 'always', | |
72 | labelsDivStyles: { 'textAlign': 'right' }, | |
de8f284f | 73 | xAxisHeight: 14, |
ccd9d7c2 PF |
74 | showRangeSelector: true, |
75 | rangeSelectorHeight: 30, | |
76 | rangeSelectorPlotStrokeColor: 'yellow', | |
31a319fe | 77 | rangeSelectorPlotFillColor: 'black', |
78 | rangeSelectorBackgroundStrokeColor: 'lightyellow', | |
79 | rangeSelectorBackgroundLineWidth: 4, | |
80 | rangeSelectorPlotLineWidth: 1.5, | |
81 | rangeSelectorForegroundStrokeColor: 'brown', | |
82 | rangeSelectorForegroundLineWidth: 2, | |
83 | rangeSelectorAlpha: 1, | |
84 | rangeSelectorPlotFillGradientColor: 'yellow' | |
ccd9d7c2 PF |
85 | } |
86 | ); | |
28dde896 | 87 | g3 = new Dygraph( |
1085dbce PP |
88 | document.getElementById("selectcombined"), |
89 | [ | |
90 | [0, 1, 4, 10], | |
91 | [10, 2, 8, 19], | |
92 | [25, 15, 4, 2], | |
93 | [35, 0, 3, 2] | |
94 | ], | |
95 | { | |
96 | title: 'Daily Temperatures in New York vs. San Francisco', | |
97 | ylabel: 'Temperature (F)', | |
98 | showRangeSelector: true, | |
0a0885d1 DV |
99 | labels: ['X', 'Y1', 'Y2', 'Y3'], |
100 | series: { | |
101 | 'Y1': { showInRangeSelector: true } | |
102 | } | |
1085dbce PP |
103 | } |
104 | ); | |
105 | g4 = new Dygraph( | |
28dde896 DE |
106 | document.getElementById("nochart"), |
107 | [[0,1],[10,1]], | |
108 | { | |
109 | xAxisHeight: 30, | |
bfb3e0a4 RK |
110 | axes : { |
111 | x : { | |
112 | drawAxis : false | |
113 | } | |
114 | }, | |
28dde896 | 115 | showRangeSelector: true, |
8ef9d44d | 116 | rangeSelectorHeight: 30 |
28dde896 DE |
117 | } |
118 | ); | |
79cb28dd | 119 | g5 = new Dygraph( |
120 | document.getElementById("darkbg1"), | |
121 | data_temp, | |
122 | { | |
123 | rollPeriod: 14, | |
124 | showRoller: true, | |
125 | customBars: true, | |
126 | title: 'Nightly Temperatures in NY vs. SF', | |
127 | ylabel: 'Temperature (F)', | |
128 | legend: 'always', | |
129 | labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' }, | |
130 | showRangeSelector: true, | |
131 | rangeSelectorPlotFillColor: 'MediumSlateBlue', | |
132 | rangeSelectorPlotFillGradientColor: 'rgba(123, 104, 238, 0)', | |
133 | axisLabelColor: 'white', | |
134 | colorValue: 0.9, | |
135 | fillAlpha: 0.4 | |
136 | } | |
137 | ); | |
138 | g6 = new Dygraph( | |
139 | document.getElementById("darkbg2"), | |
140 | data_temp, | |
141 | { | |
142 | rollPeriod: 14, | |
143 | showRoller: true, | |
144 | customBars: true, | |
145 | title: 'Nightly Temperatures in NY vs. SF', | |
146 | ylabel: 'Temperature (F)', | |
147 | legend: 'always', | |
148 | labelsDivStyles: { 'textAlign': 'right', 'backgroundColor': '#101015' }, | |
149 | showRangeSelector: true, | |
150 | rangeSelectorPlotFillColor: 'MediumSlateBlue', | |
151 | axisLabelColor: 'white', | |
152 | colorValue: 0.9, | |
153 | fillAlpha: 0.4 | |
154 | } | |
155 | ); | |
156 | g7 = new Dygraph(document.getElementById("stepplot"), | |
e03f3a93 DV |
157 | "Date,Idle,Used\n" + |
158 | "2008-05-07,70,30\n" + | |
159 | "2008-05-08,42,88\n" + | |
160 | "2008-05-09,88,42\n" + | |
161 | "2008-05-10,33,37\n" + | |
162 | "2008-05-11,30,35\n", | |
163 | { | |
164 | stepPlot: true, | |
165 | fillGraph: true, | |
166 | stackedGraph: true, | |
167 | includeZero: true, | |
168 | showRangeSelector: true | |
169 | }); | |
ccd9d7c2 PF |
170 | </script> |
171 | </body> | |
172 | </html> |