김윤지 / 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
<!-- <!DOCTYPE html>
<!-- <!DOCTYPE html>
<html>
<head>
<!-- font -->
......@@ -48,6 +48,9 @@
<div style="display: inline-block;">
<div id="container5" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
</div>
<div style="display: inline-block;">
<div id="container6" style="width:800px; 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">
......@@ -652,9 +655,126 @@ plotOptions: {
color: "#FFE08C"
}
] });
var chart6 = Highcharts.chart("container6", {
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: "대기오염지수(aqius)",
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}aqius - 0-50 좋음, 51-100 보통, 101-150 나쁨"
},
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 pollutionArr = [],
time = new Date().getTime();
var length = <%=dataLen%>;
var i = -9;
var j = 0;
for (j; j < 10 - length; j++) {
pollutionArr.push({
x: time + i * 60000,
y: 0
})
i++;
}
<% airArr.forEach((occurArr) => {%>
var temp;
temp = <%=airArr %>;
// for(j;j<10;j++)
// {
// pollutionArr.push({
// x: time + i * 60000,
// y: temp
// })
// i++;
// }
pollutionArr.push({
x: time + i * 60000,
y: temp
})
i++;
<%}) %>
return pollutionArr;
})(),
color: "#FFE08C"
}
] });
var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
socket.emit("connection", client_data);
socket.on("weather_and_traffic_Info_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
socket.on("weather_traffic_air_Info_minutely_send_to_client", (info) => { //서버에서 client에게 메세지 전송
console.log(info);
var date = new Date().getTime();
chart1.series[0].addPoint({
......@@ -682,6 +802,11 @@ plotOptions: {
y: info.occurence*1,
color:"#FFE08C"
});
chart6.series[0].addPoint({
x: date,
y: info.pollution*1,
color:"#FFE08C"
});
});
</script>
</div>
......