교통사고 chart 추가

김주희
Commit 4bdfa4f8f78a19610ab87c015e60d811fc7d1aeb 4bdfa4f8 1 parent 2c194c4d
Showing 1 changed file with 137 additions and 80 deletions
views/index.ejs
--- a/views/index.ejs
View file @4bdfa4f
+++ b/views/index.ejs
View file @4bdfa4f
@@ -3,12 +3,10 @@
 <head>
   <!-- font -->
   <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
-
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Highcharts Example</title>
-
   <style type="text/css">
   html {
   margin: 0;
@@ -17,10 +15,9 @@
     body {
       margin: 0;
       padding: 0;
-
       /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
       /* background-color:#65799B; */
-      /* background-image: url("2.jpg");
+      /* background-image: url("2.jpg"); */
       background-repeat: no-repeat;
       background-size: cover; */
     }
@@ -29,20 +26,15 @@
       top: 0;
       width: 100%;
     }
-
   </style>
 </head>
-
 <body>
   <script src="highcharts.js"></script>
   <script src="modules/exporting.js"></script>
   <script src="modules/export-data.js"></script>
-
   <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
-
   <div id="banner">
         <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
-
   <div style="width:1275px;  margin:0 auto;">
     <div style="display: inline-block;">
       <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
@@ -50,12 +42,13 @@
     <div style="display: inline-block;">
       <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
     </div>
-
     <div style="display: inline-block;">
       <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
     </div>
+	<div style="display: inline-block;">
+      <div id="container5" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
+    </div>
   </div>
-
   <script src="/socket.io/socket.io.js"></script>
   <script type="text/javascript">
       let client_data = {
@@ -63,7 +56,6 @@
       name: "<%=name%>"
     }
-
     var chart1 = Highcharts.chart("container1", {
       chart: {
         type: "spline",
@@ -75,25 +67,22 @@
         //     var series = this.series[0];
         //     setInterval(function () {
         //       var x = new Date().getTime(), // 현재 시간
-        //         y = Math.random(); //여기에 새로 넣을 값
+        //         y = Math.random(); //여기에 새로 넣을 값(실시간 사망률)
         //       series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
         //     }, 1000); //1000=1초 -> 1분=60000
         //   }
         // },
-
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "<%=name%>님의 실시간 사망 확률",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'32px'
         }
       },
@@ -113,7 +102,6 @@
             color: "white"
           }
         },
-
         plotLines: [
           {
             value: 0,
@@ -126,7 +114,6 @@
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -148,7 +135,6 @@
       exporting: {
         enabled: false
       },
-
 plotOptions: {
         series: {
             marker: {
@@ -156,7 +142,6 @@ plotOptions: {
             }
         }
     },
-
         series: [
           {
             name: "사망률",
@@ -173,11 +158,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% probArr.forEach((probArr) => {%>
                 var temp;
                 temp = <%=probArr %>;
-
                 // for(;j<10;j++)
                 // {
                 //   deathArr.push({
@@ -186,25 +169,18 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 deathArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return deathArr;
             })(),
-
             color: "#FFFFFF"
           }
         ]
-
     });
-
-
     var chart2 = Highcharts.chart("container2", {
       chart: {
         type: "spline",
@@ -221,23 +197,19 @@ plotOptions: {
         //     }, 3000); //1000=1초
         //   }
         // },
-
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "기온",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
-
       },
       xAxis: {
         type: "datetime",
@@ -267,7 +239,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -305,11 +276,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% ptArr.forEach((ptArr) => {%>
                 var temp;
                 temp = <%=ptArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   tempArr.push({
@@ -318,23 +287,18 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 tempArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return tempArr;
             })(),
-
             color: "#FFE08C"
           }
         ]
     });
-
     var chart3 = Highcharts.chart("container3", {
       chart: {
         type: "spline",
@@ -353,17 +317,15 @@ plotOptions: {
         // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "풍속",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
       },
@@ -395,7 +357,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -433,11 +394,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% wsArr.forEach((wsArr) => {%>
                 var temp;
                 temp = <%=wsArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   windArr.push({
@@ -446,22 +405,17 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 windArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return windArr;
             })(),
-
             color: "#FFE08C"
           }
         ]    });
-
     var chart4 = Highcharts.chart("container4", {
       chart: {
         type: "spline",
@@ -480,17 +434,15 @@ plotOptions: {
         // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "강수량",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
       },
@@ -522,7 +474,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -560,11 +511,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% rainArr.forEach((rainArr) => {%>
                 var temp;
                 temp = <%=rainArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   rainArr.push({
@@ -573,32 +522,141 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 rainArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return rainArr;
             })(),
             color: "#FFE08C"
-
           }
         ]
-
-
     });
+	var chart5 = Highcharts.chart("container5", {
+      chart: {
+        type: "spline",
+        animation: Highcharts.svg, // don't animate in old IE
+        marginRight: 10,
+        // events: {
+        //   load: function () {
+        //     // set up the updating of the chart each second
+        //     var series = this.series[0];
+        //     setInterval(function () {
+        //       var x = new Date().getTime(), // 현재 시간
+        //         y = Math.random(); //
+        //       series.addPoint([x, y], true, true);
+        //     }, 3000); //1000=1초
+        //   }
+        // },
+        backgroundColor: "rgba(255, 255, 255, 0.0)"
+      },
+      time: {
+        useUTC: false
+      },
+      title: {
+        text: "교통사고",
+        style: {
+          color: "#FFFFFF",
+          //fontWeight: "bold",
+          fontFamily: 'Do Hyeon',
+          fontSize:'25px'
+        }
+      },
+      xAxis: {
+        type: "datetime",
+        tickPixelInterval: 150,
+        labels: {
+          style: {
+            color: "white"
+          }
+        }
+      },
+      yAxis: {
+        title: {
+          text: "교통사고발생횟수(번)",
+          style: {
+            color: "white"
+          }
+        },
+        plotLines: [
+          {
+            value: 0,
+            width: 1,
+            color: "#808080"
+          }
+        ],
+        labels: {
+            style: {
+              color: "white"
+            }
+          }
+      },
+      tooltip: {
+        headerFormat: "<b>{series.name}</b><br/>",
+        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 교통사고 발생 수 : {point.y:.2f}m/s"
+      },
+      legend: {
+        //enabled: false
+        layout: "vertical",
+        align: "left",
+        verticalAlign: "top",
+        x: 100,
+        y: 50,
+        floating: true,
+        borderWidth: 1,
+        backgroundColor:
+          (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
+          "#FFFFFF"
+      },
+      exporting: {
+        enabled: false
+      },
+      series: [
+          {
+            name: "교통사고 발생수",
+            data: (function () {
+              var trafficArr = [], //windArr
+                time = new Date().getTime();
+              var length = <%=dataLen%>;
+              var i = -9;
+              var j = 0;
+              for (j; j < 10 - length; j++) {
+                trafficArr.push({
+                  x: time + i * 60000,
+                  y: 0
+                })
+                i++;
+              }
+              <% occurArr.forEach((occurArr) => {%>
+                var temp;
+                temp = <%=occurArr %>;
+                // for(j;j<10;j++)
+                // {
+                //   trafficArr.push({
+                //   x: time + i * 60000,
+                //   y: temp
+                // }) 
+                // i++;
+                // }
+                trafficArr.push({
+                  x: time + i * 60000,
+                  y: temp
+                })
+                i++;
+              <%}) %>
+              return trafficArr;
+            })(),
+            color: "#FFE08C"
+          }
+        ]    });
     var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
     socket.emit("connection", client_data);
-    socket.on("weatherInfo_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
+    socket.on("weather_and_traffic_Info_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
       console.log(info);
-
         var date = new Date().getTime();
-
       chart1.series[0].addPoint({
         x: date,
         y: info.death,
@@ -609,24 +667,23 @@ plotOptions: {
         y: info.temperature*1,
         color:"#FFE08C"
       });
-
       chart3.series[0].addPoint({
         x: date,
         y: info.wind*1,
         color:"#FFE08C"
       });
-
       chart4.series[0].addPoint({
         x: date,
         y: info.rain*1,
         color:"#FFE08C"
       });
-
+	  chart5.series[0].addPoint({
+        x: date,
+        y: info.occurence*1,
+        color:"#FFE08C"
+      });
     });
-
   </script>
   </div>
-
 </body>
-
 </html>
\ No newline at end of file