Merge branch 'developing' of http://khuhub.khu.ac.kr/2017104029/2018_2_project into chart
Showing
9 changed files
with
730 additions
and
11 deletions
... | @@ -39,10 +39,8 @@ build/Release | ... | @@ -39,10 +39,8 @@ build/Release |
39 | # Dependency directories | 39 | # Dependency directories |
40 | node_modules/ | 40 | node_modules/ |
41 | jspm_packages/ | 41 | jspm_packages/ |
42 | -kakao_option.js | 42 | +keys/api_option.js |
43 | -db_option.js | 43 | +keys/db_option.js |
44 | -session.js | ||
45 | -kakao_option.js | ||
46 | # TypeScript v1 declaration files | 44 | # TypeScript v1 declaration files |
47 | typings/ | 45 | typings/ |
48 | 46 | ... | ... |
... | @@ -6,7 +6,9 @@ var logger = require('morgan'); | ... | @@ -6,7 +6,9 @@ var logger = require('morgan'); |
6 | var indexRouter = require('./routes/index'); | 6 | var indexRouter = require('./routes/index'); |
7 | var usersRouter = require('./routes/users'); | 7 | var usersRouter = require('./routes/users'); |
8 | 8 | ||
9 | -var app = express(); | 9 | +var app = express(), |
10 | +server= require('http').createServer(app), | ||
11 | +SOCKETIO=require('./lib/socketio.js'); | ||
10 | 12 | ||
11 | // view engine setup | 13 | // view engine setup |
12 | app.set('views', path.join(__dirname, 'views')); | 14 | app.set('views', path.join(__dirname, 'views')); |
... | @@ -37,4 +39,7 @@ app.use(function(err, req, res, next) { | ... | @@ -37,4 +39,7 @@ app.use(function(err, req, res, next) { |
37 | res.render('error'); | 39 | res.render('error'); |
38 | }); | 40 | }); |
39 | 41 | ||
42 | +server.listen(80); | ||
43 | +SOCKETIO(server,app); | ||
44 | + | ||
40 | module.exports = app; | 45 | module.exports = app; | ... | ... |
lib/db.js
0 → 100644
lib/example_result.json
0 → 100644
1 | +{ | ||
2 | + "weather": { | ||
3 | + "minutely": [ | ||
4 | + { | ||
5 | + "station": { | ||
6 | + "longitude": "127.1164", | ||
7 | + "latitude": "37.2772", | ||
8 | + "name": "기흥구", | ||
9 | + "id": "371", | ||
10 | + "type": "KMA" | ||
11 | + }, | ||
12 | + "wind": { | ||
13 | + "wdir": "189.50", | ||
14 | + "wspd": "2.20" | ||
15 | + }, | ||
16 | + "precipitation": { | ||
17 | + "sinceOntime": "0.00", | ||
18 | + "type": "0" | ||
19 | + }, | ||
20 | + "sky": { | ||
21 | + "code": "SKY_A07", | ||
22 | + "name": "흐림" | ||
23 | + }, | ||
24 | + "rain": { | ||
25 | + "sinceOntime": "0.00", | ||
26 | + "sinceMidnight": "", | ||
27 | + "last10min": "0.00", | ||
28 | + "last15min": "0.00", | ||
29 | + "last30min": "0.00", | ||
30 | + "last1hour": "0.00", | ||
31 | + "last6hour": "0.50", | ||
32 | + "last12hour": "0.50", | ||
33 | + "last24hour": "0.50" | ||
34 | + }, | ||
35 | + "temperature": { | ||
36 | + "tc": "5.90", | ||
37 | + "tmax": "7.00", | ||
38 | + "tmin": "-1.00" | ||
39 | + }, | ||
40 | + "humidity": "", | ||
41 | + "pressure": { | ||
42 | + "surface": "", | ||
43 | + "seaLevel": "" | ||
44 | + }, | ||
45 | + "lightning": "0", | ||
46 | + "timeObservation": "2018-12-06 14:14:00" | ||
47 | + } | ||
48 | + ] | ||
49 | + }, | ||
50 | + "common": { | ||
51 | + "alertYn": "Y", | ||
52 | + "stormYn": "N" | ||
53 | + }, | ||
54 | + "result": { | ||
55 | + "code": 9200, | ||
56 | + "requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240", | ||
57 | + "message": "성공" | ||
58 | + } | ||
59 | +}, | ||
60 | +{ | ||
61 | + "weather": { | ||
62 | + "wIndex": { | ||
63 | + "uvindex": [ | ||
64 | + { | ||
65 | + "grid": { | ||
66 | + "city": "경기도", | ||
67 | + "county": "수원시", | ||
68 | + "village": "" | ||
69 | + }, | ||
70 | + "day00": { | ||
71 | + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_00D.gif", | ||
72 | + "index": "20.00", | ||
73 | + "comment": "자외선 걱정 없어요" | ||
74 | + }, | ||
75 | + "day01": { | ||
76 | + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_01D.gif", | ||
77 | + "index": "20.00", | ||
78 | + "comment": "자외선 걱정 없어요" | ||
79 | + }, | ||
80 | + "day02": { | ||
81 | + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_02D.gif", | ||
82 | + "index": "10.00", | ||
83 | + "comment": "자외선 없는 날입니다" | ||
84 | + } | ||
85 | + } | ||
86 | + ], | ||
87 | + "timeRelease": "2018-12-09 06:00:00" | ||
88 | + } | ||
89 | + }, | ||
90 | + "common": { | ||
91 | + "alertYn": "Y", | ||
92 | + "stormYn": "N" | ||
93 | + }, | ||
94 | + "result": { | ||
95 | + "code": 9200, | ||
96 | + "requestUrl": "/weather/index/uv?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
97 | + "message": "성공" | ||
98 | + } | ||
99 | +}{ | ||
100 | + "weather": { | ||
101 | + "wIndex": { | ||
102 | + "thIndex": [ | ||
103 | + { | ||
104 | + "grid": { | ||
105 | + "city": "경기", | ||
106 | + "county": "용인시 기흥구", | ||
107 | + "village": "상갈동" | ||
108 | + }, | ||
109 | + "forecast": { | ||
110 | + "timeRelease": "2018-12-09 14:00:00", | ||
111 | + "index43hour": "37.85", | ||
112 | + "index4hour": "38.40", | ||
113 | + "index7hour": "34.36", | ||
114 | + "index10hour": "31.08", | ||
115 | + "index13hour": "31.08", | ||
116 | + "index16hour": "27.60", | ||
117 | + "index19hour": "35.76", | ||
118 | + "index22hour": "44.84", | ||
119 | + "index25hour": "47.47", | ||
120 | + "index28hour": "42.45", | ||
121 | + "index31hour": "39.37", | ||
122 | + "index34hour": "37.85", | ||
123 | + "index37hour": "36.54", | ||
124 | + "index40hour": "35.73", | ||
125 | + "index46hour": "42.99", | ||
126 | + "index49hour": "39.12", | ||
127 | + "index52hour": "37.79", | ||
128 | + "index55hour": "37.13", | ||
129 | + "index58hour": "36.29", | ||
130 | + "index61hour": "", | ||
131 | + "index64hour": "", | ||
132 | + "index67hour": "" | ||
133 | + }, | ||
134 | + "current": { | ||
135 | + "timeRelease": "2018-12-09 14:00:00", | ||
136 | + "index": "40.49" | ||
137 | + } | ||
138 | + } | ||
139 | + ] | ||
140 | + } | ||
141 | + }, | ||
142 | + "common": { | ||
143 | + "alertYn": "Y", | ||
144 | + "stormYn": "N" | ||
145 | + }, | ||
146 | + "result": { | ||
147 | + "code": 9200, | ||
148 | + "requestUrl": "/weather/index/th?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
149 | + "message": "성공" | ||
150 | + } | ||
151 | +}{ | ||
152 | + "weather": { | ||
153 | + "wIndex": { | ||
154 | + "heatIndex": [ | ||
155 | + { | ||
156 | + "grid": { | ||
157 | + "city": "경기", | ||
158 | + "county": "용인시 기흥구", | ||
159 | + "village": "상갈동" | ||
160 | + }, | ||
161 | + "forecast": { | ||
162 | + "timeRelease": "2018-12-09 14:00:00", | ||
163 | + "index4hour": "37.28", | ||
164 | + "index7hour": "70.81", | ||
165 | + "index10hour": "91.57", | ||
166 | + "index13hour": "91.57", | ||
167 | + "index16hour": "110.30", | ||
168 | + "index19hour": "71.89", | ||
169 | + "index22hour": "36.40", | ||
170 | + "index25hour": "27.82", | ||
171 | + "index28hour": "50.39", | ||
172 | + "index31hour": "61.62", | ||
173 | + "index34hour": "71.05", | ||
174 | + "index37hour": "75.20", | ||
175 | + "index40hour": "79.01", | ||
176 | + "index43hour": "71.05", | ||
177 | + "index46hour": "52.61", | ||
178 | + "index49hour": "67.96", | ||
179 | + "index52hour": "69.50", | ||
180 | + "index55hour": "69.08", | ||
181 | + "index58hour": "74.43", | ||
182 | + "index61hour": "", | ||
183 | + "index64hour": "", | ||
184 | + "index67hour": "" | ||
185 | + }, | ||
186 | + "current": { | ||
187 | + "timeRelease": "2018-12-09 14:00:00", | ||
188 | + "index": "32.79" | ||
189 | + } | ||
190 | + } | ||
191 | + ] | ||
192 | + } | ||
193 | + }, | ||
194 | + "common": { | ||
195 | + "alertYn": "Y", | ||
196 | + "stormYn": "N" | ||
197 | + }, | ||
198 | + "result": { | ||
199 | + "code": 9200, | ||
200 | + "requestUrl": "/weather/index/heat?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
201 | + "message": "성공" | ||
202 | + } | ||
203 | +} | ||
204 | +{ | ||
205 | + "weather": { | ||
206 | + "wIndex": { | ||
207 | + "wctIndex": [ | ||
208 | + { | ||
209 | + "grid": { | ||
210 | + "city": "경기", | ||
211 | + "county": "용인시 기흥구", | ||
212 | + "village": "상갈동" | ||
213 | + }, | ||
214 | + "forecast": { | ||
215 | + "timeRelease": "2018-12-09 14:00:00", | ||
216 | + "index43hour": "-2.17", | ||
217 | + "index4hour": "-8.15", | ||
218 | + "index7hour": "-6.55", | ||
219 | + "index10hour": "-7.00", | ||
220 | + "index13hour": "-7.63", | ||
221 | + "index16hour": "-9.08", | ||
222 | + "index19hour": "-4.71", | ||
223 | + "index22hour": "1.18", | ||
224 | + "index25hour": "1.53", | ||
225 | + "index28hour": "-0.47", | ||
226 | + "index31hour": "-3.76", | ||
227 | + "index34hour": "-2.37", | ||
228 | + "index37hour": "-4.67", | ||
229 | + "index40hour": "-4.38", | ||
230 | + "index46hour": "-0.67", | ||
231 | + "index49hour": "-1.18", | ||
232 | + "index52hour": "-2.14", | ||
233 | + "index55hour": "-1.65", | ||
234 | + "index58hour": "-4.23", | ||
235 | + "index61hour": "", | ||
236 | + "index64hour": "", | ||
237 | + "index67hour": "" | ||
238 | + }, | ||
239 | + "current": { | ||
240 | + "timeRelease": "2018-12-09 14:00:00", | ||
241 | + "index": "-6.22" | ||
242 | + } | ||
243 | + } | ||
244 | + ] | ||
245 | + } | ||
246 | + }, | ||
247 | + "common": { | ||
248 | + "alertYn": "Y", | ||
249 | + "stormYn": "N" | ||
250 | + }, | ||
251 | + "result": { | ||
252 | + "code": 9200, | ||
253 | + "requestUrl": "/weather/index/wct?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
254 | + "message": "성공" | ||
255 | + } | ||
256 | +} | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
lib/socketio.js
0 → 100644
1 | +const db = require('./db.js'); | ||
2 | +const secret_key = require('../keys/api_option').key; | ||
3 | +const requesting = require('request'); | ||
4 | +const lat = "37.239795"; | ||
5 | +const lon = "127.083240"; | ||
6 | +module.exports = (server, app) => { | ||
7 | + | ||
8 | + const io = require('socket.io', )(server, { | ||
9 | + transports: ['websocket'] | ||
10 | + }); | ||
11 | + | ||
12 | + let info = {} | ||
13 | + const CALL = (when, what) => { | ||
14 | + requesting.get({ | ||
15 | + // api를 요청할 주소 -- 시크릿키,위도,경도 입력 | ||
16 | + url: `https://api2.sktelecom.com/weather/${when}/${what}?appKey=${secret_key}&lat=${lat}&lon=${lon}`, | ||
17 | + json: true | ||
18 | + }, | ||
19 | + //api에게 응답 받았을때 실행되는 callback function | ||
20 | + function (err, api_res, api_body) { | ||
21 | + if (err) throw err; | ||
22 | + // api의 대답이 있을경우 실행 | ||
23 | + if (api_res) { | ||
24 | + return api_body; | ||
25 | + // api_body.weather.minutely[0] | ||
26 | + } | ||
27 | + }); | ||
28 | + } | ||
29 | + io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작 | ||
30 | + let API_CALL; | ||
31 | + let Current_Weather; | ||
32 | + let Sensible_T; | ||
33 | + let Heat_index; | ||
34 | + let Discomport_index; | ||
35 | + let Ultra_Violet_index; | ||
36 | + | ||
37 | + socket.on("connection", () => { | ||
38 | + API_CALL = setInterval(() => { | ||
39 | + | ||
40 | + Current_Weather = CALL("current","minutely"); //현재날씨 (분별) | ||
41 | + Sensible_T = CALL("index","wct"); //체감온도 | ||
42 | + Heat_index = CALL("index","heat"); //열지수 | ||
43 | + Discomport_index = CALL("index","th"); //불쾌지수 | ||
44 | + Ultra_Violet_index = CALL("index","uv"); //자외선지수 | ||
45 | + | ||
46 | + socket.emit("weatherInfo_minutely_send_to_cliend",info); | ||
47 | + }, 60 * 1000); //1분마다 호출 | ||
48 | + }); | ||
49 | + | ||
50 | + socket.on('disconnecting', (reason) => { | ||
51 | + clearInterval(API_CALL); //연결 종료시 해제 | ||
52 | + }) | ||
53 | + }) | ||
54 | + | ||
55 | + | ||
56 | + | ||
57 | +} | ||
58 | + |
This diff is collapsed. Click to expand it.
... | @@ -9,12 +9,15 @@ | ... | @@ -9,12 +9,15 @@ |
9 | "body-parser": "^1.18.3", | 9 | "body-parser": "^1.18.3", |
10 | "compression": "^1.7.3", | 10 | "compression": "^1.7.3", |
11 | "cookie-parser": "~1.4.3", | 11 | "cookie-parser": "~1.4.3", |
12 | + "date-utils": "^1.2.21", | ||
12 | "debug": "~2.6.9", | 13 | "debug": "~2.6.9", |
13 | "ejs": "~2.5.7", | 14 | "ejs": "~2.5.7", |
14 | "express": "~4.16.0", | 15 | "express": "~4.16.0", |
16 | + "helmet": "^3.13.0", | ||
15 | "http-errors": "~1.6.2", | 17 | "http-errors": "~1.6.2", |
16 | "morgan": "~1.9.0", | 18 | "morgan": "~1.9.0", |
17 | - "helmet": "^3.13.0", | 19 | + "mysql": "^2.16.0", |
20 | + "request": "^2.88.0", | ||
18 | "socket.io": "^2.1.1" | 21 | "socket.io": "^2.1.1" |
19 | } | 22 | } |
20 | } | 23 | } | ... | ... |
1 | var express = require('express'); | 1 | var express = require('express'); |
2 | var router = express.Router(); | 2 | var router = express.Router(); |
3 | +var db = require('../lib/db'); | ||
3 | 4 | ||
4 | /* GET home page. */ | 5 | /* GET home page. */ |
5 | router.get('/', function(req, res, next) { | 6 | router.get('/', function(req, res, next) { |
6 | - res.render('index', { title: 'Express' }); | 7 | + // 자외선지수, 불쾌지수, 열지수, 체감 온도, 바람속도, 현재기온, 하늘 상태, 강우량, 태풍, 낙뢰, 특보, 현재 시간 |
8 | + var uvr, discomfort, heat, sensibleTem, windSpeed, presentTem, skyState, rainfall, typhoon, lightning, alert, time; | ||
9 | + | ||
10 | + // 쿼리문 | ||
11 | + var sql = 'SELECT * FROM kkonzi_test.weatherInfo WHERE kkonzi_test.time > DATE_FORMAT(DATE_ADD(now(), INTERVAL -1 MINUTE), "%Y-%m-%d %H:%i:%s")''; | ||
12 | + db.query(sql, function(err, rows, fields){ | ||
13 | + if (err) { | ||
14 | + console.log(err); | ||
15 | + } else { | ||
16 | + if (rows.length == 0){ | ||
17 | + | ||
18 | + } | ||
19 | + else { | ||
20 | + | ||
21 | + } | ||
22 | + var tmp = rows.length - 1; | ||
23 | + time = rows[temp].time; | ||
24 | + uvr = rows[temp].UV; | ||
25 | + discomfort = rows[temp].discomfort; | ||
26 | + heat = rows[temp].heat; | ||
27 | + sensibleTem = rows[temp].SensibleT; | ||
28 | + windSpeed = rows[temp].wspd; | ||
29 | + presentTem = rows[temp].CurrentT; | ||
30 | + skyState = rows[temp].sky; | ||
31 | + rainfall = rows[temp].rain; | ||
32 | + typhoon = rows[temp].typhoon; | ||
33 | + lightning = rows[temp].lightning; | ||
34 | + alert = rows[temp].alert; | ||
35 | + } | ||
36 | + }) | ||
37 | + | ||
38 | + res.render('index', {title: 'Express'}); | ||
7 | }); | 39 | }); |
8 | 40 | ||
9 | module.exports = router; | 41 | module.exports = router; | ... | ... |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | <head> | 3 | <head> |
4 | - <title><%= title %></title> | 4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 | - <link rel='stylesheet' href='/stylesheets/style.css' /> | 5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
6 | + <title>Highcharts Example</title> | ||
7 | + | ||
8 | + <style type="text/css"></style> | ||
6 | </head> | 9 | </head> |
7 | <body> | 10 | <body> |
8 | - <h1><%= title %></h1> | 11 | + <script src="../code/highcharts.js"></script> |
9 | - <p>Welcome to <%= title %></p> | 12 | + <script src="../code/modules/exporting.js"></script> |
13 | + <script src="../code/modules/export-data.js"></script> | ||
14 | + | ||
15 | + <div | ||
16 | + id="container1" | ||
17 | + style="width:1260px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
19 | + | ||
20 | +<div style="width:1275px; margin:0 auto;"> | ||
21 | + <div style="display: inline-block;"> | ||
22 | + <div | ||
23 | + id="container2" | ||
24 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
25 | + ></div> | ||
26 | + </div> | ||
27 | + <div style="display: inline-block;"> | ||
28 | + <div | ||
29 | + id="container3" | ||
30 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
31 | + ></div> | ||
32 | + </div> | ||
33 | + | ||
34 | + <div style="display: inline-block;"> | ||
35 | + <div | ||
36 | + id="container4" | ||
37 | + style="width:400px; height: 300px; padding:0; margin-left:0px;" | ||
38 | + ></div> | ||
39 | + </div> | ||
40 | + | ||
41 | +</div> | ||
42 | + | ||
43 | + <script type="text/javascript"> | ||
44 | + Highcharts.chart("container1", { | ||
45 | + chart: { | ||
46 | + type: "areaspline", | ||
47 | + animation: Highcharts.svg, // don't animate in old IE | ||
48 | + marginRight: 10, | ||
49 | + events: { | ||
50 | + load: function() { | ||
51 | + // set up the updating of the chart each second | ||
52 | + var series = this.series[0]; | ||
53 | + setInterval(function() { | ||
54 | + var x = new Date().getTime(), // 현재 시간 | ||
55 | + y = 0.7 //여기에 새로 넣을 값 | ||
56 | + series.addPoint([x, y], true, true); | ||
57 | + }, 1000); //1000=1초 -> 1분=60000 | ||
58 | + } | ||
59 | + } | ||
60 | + }, | ||
61 | + | ||
62 | + time: { | ||
63 | + useUTC: false | ||
64 | + }, | ||
65 | + | ||
66 | + title: { | ||
67 | + text: "실시간 사망률" | ||
68 | + }, | ||
69 | + xAxis: { | ||
70 | + type: "datetime", | ||
71 | + tickPixelInterval: 150 | ||
72 | + }, | ||
73 | + yAxis: { | ||
74 | + title: { | ||
75 | + text: "Value" | ||
76 | + }, | ||
77 | + plotLines: [ | ||
78 | + { | ||
79 | + value: 0, | ||
80 | + width: 1, | ||
81 | + color: "#808080" | ||
82 | + } | ||
83 | + ] | ||
84 | + }, | ||
85 | + tooltip: { | ||
86 | + headerFormat: "<b>{series.name}</b><br/>", | ||
87 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
88 | + }, | ||
89 | + legend: { | ||
90 | + //enabled: false | ||
91 | + layout: "vertical", | ||
92 | + align: "left", | ||
93 | + verticalAlign: "top", | ||
94 | + x: 120, | ||
95 | + y: 70, | ||
96 | + floating: true, | ||
97 | + borderWidth: 1, | ||
98 | + backgroundColor: | ||
99 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
100 | + "#FFFFFF" | ||
101 | + }, | ||
102 | + exporting: { | ||
103 | + enabled: false | ||
104 | + }, | ||
105 | + series: [ | ||
106 | + { | ||
107 | + name: "사망률(%)", | ||
108 | + data: (function() { | ||
109 | + // generate an array of random data | ||
110 | + var data = [], | ||
111 | + time = new Date().getTime(), | ||
112 | + i; | ||
113 | + | ||
114 | + for (i = -19; i <= 0; i += 1) { | ||
115 | + data.push({ | ||
116 | + x: time + i * 1000, | ||
117 | + y: 0 | ||
118 | + }); | ||
119 | + } | ||
120 | + return data; | ||
121 | + })() | ||
122 | + } | ||
123 | + ] | ||
124 | + }); | ||
125 | + | ||
126 | + Highcharts.chart("container2", { | ||
127 | + chart: { | ||
128 | + type: "spline", | ||
129 | + animation: Highcharts.svg, // don't animate in old IE | ||
130 | + marginRight: 10, | ||
131 | + events: { | ||
132 | + load: function() { | ||
133 | + // set up the updating of the chart each second | ||
134 | + var series = this.series[0]; | ||
135 | + setInterval(function() { | ||
136 | + var x = new Date().getTime(), // 현재 시간 | ||
137 | + y = Math.random(); // | ||
138 | + series.addPoint([x, y], true, true); | ||
139 | + }, 3000); //1000=1초 | ||
140 | + } | ||
141 | + } | ||
142 | + }, | ||
143 | + | ||
144 | + time: { | ||
145 | + useUTC: false | ||
146 | + }, | ||
147 | + | ||
148 | + title: { | ||
149 | + text: "실시간 사망률" | ||
150 | + }, | ||
151 | + xAxis: { | ||
152 | + type: "datetime", | ||
153 | + tickPixelInterval: 150 | ||
154 | + }, | ||
155 | + yAxis: { | ||
156 | + title: { | ||
157 | + text: "Value" | ||
158 | + }, | ||
159 | + plotLines: [ | ||
160 | + { | ||
161 | + value: 0, | ||
162 | + width: 1, | ||
163 | + color: "#808080" | ||
164 | + } | ||
165 | + ] | ||
166 | + }, | ||
167 | + tooltip: { | ||
168 | + headerFormat: "<b>{series.name}</b><br/>", | ||
169 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
170 | + }, | ||
171 | + legend: { | ||
172 | + //enabled: false | ||
173 | + layout: "vertical", | ||
174 | + align: "left", | ||
175 | + verticalAlign: "top", | ||
176 | + x: 120, | ||
177 | + y: 70, | ||
178 | + floating: true, | ||
179 | + borderWidth: 1, | ||
180 | + backgroundColor: | ||
181 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
182 | + "#FFFFFF" | ||
183 | + }, | ||
184 | + exporting: { | ||
185 | + enabled: false | ||
186 | + }, | ||
187 | + series: [ | ||
188 | + { | ||
189 | + name: "사망률(%)", | ||
190 | + data: (function() { | ||
191 | + // generate an array of random data | ||
192 | + var data = [], | ||
193 | + time = new Date().getTime(), | ||
194 | + i; | ||
195 | + | ||
196 | + for (i = -19; i <= 0; i += 1) { | ||
197 | + data.push({ | ||
198 | + x: time + i * 3000, | ||
199 | + y: 0 | ||
200 | + }); | ||
201 | + } | ||
202 | + return data; | ||
203 | + })() | ||
204 | + } | ||
205 | + ] | ||
206 | + }); | ||
207 | + | ||
208 | + Highcharts.chart("container3", { | ||
209 | + chart: { | ||
210 | + type: "spline", | ||
211 | + animation: Highcharts.svg, // don't animate in old IE | ||
212 | + marginRight: 10, | ||
213 | + events: { | ||
214 | + load: function() { | ||
215 | + // set up the updating of the chart each second | ||
216 | + var series = this.series[0]; | ||
217 | + setInterval(function() { | ||
218 | + var x = new Date().getTime(), // 현재 시간 | ||
219 | + y = Math.random(); // | ||
220 | + series.addPoint([x, y], true, true); | ||
221 | + }, 3000); //1000=1초 | ||
222 | + } | ||
223 | + } | ||
224 | + }, | ||
225 | + | ||
226 | + time: { | ||
227 | + useUTC: false | ||
228 | + }, | ||
229 | + | ||
230 | + title: { | ||
231 | + text: "실시간 사망률" | ||
232 | + }, | ||
233 | + xAxis: { | ||
234 | + type: "datetime", | ||
235 | + tickPixelInterval: 150 | ||
236 | + }, | ||
237 | + yAxis: { | ||
238 | + title: { | ||
239 | + text: "Value" | ||
240 | + }, | ||
241 | + plotLines: [ | ||
242 | + { | ||
243 | + value: 0, | ||
244 | + width: 1, | ||
245 | + color: "#808080" | ||
246 | + } | ||
247 | + ] | ||
248 | + }, | ||
249 | + tooltip: { | ||
250 | + headerFormat: "<b>{series.name}</b><br/>", | ||
251 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
252 | + }, | ||
253 | + legend: { | ||
254 | + //enabled: false | ||
255 | + layout: "vertical", | ||
256 | + align: "left", | ||
257 | + verticalAlign: "top", | ||
258 | + x: 120, | ||
259 | + y: 70, | ||
260 | + floating: true, | ||
261 | + borderWidth: 1, | ||
262 | + backgroundColor: | ||
263 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
264 | + "#FFFFFF" | ||
265 | + }, | ||
266 | + exporting: { | ||
267 | + enabled: false | ||
268 | + }, | ||
269 | + series: [ | ||
270 | + { | ||
271 | + name: "사망률(%)", | ||
272 | + data: (function() { | ||
273 | + // generate an array of random data | ||
274 | + var data = [], | ||
275 | + time = new Date().getTime(), | ||
276 | + i; | ||
277 | + | ||
278 | + for (i = -19; i <= 0; i += 1) { | ||
279 | + data.push({ | ||
280 | + x: time + i * 3000, | ||
281 | + y: 0 | ||
282 | + }); | ||
283 | + } | ||
284 | + return data; | ||
285 | + })() | ||
286 | + } | ||
287 | + ] | ||
288 | + }); | ||
289 | + | ||
290 | + Highcharts.chart("container4", { | ||
291 | + chart: { | ||
292 | + type: "spline", | ||
293 | + animation: Highcharts.svg, // don't animate in old IE | ||
294 | + marginRight: 10, | ||
295 | + events: { | ||
296 | + load: function() { | ||
297 | + // set up the updating of the chart each second | ||
298 | + var series = this.series[0]; | ||
299 | + setInterval(function() { | ||
300 | + var x = new Date().getTime(), // 현재 시간 | ||
301 | + y = Math.random(); // | ||
302 | + series.addPoint([x, y], true, true); | ||
303 | + }, 3000); //1000=1초 | ||
304 | + } | ||
305 | + } | ||
306 | + }, | ||
307 | + | ||
308 | + time: { | ||
309 | + useUTC: false | ||
310 | + }, | ||
311 | + | ||
312 | + title: { | ||
313 | + text: "실시간 사망률" | ||
314 | + }, | ||
315 | + xAxis: { | ||
316 | + type: "datetime", | ||
317 | + tickPixelInterval: 150 | ||
318 | + }, | ||
319 | + yAxis: { | ||
320 | + title: { | ||
321 | + text: "Value" | ||
322 | + }, | ||
323 | + plotLines: [ | ||
324 | + { | ||
325 | + value: 0, | ||
326 | + width: 1, | ||
327 | + color: "#808080" | ||
328 | + } | ||
329 | + ] | ||
330 | + }, | ||
331 | + tooltip: { | ||
332 | + headerFormat: "<b>{series.name}</b><br/>", | ||
333 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
334 | + }, | ||
335 | + legend: { | ||
336 | + //enabled: false | ||
337 | + layout: "vertical", | ||
338 | + align: "left", | ||
339 | + verticalAlign: "top", | ||
340 | + x: 120, | ||
341 | + y: 70, | ||
342 | + floating: true, | ||
343 | + borderWidth: 1, | ||
344 | + backgroundColor: | ||
345 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
346 | + "#FFFFFF" | ||
347 | + }, | ||
348 | + exporting: { | ||
349 | + enabled: false | ||
350 | + }, | ||
351 | + series: [ | ||
352 | + { | ||
353 | + name: "사망률(%)", | ||
354 | + data: (function() { | ||
355 | + // generate an array of random data | ||
356 | + var data = [], | ||
357 | + time = new Date().getTime(), | ||
358 | + i; | ||
359 | + | ||
360 | + for (i = -19; i <= 0; i += 1) { | ||
361 | + data.push({ | ||
362 | + x: time + i * 3000, | ||
363 | + y: 0 | ||
364 | + }); | ||
365 | + } | ||
366 | + return data; | ||
367 | + })() | ||
368 | + } | ||
369 | + ] | ||
370 | + }); | ||
371 | + | ||
372 | + </script> | ||
10 | </body> | 373 | </body> |
11 | </html> | 374 | </html> | ... | ... |
-
Please register or login to post a comment