김대욱 / My_Project

Go to a project
Toggle navigation Toggle navigation pinning
김대욱
3c1f730a 1 parent 01a604ce

views

Inline Side-by-side
Showing 6 changed files with 2003 additions and 0 deletions

204 KB
1 +<h1><%= message %></h1>
2 +<h2><%= error.status %></h2>
3 +<pre><%= error.stack %></pre>
1 +<!-- <!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <!-- font -->
6 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
7 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
8 +
9 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 + <meta name="viewport" content="width=device-width, initial-scale=1" />
11 + <title>Highcharts Example</title>
12 +
13 + <style type="text/css">
14 + html {
15 + margin: 0;
16 + padding: 0;
17 +}
18 + body {
19 + margin: 0;
20 + padding: 0;
21 +
22 + /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
23 + /* background-color:#65799B; */
24 + /* background-image: url("2.jpg");
25 + background-repeat: no-repeat;
26 + background-size: cover; */
27 + }
28 + #banner {
29 + position: absolute;
30 + top: 0;
31 + width: 100%;
32 + }
33 +
34 + </style>
35 +</head>
36 +
37 +<body>
38 + <script src="highcharts.js"></script>
39 + <script src="modules/exporting.js"></script>
40 + <script src="modules/export-data.js"></script>
41 +
42 + <div id="banner">
43 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
44 +
45 + <div style="width:1275px; margin:0 auto;">
46 + <div style="display: inline-block;">
47 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
48 + </div>
49 + <div style="display: inline-block;">
50 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
51 + </div>
52 +
53 + <div style="display: inline-block;">
54 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
55 + </div>
56 + </div>
57 +
58 + <script src="/socket.io/socket.io.js"></script>
59 + <script type="text/javascript">
60 + let client_data = {
61 + birth: "<%=birth%>",
62 + name: "<%=name%>"
63 + }
64 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
65 + socket.emit("connection", client_data);
66 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
67 + console.log(info);
68 +
69 + var date = new Date().getTime();
70 +
71 + chart1.series[0].addPoint({
72 + x: date,
73 + y: info.death
74 + });
75 +
76 + chart2.series[0].addPoint({
77 + x: date,
78 + y: info.temperature
79 + });
80 +
81 + chart3.series[0].addPoint({
82 + x: date,
83 + y: info.wind
84 + });
85 +
86 + chart4.series[0].addPoint({
87 + x: date,
88 + y: info.rain
89 + });
90 +
91 + });
92 +
93 +
94 + var chart1 = Highcharts.chart("container1", {
95 + chart: {
96 + type: "spline",
97 + animation: Highcharts.svg, // don't animate in old IE
98 + marginRight: 10,
99 + // events: {
100 + // load: function () {
101 + // // set up the updating of the chart each second
102 + // var series = this.series[0];
103 + // setInterval(function () {
104 + // var x = new Date().getTime(), // 현재 시간
105 + // y = Math.random(); //여기에 새로 넣을 값
106 + // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
107 + // }, 1000); //1000=1초 -> 1분=60000
108 + // }
109 + // },
110 +
111 + backgroundColor: "rgba(255, 255, 255, 0.0)"
112 + },
113 +
114 + time: {
115 + useUTC: false
116 + },
117 +
118 + title: {
119 + text: "<%=name%>님의 실시간 사망 확률",
120 + style: {
121 + color: "#FFFFFF",
122 + fontWeight: "bold",
123 + fontFamily: 'Yeon Sung',
124 + fontSize:'32px'
125 + }
126 + },
127 + xAxis: {
128 + type: "datetime",
129 + tickPixelInterval: 150,
130 + labels: {
131 + style: {
132 + color: "white"
133 + }
134 + }
135 + },
136 + yAxis: {
137 + title: {
138 + text: "Value",
139 + style: {
140 + color: "white"
141 + }
142 + },
143 +
144 + plotLines: [
145 + {
146 + value: 0,
147 + width: 1,
148 + color: "#808080"
149 + }
150 + ],
151 + labels: {
152 + style: {
153 + color: "white"
154 + }
155 + }
156 +
157 + },
158 + tooltip: {
159 + headerFormat: "<b>{series.name}</b><br/>",
160 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
161 + },
162 + legend: {
163 + //enabled: false
164 + layout: "vertical",
165 + align: "left",
166 + verticalAlign: "top",
167 + x: 100,
168 + y: 50,
169 + floating: true,
170 + borderWidth: 1,
171 + backgroundColor:
172 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
173 + "#FFFFFF"
174 + },
175 + exporting: {
176 + enabled: false
177 + },
178 +
179 +plotOptions: {
180 + series: {
181 + marker: {
182 + radius: 6
183 + }
184 + }
185 + },
186 +
187 + series: [
188 + {
189 + name: "사망률",
190 + data: (function () {
191 + var deathArr = [],
192 + time = new Date().getTime();
193 + var length = <%=dataLen%>;
194 + var i = -9; //얘는 시간계산용
195 + var j = 0; //얘는 반복문용
196 + for (; j < 10 - length; j++) {
197 + deathArr.push({
198 + x: time + i * 60000,
199 + y: 0
200 + })
201 + i++;
202 + }
203 +
204 + <% probArr.forEach((probArr) => {%>
205 + var temp;
206 + temp = <%=probArr %>;
207 +
208 + // for(;j<10;j++)
209 + // {
210 + // deathArr.push({
211 + // x: time + i * 60000,
212 + // y: temp
213 + // })
214 + // i++;
215 + // }
216 +
217 + deathArr.push({
218 + x: time + i * 60000,
219 + y: temp
220 + })
221 + i++;
222 +
223 + <%}) %>
224 +
225 + return deathArr;
226 + })(),
227 +
228 + color: "#FFFFFF"
229 + }
230 + ]
231 +
232 + });
233 +
234 +
235 + var chart2 = Highcharts.chart("container2", {
236 + chart: {
237 + type: "spline",
238 + animation: Highcharts.svg, // don't animate in old IE
239 + marginRight: 10,
240 + // events: {
241 + // load: function () {
242 + // // set up the updating of the chart each second
243 + // var series = this.series[0];
244 + // setInterval(function () {
245 + // var x = new Date().getTime(), // 현재 시간
246 + // y = Math.random(); //
247 + // series.addPoint([x, y], true, true);
248 + // }, 3000); //1000=1초
249 + // }
250 + // },
251 +
252 + backgroundColor: "rgba(255, 255, 255, 0.0)"
253 + },
254 +
255 + time: {
256 + useUTC: false
257 + },
258 +
259 + title: {
260 + text: "기온",
261 + style: {
262 + color: "#FFFFFF",
263 + fontWeight: "bold",
264 + fontFamily: 'Yeon Sung',
265 + fontSize:'25px'
266 + }
267 +
268 + },
269 + xAxis: {
270 + type: "datetime",
271 + tickPixelInterval: 150,
272 + labels: {
273 + style: {
274 + color: "white"
275 + }
276 + }
277 + },
278 + yAxis: {
279 + title: {
280 + text: "Value",
281 + style: {
282 + color: "white"
283 + }
284 + },
285 + plotLines: [
286 + {
287 + value: 0,
288 + width: 1,
289 + color: "#808080"
290 + }
291 + ],
292 + labels: {
293 + style: {
294 + color: "white"
295 + }
296 + }
297 +
298 + },
299 + tooltip: {
300 + headerFormat: "<b>{series.name}</b><br/>",
301 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}도"
302 + },
303 + legend: {
304 + //enabled: false
305 + layout: "vertical",
306 + align: "left",
307 + verticalAlign: "top",
308 + x: 100,
309 + y: 50,
310 + floating: true,
311 + borderWidth: 1,
312 + backgroundColor:
313 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
314 + "#FFFFFF"
315 + },
316 + exporting: {
317 + enabled: false
318 + },
319 + series: [
320 + {
321 + name: "기온",
322 + data: (function () {
323 + var tempArr = [],
324 + time = new Date().getTime();
325 + var length = <%=dataLen%>;
326 + var i = -9;
327 + var j = 0;
328 + for (j; j < 10 - length; j++) {
329 + tempArr.push({
330 + x: time + i * 60000,
331 + y: 0
332 + })
333 + i++;
334 + }
335 +
336 + <% ptArr.forEach((ptArr) => {%>
337 + var temp;
338 + temp = <%=ptArr %>;
339 +
340 + // for(j;j<10;j++)
341 + // {
342 + // tempArr.push({
343 + // x: time + i * 60000,
344 + // y: temp
345 + // })
346 + // i++;
347 + // }
348 +
349 + tempArr.push({
350 + x: time + i * 60000,
351 + y: temp
352 + })
353 + i++;
354 +
355 + <%}) %>
356 +
357 + return tempArr;
358 + })(),
359 +
360 + color: "#FFE08C"
361 + }
362 + ]
363 + });
364 +
365 + var chart3 = Highcharts.chart("container3", {
366 + chart: {
367 + type: "spline",
368 + animation: Highcharts.svg, // don't animate in old IE
369 + marginRight: 10,
370 + // events: {
371 + // load: function () {
372 + // // set up the updating of the chart each second
373 + // var series = this.series[0];
374 + // setInterval(function () {
375 + // var x = new Date().getTime(), // 현재 시간
376 + // y = Math.random(); //
377 + // series.addPoint([x, y], true, true);
378 + // }, 3000); //1000=1초
379 + // }
380 + // },
381 + backgroundColor: "rgba(255, 255, 255, 0.0)"
382 + },
383 +
384 + time: {
385 + useUTC: false
386 + },
387 +
388 + title: {
389 + text: "풍속",
390 + style: {
391 + color: "#FFFFFF",
392 + fontWeight: "bold",
393 + fontFamily: 'Yeon Sung',
394 + fontSize:'25px'
395 + }
396 + },
397 + xAxis: {
398 + type: "datetime",
399 + tickPixelInterval: 150,
400 + labels: {
401 + style: {
402 + color: "white"
403 + }
404 + }
405 + },
406 + yAxis: {
407 + title: {
408 + text: "Value",
409 + style: {
410 + color: "white"
411 + }
412 + },
413 + plotLines: [
414 + {
415 + value: 0,
416 + width: 1,
417 + color: "#808080"
418 + }
419 + ],
420 + labels: {
421 + style: {
422 + color: "white"
423 + }
424 + }
425 +
426 + },
427 + tooltip: {
428 + headerFormat: "<b>{series.name}</b><br/>",
429 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s"
430 + },
431 + legend: {
432 + //enabled: false
433 + layout: "vertical",
434 + align: "left",
435 + verticalAlign: "top",
436 + x: 100,
437 + y: 50,
438 + floating: true,
439 + borderWidth: 1,
440 + backgroundColor:
441 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
442 + "#FFFFFF"
443 + },
444 + exporting: {
445 + enabled: false
446 + },
447 + series: [
448 + {
449 + name: "풍속",
450 + data: (function () {
451 + var windArr = [],
452 + time = new Date().getTime();
453 + var length = <%=dataLen%>;
454 + var i = -9;
455 + var j = 0;
456 + for (j; j < 10 - length; j++) {
457 + windArr.push({
458 + x: time + i * 60000,
459 + y: 0
460 + })
461 + i++;
462 + }
463 +
464 + <% wsArr.forEach((wsArr) => {%>
465 + var temp;
466 + temp = <%=wsArr %>;
467 +
468 + // for(j;j<10;j++)
469 + // {
470 + // windArr.push({
471 + // x: time + i * 60000,
472 + // y: temp
473 + // })
474 + // i++;
475 + // }
476 +
477 + windArr.push({
478 + x: time + i * 60000,
479 + y: temp
480 + })
481 + i++;
482 +
483 + <%}) %>
484 +
485 + return windArr;
486 + })(),
487 +
488 + color: "#FFE08C"
489 + }
490 + ] });
491 +
492 + var chart4 = Highcharts.chart("container4", {
493 + chart: {
494 + type: "spline",
495 + animation: Highcharts.svg, // don't animate in old IE
496 + marginRight: 10,
497 + // events: {
498 + // load: function () {
499 + // // set up the updating of the chart each second
500 + // var series = this.series[0];
501 + // setInterval(function () {
502 + // var x = new Date().getTime(), // 현재 시간
503 + // y = Math.random(); //
504 + // series.addPoint([x, y], true, true);
505 + // }, 3000); //1000=1초
506 + // }
507 + // },
508 + backgroundColor: "rgba(255, 255, 255, 0.0)"
509 + },
510 +
511 + time: {
512 + useUTC: false
513 + },
514 +
515 + title: {
516 + text: "강수량",
517 + style: {
518 + color: "#FFFFFF",
519 + fontWeight: "bold",
520 + fontFamily: 'Yeon Sung',
521 + fontSize:'25px'
522 + }
523 + },
524 + xAxis: {
525 + type: "datetime",
526 + tickPixelInterval: 150,
527 + labels: {
528 + style: {
529 + color: "white"
530 + }
531 + }
532 + },
533 + yAxis: {
534 + title: {
535 + text: "Value",
536 + style: {
537 + color: "white"
538 + }
539 + },
540 + plotLines: [
541 + {
542 + value: 0,
543 + width: 1,
544 + color: "#808080"
545 + }
546 + ],
547 + labels: {
548 + style: {
549 + color: "white"
550 + }
551 + }
552 +
553 + },
554 + tooltip: {
555 + headerFormat: "<b>{series.name}</b><br/>",
556 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm"
557 + },
558 + legend: {
559 + //enabled: false
560 + layout: "vertical",
561 + align: "left",
562 + verticalAlign: "top",
563 + x: 100,
564 + y: 50,
565 + floating: true,
566 + borderWidth: 1,
567 + backgroundColor:
568 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
569 + "#FFFFFF"
570 + },
571 + exporting: {
572 + enabled: false
573 + },
574 + series: [
575 + {
576 + name: "강수량",
577 + data: (function () {
578 + var rainArr = [],
579 + time = new Date().getTime();
580 + var length = <%=dataLen%>;
581 + var i = -9;
582 + var j = 0;
583 + for (j; j < 10 - length; j++) {
584 + rainArr.push({
585 + x: time + i * 60000,
586 + y: 0
587 + })
588 + i++;
589 + }
590 +
591 + <% rainArr.forEach((rainArr) => {%>
592 + var temp;
593 + temp = <%=rainArr %>;
594 +
595 + // for(j;j<10;j++)
596 + // {
597 + // rainArr.push({
598 + // x: time + i * 60000,
599 + // y: temp
600 + // })
601 + // i++;
602 + // }
603 +
604 + rainArr.push({
605 + x: time + i * 60000,
606 + y: temp
607 +
608 + })
609 + i++;
610 +
611 + <%}) %>
612 +
613 + return rainArr;
614 + })(),
615 + color: "#FFE08C"
616 +
617 + }
618 + ]
619 +
620 +
621 + });
622 + </script>
623 + </div>
624 +
625 +</body>
626 +
627 +</html> -->
...\ No newline at end of file ...\ No newline at end of file
1 +<!-- <!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <!-- font -->
6 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
7 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
8 +
9 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 + <meta name="viewport" content="width=device-width, initial-scale=1" />
11 + <title>Highcharts Example</title>
12 +
13 + <style type="text/css">
14 + html {
15 + margin: 0;
16 + padding: 0;
17 +}
18 + body {
19 + margin: 0;
20 + padding: 0;
21 +
22 + /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
23 + /* background-color:#65799B; */
24 + /* background-image: url("2.jpg");
25 + background-repeat: no-repeat;
26 + background-size: cover; */
27 + }
28 + #banner {
29 + position: absolute;
30 + top: 0;
31 + width: 100%;
32 + }
33 +
34 + </style>
35 +</head>
36 +
37 +<body>
38 + <script src="highcharts.js"></script>
39 + <script src="modules/exporting.js"></script>
40 + <script src="modules/export-data.js"></script>
41 +
42 + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
43 +
44 + <div id="banner">
45 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
46 +
47 + <div style="width:1275px; margin:0 auto;">
48 + <div style="display: inline-block;">
49 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
50 + </div>
51 + <div style="display: inline-block;">
52 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
53 + </div>
54 +
55 + <div style="display: inline-block;">
56 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
57 + </div>
58 + </div>
59 +
60 + <script src="/socket.io/socket.io.js"></script>
61 + <script type="text/javascript">
62 + let client_data = {
63 + birth: "<%=birth%>",
64 + name: "<%=name%>"
65 + }
66 +
67 +
68 + var chart1 = Highcharts.chart("container1", {
69 + chart: {
70 + type: "spline",
71 + animation: Highcharts.svg, // don't animate in old IE
72 + marginRight: 10,
73 + // events: {
74 + // load: function () {
75 + // // set up the updating of the chart each second
76 + // var series = this.series[0];
77 + // setInterval(function () {
78 + // var x = new Date().getTime(), // 현재 시간
79 + // y = Math.random(); //여기에 새로 넣을 값
80 + // series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
81 + // }, 1000); //1000=1초 -> 1분=60000
82 + // }
83 + // },
84 +
85 + backgroundColor: "rgba(255, 255, 255, 0.0)"
86 + },
87 +
88 + time: {
89 + useUTC: false
90 + },
91 +
92 + title: {
93 + text: "<%=name%>님의 실시간 사망 확률",
94 + style: {
95 + color: "#FFFFFF",
96 + fontWeight: "bold",
97 + fontFamily: 'Yeon Sung',
98 + fontSize:'32px'
99 + }
100 + },
101 + xAxis: {
102 + type: "datetime",
103 + tickPixelInterval: 150,
104 + labels: {
105 + style: {
106 + color: "white"
107 + }
108 + }
109 + },
110 + yAxis: {
111 + title: {
112 + text: "사망확률(%)",
113 + style: {
114 + color: "white"
115 + }
116 + },
117 +
118 + plotLines: [
119 + {
120 + value: 0,
121 + width: 1,
122 + color: "#808080"
123 + }
124 + ],
125 + labels: {
126 + style: {
127 + color: "white"
128 + }
129 + }
130 +
131 + },
132 + tooltip: {
133 + headerFormat: "<b>{series.name}</b><br/>",
134 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
135 + },
136 + legend: {
137 + //enabled: false
138 + layout: "vertical",
139 + align: "left",
140 + verticalAlign: "top",
141 + x: 100,
142 + y: 50,
143 + floating: true,
144 + borderWidth: 1,
145 + backgroundColor:
146 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
147 + "#FFFFFF"
148 + },
149 + exporting: {
150 + enabled: false
151 + },
152 +
153 +plotOptions: {
154 + series: {
155 + marker: {
156 + radius: 6
157 + }
158 + }
159 + },
160 +
161 + series: [
162 + {
163 + name: "사망률",
164 + data: (function () {
165 + var deathArr = [],
166 + time = new Date().getTime();
167 + var length = <%=dataLen%>;
168 + var i = -9; //얘는 시간계산용
169 + var j = 0; //얘는 반복문용
170 + for (; j < 10 - length; j++) {
171 + deathArr.push({
172 + x: time + i * 60000,
173 + y: 0
174 + })
175 + i++;
176 + }
177 +
178 + <% probArr.forEach((probArr) => {%>
179 + var temp;
180 + temp = <%=probArr %>;
181 +
182 + // for(;j<10;j++)
183 + // {
184 + // deathArr.push({
185 + // x: time + i * 60000,
186 + // y: temp
187 + // })
188 + // i++;
189 + // }
190 +
191 + deathArr.push({
192 + x: time + i * 60000,
193 + y: temp
194 + })
195 + i++;
196 +
197 + <%}) %>
198 +
199 + return deathArr;
200 + })(),
201 +
202 + color: "#FFFFFF"
203 + }
204 + ]
205 +
206 + });
207 +
208 +
209 + var chart2 = Highcharts.chart("container2", {
210 + chart: {
211 + type: "spline",
212 + animation: Highcharts.svg, // don't animate in old IE
213 + marginRight: 10,
214 + // events: {
215 + // load: function () {
216 + // // set up the updating of the chart each second
217 + // var series = this.series[0];
218 + // setInterval(function () {
219 + // var x = new Date().getTime(), // 현재 시간
220 + // y = Math.random(); //
221 + // series.addPoint([x, y], true, true);
222 + // }, 3000); //1000=1초
223 + // }
224 + // },
225 +
226 + backgroundColor: "rgba(255, 255, 255, 0.0)"
227 + },
228 +
229 + time: {
230 + useUTC: false
231 + },
232 +
233 + title: {
234 + text: "기온",
235 + style: {
236 + color: "#FFFFFF",
237 + fontWeight: "bold",
238 + fontFamily: 'Yeon Sung',
239 + fontSize:'25px'
240 + }
241 +
242 + },
243 + xAxis: {
244 + type: "datetime",
245 + tickPixelInterval: 150,
246 + labels: {
247 + style: {
248 + color: "white"
249 + }
250 + }
251 + },
252 + yAxis: {
253 + title: {
254 + text: "기온(°C)",
255 + style: {
256 + color: "white"
257 + }
258 + },
259 + plotLines: [
260 + {
261 + value: 0,
262 + width: 1,
263 + color: "#808080"
264 + }
265 + ],
266 + labels: {
267 + style: {
268 + color: "white"
269 + }
270 + }
271 +
272 + },
273 + tooltip: {
274 + headerFormat: "<b>{series.name}</b><br/>",
275 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 기온 : {point.y:.2f}°C"
276 + },
277 + legend: {
278 + //enabled: false
279 + layout: "vertical",
280 + align: "left",
281 + verticalAlign: "top",
282 + x: 100,
283 + y: 50,
284 + floating: true,
285 + borderWidth: 1,
286 + backgroundColor:
287 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
288 + "#FFFFFF"
289 + },
290 + exporting: {
291 + enabled: false
292 + },
293 + series: [
294 + {
295 + name: "기온",
296 + data: (function () {
297 + var tempArr = [],
298 + time = new Date().getTime();
299 + var length = <%=dataLen%>;
300 + var i = -9;
301 + var j = 0;
302 + for (j; j < 10 - length; j++) {
303 + tempArr.push({
304 + x: time + i * 60000,
305 + y: 0
306 + })
307 + i++;
308 + }
309 +
310 + <% ptArr.forEach((ptArr) => {%>
311 + var temp;
312 + temp = <%=ptArr %>;
313 +
314 + // for(j;j<10;j++)
315 + // {
316 + // tempArr.push({
317 + // x: time + i * 60000,
318 + // y: temp
319 + // })
320 + // i++;
321 + // }
322 +
323 + tempArr.push({
324 + x: time + i * 60000,
325 + y: temp
326 + })
327 + i++;
328 +
329 + <%}) %>
330 +
331 + return tempArr;
332 + })(),
333 +
334 + color: "#FFE08C"
335 + }
336 + ]
337 + });
338 +
339 + var chart3 = Highcharts.chart("container3", {
340 + chart: {
341 + type: "spline",
342 + animation: Highcharts.svg, // don't animate in old IE
343 + marginRight: 10,
344 + // events: {
345 + // load: function () {
346 + // // set up the updating of the chart each second
347 + // var series = this.series[0];
348 + // setInterval(function () {
349 + // var x = new Date().getTime(), // 현재 시간
350 + // y = Math.random(); //
351 + // series.addPoint([x, y], true, true);
352 + // }, 3000); //1000=1초
353 + // }
354 + // },
355 + backgroundColor: "rgba(255, 255, 255, 0.0)"
356 + },
357 +
358 + time: {
359 + useUTC: false
360 + },
361 +
362 + title: {
363 + text: "풍속",
364 + style: {
365 + color: "#FFFFFF",
366 + fontWeight: "bold",
367 + fontFamily: 'Yeon Sung',
368 + fontSize:'25px'
369 + }
370 + },
371 + xAxis: {
372 + type: "datetime",
373 + tickPixelInterval: 150,
374 + labels: {
375 + style: {
376 + color: "white"
377 + }
378 + }
379 + },
380 + yAxis: {
381 + title: {
382 + text: "풍속(m/s)",
383 + style: {
384 + color: "white"
385 + }
386 + },
387 + plotLines: [
388 + {
389 + value: 0,
390 + width: 1,
391 + color: "#808080"
392 + }
393 + ],
394 + labels: {
395 + style: {
396 + color: "white"
397 + }
398 + }
399 +
400 + },
401 + tooltip: {
402 + headerFormat: "<b>{series.name}</b><br/>",
403 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 풍속 : {point.y:.2f}m/s"
404 + },
405 + legend: {
406 + //enabled: false
407 + layout: "vertical",
408 + align: "left",
409 + verticalAlign: "top",
410 + x: 100,
411 + y: 50,
412 + floating: true,
413 + borderWidth: 1,
414 + backgroundColor:
415 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
416 + "#FFFFFF"
417 + },
418 + exporting: {
419 + enabled: false
420 + },
421 + series: [
422 + {
423 + name: "풍속",
424 + data: (function () {
425 + var windArr = [],
426 + time = new Date().getTime();
427 + var length = <%=dataLen%>;
428 + var i = -9;
429 + var j = 0;
430 + for (j; j < 10 - length; j++) {
431 + windArr.push({
432 + x: time + i * 60000,
433 + y: 0
434 + })
435 + i++;
436 + }
437 +
438 + <% wsArr.forEach((wsArr) => {%>
439 + var temp;
440 + temp = <%=wsArr %>;
441 +
442 + // for(j;j<10;j++)
443 + // {
444 + // windArr.push({
445 + // x: time + i * 60000,
446 + // y: temp
447 + // })
448 + // i++;
449 + // }
450 +
451 + windArr.push({
452 + x: time + i * 60000,
453 + y: temp
454 + })
455 + i++;
456 +
457 + <%}) %>
458 +
459 + return windArr;
460 + })(),
461 +
462 + color: "#FFE08C"
463 + }
464 + ] });
465 +
466 + var chart4 = Highcharts.chart("container4", {
467 + chart: {
468 + type: "spline",
469 + animation: Highcharts.svg, // don't animate in old IE
470 + marginRight: 10,
471 + // events: {
472 + // load: function () {
473 + // // set up the updating of the chart each second
474 + // var series = this.series[0];
475 + // setInterval(function () {
476 + // var x = new Date().getTime(), // 현재 시간
477 + // y = Math.random(); //
478 + // series.addPoint([x, y], true, true);
479 + // }, 3000); //1000=1초
480 + // }
481 + // },
482 + backgroundColor: "rgba(255, 255, 255, 0.0)"
483 + },
484 +
485 + time: {
486 + useUTC: false
487 + },
488 +
489 + title: {
490 + text: "강수량",
491 + style: {
492 + color: "#FFFFFF",
493 + fontWeight: "bold",
494 + fontFamily: 'Yeon Sung',
495 + fontSize:'25px'
496 + }
497 + },
498 + xAxis: {
499 + type: "datetime",
500 + tickPixelInterval: 150,
501 + labels: {
502 + style: {
503 + color: "white"
504 + }
505 + }
506 + },
507 + yAxis: {
508 + title: {
509 + text: "강수량(mm)",
510 + style: {
511 + color: "white"
512 + }
513 + },
514 + plotLines: [
515 + {
516 + value: 0,
517 + width: 1,
518 + color: "#808080"
519 + }
520 + ],
521 + labels: {
522 + style: {
523 + color: "white"
524 + }
525 + }
526 +
527 + },
528 + tooltip: {
529 + headerFormat: "<b>{series.name}</b><br/>",
530 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 강수량 : {point.y:.2f}mm"
531 + },
532 + legend: {
533 + //enabled: false
534 + layout: "vertical",
535 + align: "left",
536 + verticalAlign: "top",
537 + x: 100,
538 + y: 50,
539 + floating: true,
540 + borderWidth: 1,
541 + backgroundColor:
542 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
543 + "#FFFFFF"
544 + },
545 + exporting: {
546 + enabled: false
547 + },
548 + series: [
549 + {
550 + name: "강수량",
551 + data: (function () {
552 + var rainArr = [],
553 + time = new Date().getTime();
554 + var length = <%=dataLen%>;
555 + var i = -9;
556 + var j = 0;
557 + for (j; j < 10 - length; j++) {
558 + rainArr.push({
559 + x: time + i * 60000,
560 + y: 0
561 + })
562 + i++;
563 + }
564 +
565 + <% rainArr.forEach((rainArr) => {%>
566 + var temp;
567 + temp = <%=rainArr %>;
568 +
569 + // for(j;j<10;j++)
570 + // {
571 + // rainArr.push({
572 + // x: time + i * 60000,
573 + // y: temp
574 + // })
575 + // i++;
576 + // }
577 +
578 + rainArr.push({
579 + x: time + i * 60000,
580 + y: temp
581 +
582 + })
583 + i++;
584 +
585 + <%}) %>
586 +
587 + return rainArr;
588 + })(),
589 + color: "#FFE08C"
590 +
591 + }
592 + ]
593 +
594 +
595 + });
596 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
597 + socket.emit("connection", client_data);
598 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
599 + console.log(info);
600 +
601 + var date = new Date().getTime();
602 +
603 + chart1.series[0].addPoint({
604 + x: date,
605 + y: info.death,
606 + color:"#FFE08C"
607 + });
608 + chart2.series[0].addPoint({
609 + x: date,
610 + y: info.temperature*1,
611 + color:"#FFE08C"
612 + });
613 +
614 + chart3.series[0].addPoint({
615 + x: date,
616 + y: info.wind*1,
617 + color:"#FFE08C"
618 + });
619 +
620 + chart4.series[0].addPoint({
621 + x: date,
622 + y: info.rain*1,
623 + color:"#FFE08C"
624 + });
625 +
626 + });
627 +
628 + </script>
629 + </div>
630 +
631 +</body>
632 +
633 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE <!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <meta charset="utf-8" />
6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 + <title>Page Title</title>
8 +
9 + <!-- font -->
10 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet">
11 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
12 +
13 + <meta name="viewport" content="width=device-width, initial-scale=1">
14 + <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
15 + <script src="main.js"></script>
16 +
17 + <!-- 합쳐지고 최소화된 최신 CSS -->
18 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
19 +
20 + <!-- 부가적인 테마 -->
21 + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
22 +
23 + <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
24 + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
25 +
26 + <style type="text/css">
27 + html,
28 + {
29 + margin: 0;
30 + padding: 0;
31 + }
32 +
33 + body {
34 + margin: 0;
35 + padding: 0;
36 +
37 + /* background-image: url('background.jpg');
38 + background-repeat: no-repeat;
39 + background-size: cover; */
40 + /* background: linear-gradient( to bottom, #fbc2eb, #a6c1ee ); */
41 + }
42 +
43 + h1 {
44 + color: white;
45 + font-family: 'Nanum Brush Script', cursive;
46 + }
47 +
48 + label {
49 + color: white;
50 + font-size: 20px;
51 + font-family: 'Yeon Sung', cursive;
52 + }
53 +
54 + #banner {
55 + position: absolute;
56 + top: 0;
57 + width: 100%;
58 + }
59 +
60 + #footer {
61 + position: absolute;
62 + bottom: 0;
63 + width: 100%;
64 + height: 50px;
65 + text-align: center;
66 + font-family: 'Yeon Sung', cursive;
67 + color: white;
68 + }
69 + </style>
70 +
71 +</head>
72 +
73 +<body>
74 + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
75 + <div id="banner">
76 + <div style="width:100%; text-align: center; padding-top:170px;">
77 + <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
78 + </div>
79 + <br><br><br>
80 + <div style="width:100%; text-align: center;">
81 + <form action="/starting" method="post">
82 + <div class="form-inline">
83 + <label>이름</label>
84 + <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
85 + &nbsp &nbsp&nbsp&nbsp
86 + <label>생년월일</label>
87 + <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
88 + <br><br><br>
89 + <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
90 + </div>
91 + </form>
92 + </div>
93 +
94 + </div>
95 +
96 + <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
97 +</body>
98 +
99 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 +
4 +<head>
5 + <!-- font -->
6 + <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
7 + <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
8 +
9 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 + <meta name="viewport" content="width=device-width, initial-scale=1" />
11 + <title>Highcharts Example</title>
12 +
13 + <style type="text/css">
14 + html {
15 + margin: 0;
16 + padding: 0;
17 +}
18 + body {
19 + margin: 0;
20 + padding: 0;
21 +
22 + /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
23 + /* background-color:#65799B; */
24 + /* background-image: url("2.jpg");
25 + background-repeat: no-repeat;
26 + background-size: cover; */
27 + }
28 +
29 + #banner {
30 + position: absolute;
31 + top: 0;
32 + width: 100%;
33 + }
34 + </style>
35 +</head>
36 +
37 +<body>
38 + <script src="highcharts.js"></script>
39 + <script src="modules/exporting.js"></script>
40 + <script src="modules/export-data.js"></script>
41 + <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
42 +
43 + <div id="banner">
44 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div>
45 +
46 + <div style="width:1275px; margin:0 auto;">
47 + <div style="display: inline-block;">
48 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
49 + </div>
50 + <div style="display: inline-block;">
51 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
52 + </div>
53 +
54 + <div style="display: inline-block;">
55 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
56 + </div>
57 + </div>
58 +
59 +
60 + <script src="/socket.io/socket.io.js"></script>
61 + <script>
62 + let client_data = {
63 + birth: "<%=birth%>",
64 + name: "<%=name%>"
65 + }
66 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
67 + socket.emit("connection", client_data);
68 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
69 + console.log(info);
70 +
71 + var date = new Date().getTime();
72 +
73 + chart1.series[0].addPoint({
74 + x: date,
75 + y: info.death,
76 + color: "#FFE08C"
77 + });
78 +
79 + chart2.series[0] .addPoint({
80 + x: date,
81 + y: info.temperature,
82 + color: "#FFE08C"
83 + });
84 +
85 + chart3.series[0].addPoint({
86 + x: date,
87 + y: info.wind,
88 + color: "#FFE08C"
89 + });
90 +
91 + chart4.series[0].addPoint({
92 + x: date,
93 + y: info.rain,
94 + color: "#FFE08C"
95 + });
96 +
97 + });
98 + </script>
99 +
100 + <script type="text/javascript">
101 + //사망률
102 + var chart1 = Highcharts.chart("container1", {
103 + chart: {
104 + type: "spline",
105 + animation: Highcharts.svg, // don't animate in old IE
106 + marginRight: 10,
107 + // events: {
108 + // load: function () {
109 + // // set up the updating of the chart each second
110 + // var series = this.series[0];
111 + // setInterval(function () {
112 + // var x = new Date().getTime(), // 현재 시간
113 + // y = 0; //여기에 새로 넣을 값
114 + // series.addPoint([x, y], true, true);
115 + // }, 60000); //1000=1초 -> 1분=60000
116 + // }
117 + // }
118 + backgroundColor: "rgba(255, 255, 255, 0.0)"
119 +
120 + },
121 +
122 + time: {
123 + useUTC: false
124 + },
125 +
126 + title: {
127 + text: "<%=name%>님의 실시간 사망 확률",
128 + style: {
129 + color: "#FFFFFF",
130 + fontWeight: "bold",
131 + fontFamily: 'Yeon Sung',
132 + fontSize: '32px'
133 + }
134 +
135 + },
136 + xAxis: {
137 + type: "datetime",
138 + tickPixelInterval: 150,
139 + labels: {
140 + style: {
141 + color: "white"
142 + }
143 + }
144 +
145 + },
146 + yAxis: {
147 + title: {
148 + text: "Value",
149 + style: {
150 + color: "white"
151 + }
152 + },
153 + plotLines: [
154 + {
155 + value: 0,
156 + width: 1,
157 + color: "#808080"
158 + }
159 + ],
160 + labels: {
161 + style: {
162 + color: "white"
163 + }
164 + }
165 + },
166 + tooltip: {
167 + headerFormat: "<b>{series.name}</b><br/>",
168 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
169 + },
170 + legend: {
171 + //enabled: false
172 + layout: "vertical",
173 + align: "left",
174 + verticalAlign: "top",
175 + x: 100,
176 + y: 50,
177 + floating: true,
178 + borderWidth: 1,
179 + backgroundColor:
180 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
181 + "#FFFFFF"
182 + },
183 + exporting: {
184 + enabled: false
185 + },
186 +
187 + plotOptions: {
188 + series: {
189 + marker: {
190 + radius: 6
191 + }
192 + }
193 + },
194 +
195 +
196 + series: [
197 + {
198 + name: "사망률",
199 + data: (function () {
200 + var deathArr = [],
201 + time = new Date().getTime();
202 + var length = <%=dataLen%>;
203 + var i = -9; //얘는 시간계산용
204 + var j = 0; //얘는 반복문용
205 + for (; j < 10 - length; j++) {
206 + deathArr.push({
207 + x: time + i * 60000,
208 + y: 0
209 + })
210 + i++;
211 + }
212 +
213 + <% probArr.forEach((probArr) => {%>
214 + var temp;
215 + temp = <%=probArr %>;
216 +
217 + // for(;j<10;j++)
218 + // {
219 + // deathArr.push({
220 + // x: time + i * 60000,
221 + // y: temp
222 + // })
223 + // i++;
224 + // }
225 +
226 + deathArr.push({
227 + x: time + i * 60000,
228 + y: temp
229 + })
230 + i++;
231 +
232 + <%}) %>
233 +
234 + return deathArr;
235 + })(),
236 +
237 + color: "#FFFFFF"
238 + }
239 + ]
240 + });
241 + //기온
242 + var chart2 = Highcharts.chart("container2", {
243 + chart: {
244 + type: "spline",
245 + animation: Highcharts.svg, // don't animate in old IE
246 + marginRight: 10,
247 + // events: {
248 + // load: function () {
249 + // // set up the updating of the chart each second
250 + // var series = this.series[0];
251 + // setInterval(function () {
252 + // var x = new Date().getTime(), // 현재 시간
253 + // y = 0; //
254 + // series.addPoint([x, y], true, true);
255 + // }, 60000); //1000=1초
256 + // }
257 + // }
258 + backgroundColor: "rgba(255, 255, 255, 0.0)"
259 +
260 + },
261 +
262 + time: {
263 + useUTC: false
264 + },
265 +
266 + title: {
267 + text: "기온",
268 + style: {
269 + color: "#FFFFFF",
270 + fontWeight: "bold",
271 + fontFamily: 'Yeon Sung',
272 + fontSize: '25px'
273 + }
274 +
275 + },
276 + xAxis: {
277 + type: "datetime",
278 + tickPixelInterval: 150,
279 + labels: {
280 + style: {
281 + color: "white"
282 + }
283 + }
284 + },
285 + yAxis: {
286 + title: {
287 + text: "Value",
288 + style: {
289 + color: "white"
290 + }
291 + },
292 + plotLines: [
293 + {
294 + value: 0,
295 + width: 1,
296 + color: "#808080"
297 + }
298 + ],
299 + labels: {
300 + style: {
301 + color: "white"
302 + }
303 + }
304 + },
305 + tooltip: {
306 + headerFormat: "<b>{series.name}</b><br/>",
307 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
308 + },
309 + legend: {
310 + //enabled: false
311 + layout: "vertical",
312 + align: "left",
313 + verticalAlign: "top",
314 + x: 100,
315 + y: 50,
316 + floating: true,
317 + borderWidth: 1,
318 + backgroundColor:
319 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
320 + "#FFFFFF"
321 + },
322 + exporting: {
323 + enabled: false
324 + },
325 + series: [
326 + {
327 + name: "기온",
328 + data: (function () {
329 + var tempArr = [],
330 + time = new Date().getTime();
331 + var length = <%=dataLen%>;
332 + var i = -9;
333 + var j = 0;
334 + for (j; j < 10 - length; j++) {
335 + tempArr.push({
336 + x: time + i * 60000,
337 + y: 0
338 + })
339 + i++;
340 + }
341 +
342 + <% ptArr.forEach((ptArr) => {%>
343 + var temp;
344 + temp = <%=ptArr %>;
345 +
346 + // for(j;j<10;j++)
347 + // {
348 + // tempArr.push({
349 + // x: time + i * 60000,
350 + // y: temp
351 + // })
352 + // i++;
353 + // }
354 +
355 + tempArr.push({
356 + x: time + i * 60000,
357 + y: temp
358 + })
359 + i++;
360 +
361 + <%}) %>
362 +
363 + return tempArr;
364 + })(),
365 +
366 + color: "#FFE08C"
367 + }
368 + ]
369 + });
370 + //풍속
371 + var chart3 = Highcharts.chart("container3", {
372 + chart: {
373 + type: "spline",
374 + animation: Highcharts.svg, // don't animate in old IE
375 + marginRight: 10,
376 + // events: {
377 + // load: function () {
378 + // // set up the updating of the chart each second
379 + // var series = this.series[0];
380 + // setInterval(function () {
381 + // var x = new Date().getTime(), // 현재 시간
382 + // y = 0; //
383 + // series.addPoint([x, y], true, true);
384 + // }, 60000); //1000=1초
385 + // }
386 + // }
387 + backgroundColor: "rgba(255, 255, 255, 0.0)"
388 +
389 + },
390 +
391 + time: {
392 + useUTC: false
393 + },
394 +
395 + title: {
396 + text: "풍속",
397 + style: {
398 + color: "#FFFFFF",
399 + fontWeight: "bold",
400 + fontFamily: 'Yeon Sung',
401 + fontSize: '25px'
402 + }
403 +
404 + },
405 + xAxis: {
406 + type: "datetime",
407 + tickPixelInterval: 150,
408 + labels: {
409 + style: {
410 + color: "white"
411 + }
412 + }
413 +
414 + },
415 + yAxis: {
416 + title: {
417 + text: "Value",
418 + style: {
419 + color: "white"
420 + }
421 +
422 + },
423 + plotLines: [
424 + {
425 + value: 0,
426 + width: 1,
427 + color: "#808080"
428 + }
429 + ],
430 + labels: {
431 + style: {
432 + color: "white"
433 + }
434 + }
435 +
436 + },
437 + tooltip: {
438 + headerFormat: "<b>{series.name}</b><br/>",
439 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
440 + },
441 + legend: {
442 + //enabled: false
443 + layout: "vertical",
444 + align: "left",
445 + verticalAlign: "top",
446 + x: 100,
447 + y: 50,
448 + floating: true,
449 + borderWidth: 1,
450 + backgroundColor:
451 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
452 + "#FFFFFF"
453 + },
454 + exporting: {
455 + enabled: false
456 + },
457 + series: [
458 + {
459 + name: "풍속",
460 + data: (function () {
461 + var windArr = [],
462 + time = new Date().getTime();
463 + var length = <%=dataLen%>;
464 + var i = -9;
465 + var j = 0;
466 + for (j; j < 10 - length; j++) {
467 + windArr.push({
468 + x: time + i * 60000,
469 + y: 0
470 + })
471 + i++;
472 + }
473 +
474 + <% wsArr.forEach((wsArr) => {%>
475 + var temp;
476 + temp = <%=wsArr %>;
477 +
478 + // for(j;j<10;j++)
479 + // {
480 + // windArr.push({
481 + // x: time + i * 60000,
482 + // y: temp
483 + // })
484 + // i++;
485 + // }
486 +
487 + windArr.push({
488 + x: time + i * 60000,
489 + y: temp
490 + })
491 + i++;
492 +
493 + <%}) %>
494 +
495 + return windArr;
496 + })(),
497 +
498 + color: "#FFE08C"
499 + }
500 + ]
501 + });
502 + //강수량
503 + var chart4 = Highcharts.chart("container4", {
504 + chart: {
505 + type: "spline",
506 + animation: Highcharts.svg, // don't animate in old IE
507 + marginRight: 10,
508 + // events: {
509 + // load: function () {
510 + // // set up the updating of the chart each second
511 + // var series = this.series[0];
512 + // setInterval(function () {
513 + // var x = new Date().getTime(), // 현재 시간
514 + // y = 0; //
515 + // series.addPoint([x, y], true, true);
516 + // }, 60000); //1000=1초
517 + // }
518 + // }
519 + backgroundColor: "rgba(255, 255, 255, 0.0)"
520 +
521 + },
522 +
523 + time: {
524 + useUTC: false
525 + },
526 +
527 + title: {
528 + text: "강수량",
529 + style: {
530 + color: "#FFFFFF",
531 + fontWeight: "bold",
532 + fontFamily: 'Yeon Sung',
533 + fontSize: '25px'
534 + }
535 +
536 + },
537 + xAxis: {
538 + type: "datetime",
539 + tickPixelInterval: 150,
540 + labels: {
541 + style: {
542 + color: "white"
543 + }
544 + }
545 +
546 + },
547 + yAxis: {
548 + title: {
549 + text: "Value",
550 + style: {
551 + color: "white"
552 + }
553 +
554 + },
555 + plotLines: [
556 + {
557 + value: 0,
558 + width: 1,
559 + color: "#808080"
560 + }
561 + ],
562 + labels: {
563 + style: {
564 + color: "white"
565 + }
566 + }
567 +
568 + },
569 + tooltip: {
570 + headerFormat: "<b>{series.name}</b><br/>",
571 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 사망률 : {point.y:.2f}%"
572 + },
573 + legend: {
574 + //enabled: false
575 + layout: "vertical",
576 + align: "left",
577 + verticalAlign: "top",
578 + x: 100,
579 + y: 50,
580 + floating: true,
581 + borderWidth: 1,
582 + backgroundColor:
583 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
584 + "#FFFFFF"
585 + },
586 + exporting: {
587 + enabled: false
588 + },
589 + series: [
590 + {
591 + name: "강수량",
592 + data: (function () {
593 + var rainArr = [],
594 + time = new Date().getTime();
595 + var length = <%=dataLen%>;
596 + var i = -9;
597 + var j = 0;
598 + for (j; j < 10 - length; j++) {
599 + rainArr.push({
600 + x: time + i * 60000,
601 + y: 0
602 + })
603 + i++;
604 + }
605 +
606 + <% rainArr.forEach((rainArr) => {%>
607 + var temp;
608 + temp = <%=rainArr %>;
609 +
610 + // for(j;j<10;j++)
611 + // {
612 + // rainArr.push({
613 + // x: time + i * 60000,
614 + // y: temp
615 + // })
616 + // i++;
617 + // }
618 +
619 + rainArr.push({
620 + x: time + i * 60000,
621 + y: temp
622 +
623 + })
624 + i++;
625 +
626 + <%}) %>
627 +
628 + return rainArr;
629 + })(),
630 + color: "#FFE08C"
631 +
632 + }
633 + ]
634 + });
635 + </script>
636 +
637 + </div>
638 +
639 +</body>
640 +
641 +</html>
...\ No newline at end of file ...\ No newline at end of file