2019-2-OpenSourceSW / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
조민지
b346d399 1 parent 0150776f

웹페이지 구조 완성

Inline Side-by-side
Showing 4 changed files with 810 additions and 76 deletions
...@@ -13,58 +13,164 @@ ...@@ -13,58 +13,164 @@
13 <script src="../../code/modules/export-data.js"></script> 13 <script src="../../code/modules/export-data.js"></script>
14 14
15 <div 15 <div
16 - id="container" 16 + id="container1"
17 - style="min-width: 310px; height: 400px; margin: 0 auto" 17 + style="width:1260px; height: 400px; margin: 0 auto"
18 ></div> 18 ></div>
19 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 +
20 <script type="text/javascript"> 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 + }, 3000); //1000=1초
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;
21 113
22 -Highcharts.chart('container', { 114 + for (i = -19; i <= 0; i += 1) {
23 - chart: { 115 + data.push({
24 - type: 'spline', 116 + x: time + i * 3000,
25 - animation: Highcharts.svg, // don't animate in old IE 117 + y: 0
26 - marginRight: 10, 118 + });
27 - events: { 119 + }
28 - load: function () { 120 + return data;
29 - // set up the updating of the chart each second 121 + })()
30 - var series = this.series[0]; 122 + }
31 - setInterval(function () { 123 + ]
32 - var x = (new Date()).getTime(), // 현재 시간 124 + });
33 - y = Math.random(); // 125 +
34 - series.addPoint([x, y], true, true); 126 + Highcharts.chart("container2", {
35 - }, 3000); //1000=1초 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초
36 } 140 }
37 - } 141 + }
38 - }, 142 + },
39 - 143 +
40 - time: { 144 + time: {
41 - useUTC: false 145 + useUTC: false
42 - }, 146 + },
43 - 147 +
44 - title: {
45 - text: '실시간 사망률'
46 - },
47 - xAxis: {
48 - type: 'datetime',
49 - tickPixelInterval: 150
50 - },
51 - yAxis: {
52 title: { 148 title: {
53 - text: 'Value' 149 + text: "실시간 사망률"
54 - }, 150 + },
55 - plotLines: [{ 151 + xAxis: {
56 - value: 0, 152 + type: "datetime",
57 - width: 1, 153 + tickPixelInterval: 150
58 - color: '#808080' 154 + },
59 - }] 155 + yAxis: {
60 - }, 156 + title: {
61 - tooltip: { 157 + text: "Value"
62 - headerFormat: '<b>{series.name}</b><br/>', 158 + },
63 - pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}' 159 + plotLines: [
64 - }, 160 + {
65 - legend: { 161 + value: 0,
66 - //enabled: false 162 + width: 1,
67 - layout: "vertical", 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",
68 align: "left", 174 align: "left",
69 verticalAlign: "top", 175 verticalAlign: "top",
70 x: 120, 176 x: 120,
...@@ -74,28 +180,276 @@ Highcharts.chart('container', { ...@@ -74,28 +180,276 @@ Highcharts.chart('container', {
74 backgroundColor: 180 backgroundColor:
75 (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 181 (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
76 "#FFFFFF" 182 "#FFFFFF"
77 - }, 183 + },
78 - exporting: { 184 + exporting: {
79 - enabled: false 185 + enabled: false
80 - }, 186 + },
81 - series: [{ 187 + series: [
82 - name: '사망률(%)', 188 + {
83 - data: (function () { 189 + name: "사망률(%)",
84 - // generate an array of random data 190 + data: (function() {
85 - var data = [], 191 + // generate an array of random data
86 - time = (new Date()).getTime(), 192 + var data = [],
193 + time = new Date().getTime(),
87 i; 194 i;
88 195
89 - for (i = -19; i <= 0; i += 1) { 196 + for (i = -19; i <= 0; i += 1) {
90 data.push({ 197 data.push({
91 - x: time + i * 1000, 198 + x: time + i * 3000,
92 - y: Math.random() 199 + y: 0
93 }); 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초
94 } 222 }
95 - return data; 223 + }
96 - }()) 224 + },
97 - }] 225 +
98 -}); 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 + Highcharts.chart("container1", {
373 + chart: {
374 + type: "areaspline",
375 + animation: Highcharts.svg, // don't animate in old IE
376 + marginRight: 10,
377 + events: {
378 + load: function() {
379 + // set up the updating of the chart each second
380 + var series = this.series[0];
381 + setInterval(function() {
382 + var x = new Date().getTime(), // 현재 시간
383 + y = Math.random(); //
384 + series.addPoint([x, y], true, true);
385 + }, 3000); //1000=1초
386 + }
387 + }
388 + },
389 +
390 + time: {
391 + useUTC: false
392 + },
393 +
394 + title: {
395 + text: "실시간 사망률"
396 + },
397 + xAxis: {
398 + type: "datetime",
399 + tickPixelInterval: 150
400 + },
401 + yAxis: {
402 + title: {
403 + text: "Value"
404 + },
405 + plotLines: [
406 + {
407 + value: 0,
408 + width: 1,
409 + color: "#808080"
410 + }
411 + ]
412 + },
413 + tooltip: {
414 + headerFormat: "<b>{series.name}</b><br/>",
415 + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
416 + },
417 + legend: {
418 + //enabled: false
419 + layout: "vertical",
420 + align: "left",
421 + verticalAlign: "top",
422 + x: 120,
423 + y: 70,
424 + floating: true,
425 + borderWidth: 1,
426 + backgroundColor:
427 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
428 + "#FFFFFF"
429 + },
430 + exporting: {
431 + enabled: false
432 + },
433 + series: [
434 + {
435 + name: "사망률(%)",
436 + data: (function() {
437 + // generate an array of random data
438 + var data = [],
439 + time = new Date().getTime(),
440 + i;
441 +
442 + for (i = -19; i <= 0; i += 1) {
443 + data.push({
444 + x: time + i * 3000,
445 + y: 0
446 + });
447 + }
448 + return data;
449 + })()
450 + }
451 + ]
452 + });
99 </script> 453 </script>
100 </body> 454 </body>
101 -</html>
...\ No newline at end of file ...\ No newline at end of file
455 +</html>
......
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
18 ></div> 18 ></div>
19 19
20 <script type="text/javascript"> 20 <script type="text/javascript">
21 - var death = [3, 4, 3, 5, 4, 10, 12]; 21 + var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
22 - var temp = [1, 3, 10, 3, 11, 5, 8]; 22 + var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];
23 23
24 var chart = Highcharts.chart("container", { 24 var chart = Highcharts.chart("container", {
25 chart: { 25 chart: {
...@@ -32,8 +32,8 @@ ...@@ -32,8 +32,8 @@
32 layout: "vertical", 32 layout: "vertical",
33 align: "left", 33 align: "left",
34 verticalAlign: "top", 34 verticalAlign: "top",
35 - x: 150, 35 + x: 120,
36 - y: 100, 36 + y: 70,
37 floating: true, 37 floating: true,
38 borderWidth: 1, 38 borderWidth: 1,
39 backgroundColor: 39 backgroundColor:
...@@ -48,13 +48,16 @@ ...@@ -48,13 +48,16 @@
48 "Thursday", 48 "Thursday",
49 "Friday", 49 "Friday",
50 "Saturday", 50 "Saturday",
51 + "Sunday",
52 + "Sunday",
53 + "Sunday",
51 "Sunday" 54 "Sunday"
52 ], 55 ],
53 plotBands: [ 56 plotBands: [
54 { 57 {
55 // 색칠되는 구간 58 // 색칠되는 구간
56 - from: 4.5, 59 + from: 7.5,
57 - to: 6.5, 60 + to: 10.5,
58 color: "rgba(68, 170, 213, .2)" 61 color: "rgba(68, 170, 213, .2)"
59 } 62 }
60 ] 63 ]
...@@ -65,7 +68,7 @@ ...@@ -65,7 +68,7 @@
65 } 68 }
66 }, 69 },
67 tooltip: { 70 tooltip: {
68 - shared: false, 71 + shared: true,
69 valueSuffix: " %", //point mouseover 단위 72 valueSuffix: " %", //point mouseover 단위
70 }, 73 },
71 credits: { 74 credits: {
...@@ -78,15 +81,18 @@ ...@@ -78,15 +81,18 @@
78 }, 81 },
79 series: [ 82 series: [
80 { 83 {
81 - name: "사망률", 84 + name: "사망률(%)",
82 - data: [3, 4, 3, 5, 4, 10, 12] 85 + data: []
83 }, 86 },
84 { 87 {
85 - name: "기온", 88 + name: "기온('C)",
86 - data: [1, 3, 10, 3, 3, 5, 4] 89 + data: []
87 } 90 }
88 ] 91 ]
89 }); 92 });
93 +
94 + death.shift();
95 + temp.shift();
90 96
91 death.push(11); 97 death.push(11);
92 temp.push(3); 98 temp.push(3);
......
...@@ -76,7 +76,7 @@ Highcharts.chart('container', { ...@@ -76,7 +76,7 @@ Highcharts.chart('container', {
76 }, 76 },
77 series: [{ 77 series: [{
78 name: 'Rainfall', 78 name: 'Rainfall',
79 - type: 'spline', 79 + type: 'areaspline',
80 yAxis: 1, 80 yAxis: 1,
81 data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 81 data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
82 tooltip: { 82 tooltip: {
......
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
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>
373 + </body>
374 +</html>