Showing
1 changed file
with
367 additions
and
4 deletions
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | <head> | 3 | <head> |
4 | - <title><%= title %></title> | 4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 | - <link rel='stylesheet' href='/stylesheets/style.css' /> | 5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
6 | + <title>Highcharts Example</title> | ||
7 | + | ||
8 | + <style type="text/css"></style> | ||
6 | </head> | 9 | </head> |
7 | <body> | 10 | <body> |
8 | - <h1><%= title %></h1> | 11 | + <script src="../code/highcharts.js"></script> |
9 | - <p>Welcome to <%= title %></p> | 12 | + <script src="../code/modules/exporting.js"></script> |
13 | + <script src="../code/modules/export-data.js"></script> | ||
14 | + | ||
15 | + <div | ||
16 | + id="container1" | ||
17 | + style="width:1260px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
19 | + | ||
20 | +<div style="width:1275px; margin:0 auto;"> | ||
21 | + <div style="display: inline-block;"> | ||
22 | + <div | ||
23 | + id="container2" | ||
24 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
25 | + ></div> | ||
26 | + </div> | ||
27 | + <div style="display: inline-block;"> | ||
28 | + <div | ||
29 | + id="container3" | ||
30 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
31 | + ></div> | ||
32 | + </div> | ||
33 | + | ||
34 | + <div style="display: inline-block;"> | ||
35 | + <div | ||
36 | + id="container4" | ||
37 | + style="width:400px; height: 300px; padding:0; margin-left:0px;" | ||
38 | + ></div> | ||
39 | + </div> | ||
40 | + | ||
41 | +</div> | ||
42 | + | ||
43 | + <script type="text/javascript"> | ||
44 | + Highcharts.chart("container1", { | ||
45 | + chart: { | ||
46 | + type: "areaspline", | ||
47 | + animation: Highcharts.svg, // don't animate in old IE | ||
48 | + marginRight: 10, | ||
49 | + events: { | ||
50 | + load: function() { | ||
51 | + // set up the updating of the chart each second | ||
52 | + var series = this.series[0]; | ||
53 | + setInterval(function() { | ||
54 | + var x = new Date().getTime(), // 현재 시간 | ||
55 | + y = 0.7 //여기에 새로 넣을 값 | ||
56 | + series.addPoint([x, y], true, true); | ||
57 | + }, 1000); //1000=1초 -> 1분=60000 | ||
58 | + } | ||
59 | + } | ||
60 | + }, | ||
61 | + | ||
62 | + time: { | ||
63 | + useUTC: false | ||
64 | + }, | ||
65 | + | ||
66 | + title: { | ||
67 | + text: "실시간 사망률" | ||
68 | + }, | ||
69 | + xAxis: { | ||
70 | + type: "datetime", | ||
71 | + tickPixelInterval: 150 | ||
72 | + }, | ||
73 | + yAxis: { | ||
74 | + title: { | ||
75 | + text: "Value" | ||
76 | + }, | ||
77 | + plotLines: [ | ||
78 | + { | ||
79 | + value: 0, | ||
80 | + width: 1, | ||
81 | + color: "#808080" | ||
82 | + } | ||
83 | + ] | ||
84 | + }, | ||
85 | + tooltip: { | ||
86 | + headerFormat: "<b>{series.name}</b><br/>", | ||
87 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
88 | + }, | ||
89 | + legend: { | ||
90 | + //enabled: false | ||
91 | + layout: "vertical", | ||
92 | + align: "left", | ||
93 | + verticalAlign: "top", | ||
94 | + x: 120, | ||
95 | + y: 70, | ||
96 | + floating: true, | ||
97 | + borderWidth: 1, | ||
98 | + backgroundColor: | ||
99 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
100 | + "#FFFFFF" | ||
101 | + }, | ||
102 | + exporting: { | ||
103 | + enabled: false | ||
104 | + }, | ||
105 | + series: [ | ||
106 | + { | ||
107 | + name: "사망률(%)", | ||
108 | + data: (function() { | ||
109 | + // generate an array of random data | ||
110 | + var data = [], | ||
111 | + time = new Date().getTime(), | ||
112 | + i; | ||
113 | + | ||
114 | + for (i = -19; i <= 0; i += 1) { | ||
115 | + data.push({ | ||
116 | + x: time + i * 1000, | ||
117 | + y: 0 | ||
118 | + }); | ||
119 | + } | ||
120 | + return data; | ||
121 | + })() | ||
122 | + } | ||
123 | + ] | ||
124 | + }); | ||
125 | + | ||
126 | + Highcharts.chart("container2", { | ||
127 | + chart: { | ||
128 | + type: "spline", | ||
129 | + animation: Highcharts.svg, // don't animate in old IE | ||
130 | + marginRight: 10, | ||
131 | + events: { | ||
132 | + load: function() { | ||
133 | + // set up the updating of the chart each second | ||
134 | + var series = this.series[0]; | ||
135 | + setInterval(function() { | ||
136 | + var x = new Date().getTime(), // 현재 시간 | ||
137 | + y = Math.random(); // | ||
138 | + series.addPoint([x, y], true, true); | ||
139 | + }, 3000); //1000=1초 | ||
140 | + } | ||
141 | + } | ||
142 | + }, | ||
143 | + | ||
144 | + time: { | ||
145 | + useUTC: false | ||
146 | + }, | ||
147 | + | ||
148 | + title: { | ||
149 | + text: "실시간 사망률" | ||
150 | + }, | ||
151 | + xAxis: { | ||
152 | + type: "datetime", | ||
153 | + tickPixelInterval: 150 | ||
154 | + }, | ||
155 | + yAxis: { | ||
156 | + title: { | ||
157 | + text: "Value" | ||
158 | + }, | ||
159 | + plotLines: [ | ||
160 | + { | ||
161 | + value: 0, | ||
162 | + width: 1, | ||
163 | + color: "#808080" | ||
164 | + } | ||
165 | + ] | ||
166 | + }, | ||
167 | + tooltip: { | ||
168 | + headerFormat: "<b>{series.name}</b><br/>", | ||
169 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
170 | + }, | ||
171 | + legend: { | ||
172 | + //enabled: false | ||
173 | + layout: "vertical", | ||
174 | + align: "left", | ||
175 | + verticalAlign: "top", | ||
176 | + x: 120, | ||
177 | + y: 70, | ||
178 | + floating: true, | ||
179 | + borderWidth: 1, | ||
180 | + backgroundColor: | ||
181 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
182 | + "#FFFFFF" | ||
183 | + }, | ||
184 | + exporting: { | ||
185 | + enabled: false | ||
186 | + }, | ||
187 | + series: [ | ||
188 | + { | ||
189 | + name: "사망률(%)", | ||
190 | + data: (function() { | ||
191 | + // generate an array of random data | ||
192 | + var data = [], | ||
193 | + time = new Date().getTime(), | ||
194 | + i; | ||
195 | + | ||
196 | + for (i = -19; i <= 0; i += 1) { | ||
197 | + data.push({ | ||
198 | + x: time + i * 3000, | ||
199 | + y: 0 | ||
200 | + }); | ||
201 | + } | ||
202 | + return data; | ||
203 | + })() | ||
204 | + } | ||
205 | + ] | ||
206 | + }); | ||
207 | + | ||
208 | + Highcharts.chart("container3", { | ||
209 | + chart: { | ||
210 | + type: "spline", | ||
211 | + animation: Highcharts.svg, // don't animate in old IE | ||
212 | + marginRight: 10, | ||
213 | + events: { | ||
214 | + load: function() { | ||
215 | + // set up the updating of the chart each second | ||
216 | + var series = this.series[0]; | ||
217 | + setInterval(function() { | ||
218 | + var x = new Date().getTime(), // 현재 시간 | ||
219 | + y = Math.random(); // | ||
220 | + series.addPoint([x, y], true, true); | ||
221 | + }, 3000); //1000=1초 | ||
222 | + } | ||
223 | + } | ||
224 | + }, | ||
225 | + | ||
226 | + time: { | ||
227 | + useUTC: false | ||
228 | + }, | ||
229 | + | ||
230 | + title: { | ||
231 | + text: "실시간 사망률" | ||
232 | + }, | ||
233 | + xAxis: { | ||
234 | + type: "datetime", | ||
235 | + tickPixelInterval: 150 | ||
236 | + }, | ||
237 | + yAxis: { | ||
238 | + title: { | ||
239 | + text: "Value" | ||
240 | + }, | ||
241 | + plotLines: [ | ||
242 | + { | ||
243 | + value: 0, | ||
244 | + width: 1, | ||
245 | + color: "#808080" | ||
246 | + } | ||
247 | + ] | ||
248 | + }, | ||
249 | + tooltip: { | ||
250 | + headerFormat: "<b>{series.name}</b><br/>", | ||
251 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
252 | + }, | ||
253 | + legend: { | ||
254 | + //enabled: false | ||
255 | + layout: "vertical", | ||
256 | + align: "left", | ||
257 | + verticalAlign: "top", | ||
258 | + x: 120, | ||
259 | + y: 70, | ||
260 | + floating: true, | ||
261 | + borderWidth: 1, | ||
262 | + backgroundColor: | ||
263 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
264 | + "#FFFFFF" | ||
265 | + }, | ||
266 | + exporting: { | ||
267 | + enabled: false | ||
268 | + }, | ||
269 | + series: [ | ||
270 | + { | ||
271 | + name: "사망률(%)", | ||
272 | + data: (function() { | ||
273 | + // generate an array of random data | ||
274 | + var data = [], | ||
275 | + time = new Date().getTime(), | ||
276 | + i; | ||
277 | + | ||
278 | + for (i = -19; i <= 0; i += 1) { | ||
279 | + data.push({ | ||
280 | + x: time + i * 3000, | ||
281 | + y: 0 | ||
282 | + }); | ||
283 | + } | ||
284 | + return data; | ||
285 | + })() | ||
286 | + } | ||
287 | + ] | ||
288 | + }); | ||
289 | + | ||
290 | + Highcharts.chart("container4", { | ||
291 | + chart: { | ||
292 | + type: "spline", | ||
293 | + animation: Highcharts.svg, // don't animate in old IE | ||
294 | + marginRight: 10, | ||
295 | + events: { | ||
296 | + load: function() { | ||
297 | + // set up the updating of the chart each second | ||
298 | + var series = this.series[0]; | ||
299 | + setInterval(function() { | ||
300 | + var x = new Date().getTime(), // 현재 시간 | ||
301 | + y = Math.random(); // | ||
302 | + series.addPoint([x, y], true, true); | ||
303 | + }, 3000); //1000=1초 | ||
304 | + } | ||
305 | + } | ||
306 | + }, | ||
307 | + | ||
308 | + time: { | ||
309 | + useUTC: false | ||
310 | + }, | ||
311 | + | ||
312 | + title: { | ||
313 | + text: "실시간 사망률" | ||
314 | + }, | ||
315 | + xAxis: { | ||
316 | + type: "datetime", | ||
317 | + tickPixelInterval: 150 | ||
318 | + }, | ||
319 | + yAxis: { | ||
320 | + title: { | ||
321 | + text: "Value" | ||
322 | + }, | ||
323 | + plotLines: [ | ||
324 | + { | ||
325 | + value: 0, | ||
326 | + width: 1, | ||
327 | + color: "#808080" | ||
328 | + } | ||
329 | + ] | ||
330 | + }, | ||
331 | + tooltip: { | ||
332 | + headerFormat: "<b>{series.name}</b><br/>", | ||
333 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
334 | + }, | ||
335 | + legend: { | ||
336 | + //enabled: false | ||
337 | + layout: "vertical", | ||
338 | + align: "left", | ||
339 | + verticalAlign: "top", | ||
340 | + x: 120, | ||
341 | + y: 70, | ||
342 | + floating: true, | ||
343 | + borderWidth: 1, | ||
344 | + backgroundColor: | ||
345 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
346 | + "#FFFFFF" | ||
347 | + }, | ||
348 | + exporting: { | ||
349 | + enabled: false | ||
350 | + }, | ||
351 | + series: [ | ||
352 | + { | ||
353 | + name: "사망률(%)", | ||
354 | + data: (function() { | ||
355 | + // generate an array of random data | ||
356 | + var data = [], | ||
357 | + time = new Date().getTime(), | ||
358 | + i; | ||
359 | + | ||
360 | + for (i = -19; i <= 0; i += 1) { | ||
361 | + data.push({ | ||
362 | + x: time + i * 3000, | ||
363 | + y: 0 | ||
364 | + }); | ||
365 | + } | ||
366 | + return data; | ||
367 | + })() | ||
368 | + } | ||
369 | + ] | ||
370 | + }); | ||
371 | + | ||
372 | + </script> | ||
10 | </body> | 373 | </body> |
11 | </html> | 374 | </html> | ... | ... |
-
Please register or login to post a comment