김윤지 / Probability Death

Go to a project
Toggle navigation Toggle navigation pinning
김주희
67bbb272 1 parent d830e5e3

대기오염 차트 추가

Inline Side-by-side
Showing 1 changed file with 127 additions and 2 deletions
1 -<!-- <!DOCTYPE html> 1 +<!-- <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <!-- font --> 4 <!-- font -->
...@@ -48,6 +48,9 @@ ...@@ -48,6 +48,9 @@
48 <div style="display: inline-block;"> 48 <div style="display: inline-block;">
49 <div id="container5" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div> 49 <div id="container5" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
50 </div> 50 </div>
51 + <div style="display: inline-block;">
52 + <div id="container6" style="width:800px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
53 + </div>
51 </div> 54 </div>
52 <script src="/socket.io/socket.io.js"></script> 55 <script src="/socket.io/socket.io.js"></script>
53 <script type="text/javascript"> 56 <script type="text/javascript">
...@@ -652,9 +655,126 @@ plotOptions: { ...@@ -652,9 +655,126 @@ plotOptions: {
652 color: "#FFE08C" 655 color: "#FFE08C"
653 } 656 }
654 ] }); 657 ] });
658 + var chart6 = Highcharts.chart("container6", {
659 + chart: {
660 + type: "spline",
661 + animation: Highcharts.svg, // don't animate in old IE
662 + marginRight: 10,
663 + // events: {
664 + // load: function () {
665 + // // set up the updating of the chart each second
666 + // var series = this.series[0];
667 + // setInterval(function () {
668 + // var x = new Date().getTime(), // 현재 시간
669 + // y = Math.random(); //
670 + // series.addPoint([x, y], true, true);
671 + // }, 3000); //1000=1초
672 + // }
673 + // },
674 + backgroundColor: "rgba(255, 255, 255, 0.0)"
675 + },
676 + time: {
677 + useUTC: false
678 + },
679 + title: {
680 + text: "대기오염",
681 + style: {
682 + color: "#FFFFFF",
683 + //fontWeight: "bold",
684 + fontFamily: 'Do Hyeon',
685 + fontSize:'25px'
686 + }
687 + },
688 + xAxis: {
689 + type: "datetime",
690 + tickPixelInterval: 150,
691 + labels: {
692 + style: {
693 + color: "white"
694 + }
695 + }
696 + },
697 + yAxis: {
698 + title: {
699 + text: "대기오염지수(aqius)",
700 + style: {
701 + color: "white"
702 + }
703 + },
704 + plotLines: [
705 + {
706 + value: 0,
707 + width: 1,
708 + color: "#808080"
709 + }
710 + ],
711 + labels: {
712 + style: {
713 + color: "white"
714 + }
715 + }
716 + },
717 + tooltip: {
718 + headerFormat: "<b>{series.name}</b><br/>",
719 + pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 대기오염지수 : {point.y:.2f}aqius - 0-50 좋음, 51-100 보통, 101-150 나쁨"
720 + },
721 + legend: {
722 + //enabled: false
723 + layout: "vertical",
724 + align: "left",
725 + verticalAlign: "top",
726 + x: 100,
727 + y: 50,
728 + floating: true,
729 + borderWidth: 1,
730 + backgroundColor:
731 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
732 + "#FFFFFF"
733 + },
734 + exporting: {
735 + enabled: false
736 + },
737 + series: [
738 + {
739 + name: "대기오염지수",
740 + data: (function () {
741 + var pollutionArr = [],
742 + time = new Date().getTime();
743 + var length = <%=dataLen%>;
744 + var i = -9;
745 + var j = 0;
746 + for (j; j < 10 - length; j++) {
747 + pollutionArr.push({
748 + x: time + i * 60000,
749 + y: 0
750 + })
751 + i++;
752 + }
753 + <% airArr.forEach((occurArr) => {%>
754 + var temp;
755 + temp = <%=airArr %>;
756 + // for(j;j<10;j++)
757 + // {
758 + // pollutionArr.push({
759 + // x: time + i * 60000,
760 + // y: temp
761 + // })
762 + // i++;
763 + // }
764 + pollutionArr.push({
765 + x: time + i * 60000,
766 + y: temp
767 + })
768 + i++;
769 + <%}) %>
770 + return pollutionArr;
771 + })(),
772 + color: "#FFE08C"
773 + }
774 + ] });
655 var socket = io.connect('/', { transports: ['websocket'], upgrade: false }); 775 var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
656 socket.emit("connection", client_data); 776 socket.emit("connection", client_data);
657 - socket.on("weather_and_traffic_Info_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송 777 + socket.on("weather_traffic_air_Info_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
658 console.log(info); 778 console.log(info);
659 var date = new Date().getTime(); 779 var date = new Date().getTime();
660 chart1.series[0].addPoint({ 780 chart1.series[0].addPoint({
...@@ -682,6 +802,11 @@ plotOptions: { ...@@ -682,6 +802,11 @@ plotOptions: {
682 y: info.occurence*1, 802 y: info.occurence*1,
683 color:"#FFE08C" 803 color:"#FFE08C"
684 }); 804 });
805 + chart6.series[0].addPoint({
806 + x: date,
807 + y: info.pollution*1,
808 + color:"#FFE08C"
809 + });
685 }); 810 });
686 </script> 811 </script>
687 </div> 812 </div>
......