조민지 / 2018_2_project

Go to a project
Toggle navigation Toggle navigation pinning
조민지
7433c87b 2 parents f7683df1 3c719ed4

Merge branch 'front_socket' into developing

Inline Side-by-side
Showing 1 changed file with 130 additions and 129 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 - <head> 3 +
4 +<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
6 <title>Highcharts Example</title> 7 <title>Highcharts Example</title>
7 8
8 <style type="text/css"></style> 9 <style type="text/css"></style>
9 - </head> 10 +</head>
10 - <body> 11 +
12 +<body>
11 <script src="highcharts.js"></script> 13 <script src="highcharts.js"></script>
12 <script src="modules/exporting.js"></script> 14 <script src="modules/exporting.js"></script>
13 <script src="modules/export-data.js"></script> 15 <script src="modules/export-data.js"></script>
14 16
15 - <div 17 + <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></div>
16 - id="container1"
17 - style="width:1260px; height: 400px; margin: 0 auto"
18 - ></div>
19 18
20 <div style="width:1275px; margin:0 auto;"> 19 <div style="width:1275px; margin:0 auto;">
21 <div style="display: inline-block;"> 20 <div style="display: inline-block;">
22 - <div 21 + <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
23 - id="container2"
24 - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
25 - ></div>
26 </div> 22 </div>
27 <div style="display: inline-block;"> 23 <div style="display: inline-block;">
28 - <div 24 + <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
29 - id="container3"
30 - style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
31 - ></div>
32 </div> 25 </div>
33 26
34 <div style="display: inline-block;"> 27 <div style="display: inline-block;">
35 - <div 28 + <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
36 - id="container4"
37 - style="width:400px; height: 300px; padding:0; margin-left:0px;"
38 - ></div>
39 </div> 29 </div>
40 </div> 30 </div>
41 31
42 32
43 -<script src="/socket.io/socket.io.js"></script> 33 + <script src="/socket.io/socket.io.js"></script>
44 -<script> 34 + <script>
45 - let client_data={ 35 + var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
46 - birth : "<%=birth%>", 36 + socket.emit("connection", "client in");
47 - name : "<%=name%>" 37 + socket.on("weatherInfo_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
48 - }
49 - var socket = io.connect('/',{transports: ['websocket'],upgrade:false});
50 - socket.emit("connection",client_data);
51 - socket.on("weatherInfo_minutely_send_to_client",(info)=>{ //서버에서 client에게 메세지 전송
52 console.log(info); 38 console.log(info);
39 +
40 + var date = new Date().getTime();
41 +
42 + chart1.series[0].addPoint({
43 + x: date,
44 + y: info.death
45 + })
46 +
47 + chart2.series[0].addPoint({
48 + x: date,
49 + y: info.temperature
50 + })
51 +
52 + chart3.series[0].addPoint({
53 + x: date,
54 + y: info.wind
55 + })
56 +
57 + chart4.series[0].addPoint({
58 + x: date,
59 + y: info.rain
60 + })
61 +
53 }); 62 });
54 -</script> 63 + </script>
55 - <!-- 첫번째 그래프 -->
56 <script type="text/javascript"> 64 <script type="text/javascript">
57 - Highcharts.chart("container1", { 65 + //사망률
66 + var chart1 = Highcharts.chart("container1", {
58 chart: { 67 chart: {
59 type: "areaspline", 68 type: "areaspline",
60 animation: Highcharts.svg, // don't animate in old IE 69 animation: Highcharts.svg, // don't animate in old IE
61 marginRight: 10, 70 marginRight: 10,
62 - events: { 71 + // events: {
63 - load: function() { 72 + // load: function () {
64 - // set up the updating of the chart each second 73 + // // set up the updating of the chart each second
65 - var series = this.series[0]; 74 + // var series = this.series[0];
66 - setInterval(function() { 75 + // setInterval(function () {
67 - var x = new Date().getTime(), // 현재 시간 76 + // var x = new Date().getTime(), // 현재 시간
68 - y = 0; //여기에 새로 넣을 값 77 + // y = 0; //여기에 새로 넣을 값
69 - series.addPoint([x, y], true, true); 78 + // series.addPoint([x, y], true, true);
70 - }, 60000); //1000=1초 -> 1분=60000 79 + // }, 60000); //1000=1초 -> 1분=60000
71 - } 80 + // }
72 - } 81 + // }
73 }, 82 },
74 83
75 time: { 84 time: {
...@@ -77,7 +86,7 @@ ...@@ -77,7 +86,7 @@
77 }, 86 },
78 87
79 title: { 88 title: {
80 - text: "<%=name%>님의 실시간 사망률" 89 + text: "실시간 사망률"
81 }, 90 },
82 xAxis: { 91 xAxis: {
83 type: "datetime", 92 type: "datetime",
...@@ -85,7 +94,11 @@ ...@@ -85,7 +94,11 @@
85 }, 94 },
86 yAxis: { 95 yAxis: {
87 title: { 96 title: {
88 - text: "Value" 97 + text: "<%=name%>님의 실시간 사망률"
98 + },
99 + xAxis: {
100 + type: "datetime",
101 + tickPixelInterval: 150
89 }, 102 },
90 plotLines: [ 103 plotLines: [
91 { 104 {
...@@ -118,14 +131,13 @@ ...@@ -118,14 +131,13 @@
118 series: [ 131 series: [
119 { 132 {
120 name: "사망률", 133 name: "사망률",
121 - data: (function() { 134 + data: (function () {
122 var deathArr = [], 135 var deathArr = [],
123 time = new Date().getTime(); 136 time = new Date().getTime();
124 - var length= <%=dataLen%>; 137 + var length = <%=dataLen%>;
125 - var i=-9; //얘는 시간계산용 138 + var i = -9; //얘는 시간계산용
126 - var j=0; //얘는 반복문용 139 + var j = 0; //얘는 반복문용
127 - for(;j<10-length;j++) 140 + for (; j < 10 - length; j++) {
128 - {
129 deathArr.push({ 141 deathArr.push({
130 x: time + i * 60000, 142 x: time + i * 60000,
131 y: 0 143 y: 0
...@@ -133,9 +145,9 @@ ...@@ -133,9 +145,9 @@
133 i++; 145 i++;
134 } 146 }
135 147
136 - <%probArr.forEach((probArr)=>{%> 148 + <% probArr.forEach((probArr) => {%>
137 var temp; 149 var temp;
138 - temp= <%=probArr%>; 150 + temp = <%=probArr %>;
139 151
140 // for(;j<10;j++) 152 // for(;j<10;j++)
141 // { 153 // {
...@@ -152,33 +164,30 @@ ...@@ -152,33 +164,30 @@
152 }) 164 })
153 i++; 165 i++;
154 166
155 - <%})%> 167 + <%}) %>
156 168
157 return deathArr; 169 return deathArr;
158 })() 170 })()
159 } 171 }
160 ] 172 ]
161 }); 173 });
162 - </script> 174 + //기온
163 - 175 + var chart2 = Highcharts.chart("container2", {
164 - <!-- 두번째 그래프 -->
165 - <script type="text/javascript">
166 - Highcharts.chart("container2", {
167 chart: { 176 chart: {
168 type: "spline", 177 type: "spline",
169 animation: Highcharts.svg, // don't animate in old IE 178 animation: Highcharts.svg, // don't animate in old IE
170 marginRight: 10, 179 marginRight: 10,
171 - events: { 180 + // events: {
172 - load: function() { 181 + // load: function () {
173 - // set up the updating of the chart each second 182 + // // set up the updating of the chart each second
174 - var series = this.series[0]; 183 + // var series = this.series[0];
175 - setInterval(function() { 184 + // setInterval(function () {
176 - var x = new Date().getTime(), // 현재 시간 185 + // var x = new Date().getTime(), // 현재 시간
177 - y = 0; // 186 + // y = 0; //
178 - series.addPoint([x, y], true, true); 187 + // series.addPoint([x, y], true, true);
179 - }, 60000); //1000=1초 188 + // }, 60000); //1000=1초
180 - } 189 + // }
181 - } 190 + // }
182 }, 191 },
183 192
184 time: { 193 time: {
...@@ -227,14 +236,13 @@ ...@@ -227,14 +236,13 @@
227 series: [ 236 series: [
228 { 237 {
229 name: "기온", 238 name: "기온",
230 - data: (function() { 239 + data: (function () {
231 var tempArr = [], 240 var tempArr = [],
232 time = new Date().getTime(); 241 time = new Date().getTime();
233 - var length= <%=dataLen%>; 242 + var length = <%=dataLen%>;
234 - var i=-9; 243 + var i = -9;
235 - var j=0; 244 + var j = 0;
236 - for(j;j<10-length;j++) 245 + for (j; j < 10 - length; j++) {
237 - {
238 tempArr.push({ 246 tempArr.push({
239 x: time + i * 60000, 247 x: time + i * 60000,
240 y: 0 248 y: 0
...@@ -242,9 +250,9 @@ ...@@ -242,9 +250,9 @@
242 i++; 250 i++;
243 } 251 }
244 252
245 - <%ptArr.forEach((ptArr)=>{%> 253 + <% ptArr.forEach((ptArr) => {%>
246 var temp; 254 var temp;
247 - temp= <%=ptArr%>; 255 + temp = <%=ptArr %>;
248 256
249 // for(j;j<10;j++) 257 // for(j;j<10;j++)
250 // { 258 // {
...@@ -261,33 +269,30 @@ ...@@ -261,33 +269,30 @@
261 }) 269 })
262 i++; 270 i++;
263 271
264 - <%})%> 272 + <%}) %>
265 273
266 return tempArr; 274 return tempArr;
267 })() 275 })()
268 } 276 }
269 ] 277 ]
270 }); 278 });
271 - </script> 279 + //풍속
272 - 280 + var chart3 = Highcharts.chart("container3", {
273 - <!-- 세번째 그래프 -->
274 - <script type="text/javascript">
275 - Highcharts.chart("container3", {
276 chart: { 281 chart: {
277 type: "spline", 282 type: "spline",
278 animation: Highcharts.svg, // don't animate in old IE 283 animation: Highcharts.svg, // don't animate in old IE
279 marginRight: 10, 284 marginRight: 10,
280 - events: { 285 + // events: {
281 - load: function() { 286 + // load: function () {
282 - // set up the updating of the chart each second 287 + // // set up the updating of the chart each second
283 - var series = this.series[0]; 288 + // var series = this.series[0];
284 - setInterval(function() { 289 + // setInterval(function () {
285 - var x = new Date().getTime(), // 현재 시간 290 + // var x = new Date().getTime(), // 현재 시간
286 - y = 0; // 291 + // y = 0; //
287 - series.addPoint([x, y], true, true); 292 + // series.addPoint([x, y], true, true);
288 - }, 60000); //1000=1초 293 + // }, 60000); //1000=1초
289 - } 294 + // }
290 - } 295 + // }
291 }, 296 },
292 297
293 time: { 298 time: {
...@@ -336,14 +341,13 @@ ...@@ -336,14 +341,13 @@
336 series: [ 341 series: [
337 { 342 {
338 name: "풍속", 343 name: "풍속",
339 - data: (function() { 344 + data: (function () {
340 var windArr = [], 345 var windArr = [],
341 time = new Date().getTime(); 346 time = new Date().getTime();
342 - var length= <%=dataLen%>; 347 + var length = <%=dataLen%>;
343 - var i=-9; 348 + var i = -9;
344 - var j=0; 349 + var j = 0;
345 - for(j;j<10-length;j++) 350 + for (j; j < 10 - length; j++) {
346 - {
347 windArr.push({ 351 windArr.push({
348 x: time + i * 60000, 352 x: time + i * 60000,
349 y: 0 353 y: 0
...@@ -351,9 +355,9 @@ ...@@ -351,9 +355,9 @@
351 i++; 355 i++;
352 } 356 }
353 357
354 - <%wsArr.forEach((wsArr)=>{%> 358 + <% wsArr.forEach((wsArr) => {%>
355 var temp; 359 var temp;
356 - temp= <%=wsArr%>; 360 + temp = <%=wsArr %>;
357 361
358 // for(j;j<10;j++) 362 // for(j;j<10;j++)
359 // { 363 // {
...@@ -370,33 +374,30 @@ ...@@ -370,33 +374,30 @@
370 }) 374 })
371 i++; 375 i++;
372 376
373 - <%})%> 377 + <%}) %>
374 378
375 return windArr; 379 return windArr;
376 })() 380 })()
377 } 381 }
378 ] 382 ]
379 }); 383 });
380 - </script> 384 + //강수량
381 - 385 + var chart4 = Highcharts.chart("container4", {
382 - <!-- 네번째 그래프 -->
383 - <script type="text/javascript">
384 - Highcharts.chart("container4", {
385 chart: { 386 chart: {
386 type: "spline", 387 type: "spline",
387 animation: Highcharts.svg, // don't animate in old IE 388 animation: Highcharts.svg, // don't animate in old IE
388 marginRight: 10, 389 marginRight: 10,
389 - events: { 390 + // events: {
390 - load: function() { 391 + // load: function () {
391 - // set up the updating of the chart each second 392 + // // set up the updating of the chart each second
392 - var series = this.series[0]; 393 + // var series = this.series[0];
393 - setInterval(function() { 394 + // setInterval(function () {
394 - var x = new Date().getTime(), // 현재 시간 395 + // var x = new Date().getTime(), // 현재 시간
395 - y = 0; // 396 + // y = 0; //
396 - series.addPoint([x, y], true, true); 397 + // series.addPoint([x, y], true, true);
397 - }, 60000); //1000=1초 398 + // }, 60000); //1000=1초
398 - } 399 + // }
399 - } 400 + // }
400 }, 401 },
401 402
402 time: { 403 time: {
...@@ -445,14 +446,13 @@ ...@@ -445,14 +446,13 @@
445 series: [ 446 series: [
446 { 447 {
447 name: "강수량", 448 name: "강수량",
448 - data: (function() { 449 + data: (function () {
449 var rainArr = [], 450 var rainArr = [],
450 time = new Date().getTime(); 451 time = new Date().getTime();
451 - var length= <%=dataLen%>; 452 + var length = <%=dataLen%>;
452 - var i=-9; 453 + var i = -9;
453 - var j=0; 454 + var j = 0;
454 - for(j;j<10-length;j++) 455 + for (j; j < 10 - length; j++) {
455 - {
456 rainArr.push({ 456 rainArr.push({
457 x: time + i * 60000, 457 x: time + i * 60000,
458 y: 0 458 y: 0
...@@ -460,9 +460,9 @@ ...@@ -460,9 +460,9 @@
460 i++; 460 i++;
461 } 461 }
462 462
463 - <%rainArr.forEach((rainArr)=>{%> 463 + <% rainArr.forEach((rainArr) => {%>
464 var temp; 464 var temp;
465 - temp= <%=rainArr%>; 465 + temp = <%=rainArr %>;
466 466
467 // for(j;j<10;j++) 467 // for(j;j<10;j++)
468 // { 468 // {
...@@ -479,7 +479,7 @@ ...@@ -479,7 +479,7 @@
479 }) 479 })
480 i++; 480 i++;
481 481
482 - <%})%> 482 + <%}) %>
483 483
484 return rainArr; 484 return rainArr;
485 })() 485 })()
...@@ -487,5 +487,6 @@ ...@@ -487,5 +487,6 @@
487 ] 487 ]
488 }); 488 });
489 </script> 489 </script>
490 - </body> 490 +</body>
491 +
491 </html> 492 </html>
...\ No newline at end of file ...\ No newline at end of file
......