스크립트 하나로 합치기

조민지
Commit 58a2b7f8101b66acb33408812501e4d5a6b543e7 58a2b7f8 1 parent de17b8ba
Showing 1 changed file with 62 additions and 85 deletions
views/index.ejs
--- a/views/index.ejs
View file @58a2b7f
+++ b/views/index.ejs
View file @58a2b7f
 <!DOCTYPE html>
 <html>
-  <head>
+
+<head>
   <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"></style>
-  </head>
+</head>
-  <body>
+
+<body>
   <script src="highcharts.js"></script>
   <script src="modules/exporting.js"></script>
   <script src="modules/export-data.js"></script>
-    <div
+  <div id="container1" style="width:1260px; height: 400px; margin: 0 auto"></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
+      <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
-          id="container2"
-          style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
-        ></div>
     </div>
     <div style="display: inline-block;">
-        <div
+      <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
-          id="container3"
-          style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
-        ></div>
     </div>
     <div style="display: inline-block;">
-        <div
+      <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
-          id="container4"
-          style="width:400px; height: 300px; padding:0; margin-left:0px;"
-        ></div>
     </div>
   </div>
-<script src="/socket.io/socket.io.js"></script>
+  <script src="/socket.io/socket.io.js"></script>
-<script>
+  <script type="text/javascript">
-  var socket = io.connect('/',{transports: ['websocket'],upgrade:false});
+    var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
-  socket.emit("connection","client in");
+    socket.emit("connection", "client in");
-  socket.on("weatherInfo_minutely_send_to_client",(info)=>{  //서버에서 client에게 메세지 전송
+    socket.on("weatherInfo_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
       console.log(info);
+
     });
-</script>
+
-    <!-- 첫번째 그래프 -->
+    var chart1 = Highcharts.chart("container1", {
-    <script type="text/javascript">
-      Highcharts.chart("container1", {
       chart: {
         type: "areaspline",
         animation: Highcharts.svg, // don't animate in old IE
         marginRight: 10,
         events: {
-            load: function() {
+          load: function () {
             // set up the updating of the chart each second
             var series = this.series[0];
-              setInterval(function() {
+            setInterval(function () {
               var x = new Date().getTime(), // 현재 시간
                 y = 0; //여기에 새로 넣을 값
               series.addPoint([x, y], true, true);
@@ -114,14 +103,13 @@
       series: [
         {
           name: "사망률",
-            data: (function() {
+          data: (function () {
             var deathArr = [],
               time = new Date().getTime();
-              var length= <%=dataLen%>;
+            var length = <%=dataLen%>;
-              var i=-9; //얘는 시간계산용
+            var i = -9; //얘는 시간계산용
-              var j=0; //얘는 반복문용
+            var j = 0; //얘는 반복문용
-              for(;j<10-length;j++)
+            for (; j < 10 - length; j++) {
-              {
               deathArr.push({
                 x: time + i * 60000,
                 y: 0
@@ -129,9 +117,9 @@
               i++;
             }
-              <%probArr.forEach((probArr)=>{%>
+              <% probArr.forEach((probArr) => {%>
                 var temp;
-                temp= <%=probArr%>;
+              temp = <%=probArr %>;
               // for(;j<10;j++)
               // {
@@ -148,27 +136,24 @@
               })
               i++;
-              <%})%>
+              <%}) %>
               return deathArr;
           })()
         }
       ]
     });
-    </script>
-    <!-- 두번째 그래프 -->
+    var chart2 = Highcharts.chart("container2", {
-    <script type="text/javascript">
-      Highcharts.chart("container2", {
       chart: {
         type: "spline",
         animation: Highcharts.svg, // don't animate in old IE
         marginRight: 10,
         events: {
-            load: function() {
+          load: function () {
             // set up the updating of the chart each second
             var series = this.series[0];
-              setInterval(function() {
+            setInterval(function () {
               var x = new Date().getTime(), // 현재 시간
                 y = 0; //
               series.addPoint([x, y], true, true);
@@ -223,14 +208,13 @@
       series: [
         {
           name: "기온",
-            data: (function() {
+          data: (function () {
             var tempArr = [],
               time = new Date().getTime();
-              var length= <%=dataLen%>;
+            var length = <%=dataLen%>;
-              var i=-9;
+            var i = -9;
-              var j=0;
+            var j = 0;
-              for(j;j<10-length;j++)
+            for (j; j < 10 - length; j++) {
-              {
               tempArr.push({
                 x: time + i * 60000,
                 y: 0
@@ -238,9 +222,9 @@
               i++;
             }
-              <%ptArr.forEach((ptArr)=>{%>
+              <% ptArr.forEach((ptArr) => {%>
                 var temp;
-                temp= <%=ptArr%>;
+              temp = <%=ptArr %>;
               // for(j;j<10;j++)
               // {
@@ -257,27 +241,24 @@
               })
               i++;
-              <%})%>
+              <%}) %>
               return tempArr;
           })()
         }
       ]
     });
-    </script>
-    <!-- 세번째 그래프 -->
+    var chart3 = Highcharts.chart("container3", {
-    <script type="text/javascript">
-      Highcharts.chart("container3", {
       chart: {
         type: "spline",
         animation: Highcharts.svg, // don't animate in old IE
         marginRight: 10,
         events: {
-            load: function() {
+          load: function () {
             // set up the updating of the chart each second
             var series = this.series[0];
-              setInterval(function() {
+            setInterval(function () {
               var x = new Date().getTime(), // 현재 시간
                 y = 0; //
               series.addPoint([x, y], true, true);
@@ -332,14 +313,13 @@
       series: [
         {
           name: "풍속",
-            data: (function() {
+          data: (function () {
             var windArr = [],
               time = new Date().getTime();
-              var length= <%=dataLen%>;
+            var length = <%=dataLen%>;
-              var i=-9;
+            var i = -9;
-              var j=0;
+            var j = 0;
-              for(j;j<10-length;j++)
+            for (j; j < 10 - length; j++) {
-              {
               windArr.push({
                 x: time + i * 60000,
                 y: 0
@@ -347,9 +327,9 @@
               i++;
             }
-              <%wsArr.forEach((wsArr)=>{%>
+              <% wsArr.forEach((wsArr) => {%>
                 var temp;
-                temp= <%=wsArr%>;
+              temp = <%=wsArr %>;
               // for(j;j<10;j++)
               // {
@@ -366,27 +346,24 @@
               })
               i++;
-              <%})%>
+              <%}) %>
               return windArr;
           })()
         }
       ]
     });
-    </script>
-    <!-- 네번째 그래프 -->
+    var chart4 = Highcharts.chart("container4", {
-    <script type="text/javascript">
-      Highcharts.chart("container4", {
       chart: {
         type: "spline",
         animation: Highcharts.svg, // don't animate in old IE
         marginRight: 10,
         events: {
-            load: function() {
+          load: function () {
             // set up the updating of the chart each second
             var series = this.series[0];
-              setInterval(function() {
+            setInterval(function () {
               var x = new Date().getTime(), // 현재 시간
                 y = 0; //
               series.addPoint([x, y], true, true);
@@ -441,14 +418,13 @@
       series: [
         {
           name: "강수량",
-            data: (function() {
+          data: (function () {
             var rainArr = [],
               time = new Date().getTime();
-              var length= <%=dataLen%>;
+            var length = <%=dataLen%>;
-              var i=-9;
+            var i = -9;
-              var j=0;
+            var j = 0;
-              for(j;j<10-length;j++)
+            for (j; j < 10 - length; j++) {
-              {
               rainArr.push({
                 x: time + i * 60000,
                 y: 0
@@ -456,9 +432,9 @@
               i++;
             }
-              <%rainArr.forEach((rainArr)=>{%>
+              <% rainArr.forEach((rainArr) => {%>
                 var temp;
-                temp= <%=rainArr%>;
+              temp = <%=rainArr %>;
               // for(j;j<10;j++)
               // {
@@ -475,7 +451,7 @@
               })
               i++;
-              <%})%>
+              <%}) %>
               return rainArr;
           })()
@@ -483,5 +459,6 @@
       ]
     });
   </script>
-  </body>
+</body>
+
 </html>
\ No newline at end of file