조민지 / 2018_2_project

Go to a project
Toggle navigation Toggle navigation pinning
배희수
66a5e1af 2 parents b733ef5c 7e1cbd3e

Merge branch 'developing' into 'algorithm' 

# Conflicts:
#   package-lock.json
Expand all
Inline Side-by-side
Showing 11 changed files with 959 additions and 97 deletions
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container"
17 + style="min-width: 310px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 + <script type="text/javascript">
21 + var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
22 + var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];
23 +
24 + var chart = Highcharts.chart("container", {
25 + chart: {
26 + type: "areaspline"
27 + },
28 + title: {
29 + text: "실시간 사망률"
30 + },
31 + legend: {
32 + layout: "vertical",
33 + align: "left",
34 + verticalAlign: "top",
35 + x: 120,
36 + y: 70,
37 + floating: true,
38 + borderWidth: 1,
39 + backgroundColor:
40 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
41 + "#FFFFFF"
42 + },
43 + xAxis: {
44 + categories: [
45 + "Monday",
46 + "Tuesday",
47 + "Wednesday",
48 + "Thursday",
49 + "Friday",
50 + "Saturday",
51 + "Sunday",
52 + "Sunday",
53 + "Sunday",
54 + "Sunday"
55 + ],
56 + plotBands: [
57 + {
58 + // 색칠되는 구간
59 + from: 7.5,
60 + to: 10.5,
61 + color: "rgba(68, 170, 213, .2)"
62 + }
63 + ]
64 + },
65 + yAxis: {
66 + title: {
67 + text: "Fruit units"
68 + }
69 + },
70 + tooltip: {
71 + shared: true,
72 + valueSuffix: " %", //point mouseover 단위
73 + },
74 + credits: {
75 + enabled: false
76 + },
77 + plotOptions: {
78 + areaspline: {
79 + fillOpacity: 0.5
80 + }
81 + },
82 + series: [
83 + {
84 + name: "사망률(%)",
85 + data: []
86 + },
87 + {
88 + name: "기온('C)",
89 + data: []
90 + }
91 + ]
92 + });
93 +
94 + death.shift();
95 + temp.shift();
96 +
97 + death.push(11);
98 + temp.push(3);
99 +
100 + chart.series[0].setData(death);
101 + chart.series[1].setData(temp);
102 +
103 + </script>
104 + </body>
105 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
12 + <script src="../../code/modules/exporting.js"></script>
13 + <script src="../../code/modules/export-data.js"></script>
14 +
15 + <div
16 + id="container"
17 + style="min-width: 310px; height: 400px; margin: 0 auto"
18 + ></div>
19 +
20 + <script type="text/javascript">
21 +
22 +Highcharts.chart('container', {
23 + chart: {
24 + zoomType: 'xy'
25 + },
26 + title: {
27 + text: 'Average Monthly Temperature and Rainfall in Tokyo'
28 + },
29 + subtitle: {
30 + text: 'Source: WorldClimate.com'
31 + },
32 + xAxis: [{
33 + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
34 + 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
35 + crosshair: true
36 + }],
37 + yAxis: [{ // Primary yAxis
38 + labels: {
39 + format: '{value}°C',
40 + style: {
41 + color: Highcharts.getOptions().colors[1]
42 + }
43 + },
44 + title: {
45 + text: 'Temperature',
46 + style: {
47 + color: Highcharts.getOptions().colors[1]
48 + }
49 + }
50 + }, { // Secondary yAxis
51 + title: {
52 + text: 'Rainfall',
53 + style: {
54 + color: Highcharts.getOptions().colors[0]
55 + }
56 + },
57 + labels: {
58 + format: '{value} mm',
59 + style: {
60 + color: Highcharts.getOptions().colors[0]
61 + }
62 + },
63 + opposite: true
64 + }],
65 + tooltip: {
66 + shared: true
67 + },
68 + legend: {
69 + layout: 'vertical',
70 + align: 'left',
71 + x: 120,
72 + verticalAlign: 'top',
73 + y: 100,
74 + floating: true,
75 + backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)'
76 + },
77 + series: [{
78 + name: 'Rainfall',
79 + type: 'areaspline',
80 + yAxis: 1,
81 + data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
82 + tooltip: {
83 + valueSuffix: ' mm'
84 + }
85 +
86 + }, {
87 + name: 'Temperature',
88 + type: 'spline',
89 + data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
90 + tooltip: {
91 + valueSuffix: '°C'
92 + }
93 + }]
94 +});
95 + </script>
96 + </body>
97 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 -<!DOCTYPE HTML>
2 -<html>
3 - <head>
4 - <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5 - <meta name="viewport" content="width=device-width, initial-scale=1">
6 - <title>Highcharts Example</title>
7 -
8 - <style type="text/css">
9 -
10 - </style>
11 - </head>
12 - <body>
13 -<script src="../../code/highcharts.js"></script>
14 -<script src="../../code/modules/exporting.js"></script>
15 -<script src="../../code/modules/export-data.js"></script>
16 -
17 -<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
18 -
19 -
20 -
21 - <script type="text/javascript">
22 -
23 -Highcharts.chart('container', {
24 - chart: {
25 - type: 'areaspline'
26 - },
27 - title: {
28 - text: '실시간 사망률'
29 - },
30 - legend: {
31 - layout: 'vertical',
32 - align: 'left',
33 - verticalAlign: 'top',
34 - x: 150,
35 - y: 100,
36 - floating: true,
37 - borderWidth: 1,
38 - backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
39 - },
40 - xAxis: {
41 - categories: [
42 - 'Monday',
43 - 'Tuesday',
44 - 'Wednesday',
45 - 'Thursday',
46 - 'Friday',
47 - 'Saturday',
48 - 'Sunday'
49 - ],
50 - plotBands: [{ // visualize the weekend
51 - from: 4.5,
52 - to: 6.5,
53 - color: 'rgba(68, 170, 213, .2)'
54 - }]
55 - },
56 - yAxis: {
57 - title: {
58 - text: 'Fruit units'
59 - }
60 - },
61 - tooltip: {
62 - shared: true,
63 - valueSuffix: ' units'
64 - },
65 - credits: {
66 - enabled: false
67 - },
68 - plotOptions: {
69 - areaspline: {
70 - fillOpacity: 0.5
71 - }
72 - },
73 - series: [{
74 - name: '사망률',
75 - data: [3, 4, 3, 5, 4, 10, 12]
76 - }, {
77 - name: '기온',
78 - data: [1, 3, 4, 3, 3, 5, 4]
79 - }]
80 -});
81 - </script>
82 - </body>
83 -</html>
1 +<!DOCTYPE html>
2 +<html>
3 + <head>
4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 + <meta name="viewport" content="width=device-width, initial-scale=1" />
6 + <title>Highcharts Example</title>
7 +
8 + <style type="text/css"></style>
9 + </head>
10 + <body>
11 + <script src="../../code/highcharts.js"></script>
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>
373 + </body>
374 +</html>
This diff is collapsed. Click to expand it.
...@@ -21,24 +21,29 @@ module.exports = (server, app) => { ...@@ -21,24 +21,29 @@ module.exports = (server, app) => {
21 if (err) throw err; 21 if (err) throw err;
22 // api의 대답이 있을경우 실행 22 // api의 대답이 있을경우 실행
23 if (api_res) { 23 if (api_res) {
24 - console.log(api_body); 24 + return api_body;
25 - // api_body.weather.minutely[0] 25 + // api_body.weather.minutely[0]
26 } 26 }
27 }); 27 });
28 } 28 }
29 io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작 29 io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작
30 let API_CALL; 30 let API_CALL;
31 - 31 + let Current_Weather;
32 - 32 + let Sensible_T;
33 + let Heat_index;
34 + let Discomport_index;
35 + let Ultra_Violet_index;
36 +
33 socket.on("connection", () => { 37 socket.on("connection", () => {
34 API_CALL = setInterval(() => { 38 API_CALL = setInterval(() => {
35 39
36 - CALL("current","minutely"); //현재날씨 (분별) 40 + Current_Weather = CALL("current","minutely"); //현재날씨 (분별)
37 - CALL("index","wct"); //체감온도 41 + Sensible_T = CALL("index","wct"); //체감온도
38 - CALL("index","heat"); //열지수 42 + Heat_index = CALL("index","heat"); //열지수
39 - CALL("index","th"); //불쾌지수 43 + Discomport_index = CALL("index","th"); //불쾌지수
40 - CALL("index","uv"); //자외선지수 44 + Ultra_Violet_index = CALL("index","uv"); //자외선지수
41 45
46 + socket.emit("weatherInfo_minutely_send_to_cliend",info);
42 }, 60 * 1000); //1분마다 호출 47 }, 60 * 1000); //1분마다 호출
43 }); 48 });
44 49
...@@ -50,3 +55,4 @@ module.exports = (server, app) => { ...@@ -50,3 +55,4 @@ module.exports = (server, app) => {
50 55
51 56
52 } 57 }
58 +
......
...@@ -1206,4 +1206,4 @@ ...@@ -1206,4 +1206,4 @@
1206 "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" 1206 "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
1207 } 1207 }
1208 } 1208 }
1209 -} 1209 +}
...\ No newline at end of file ...\ No newline at end of file
......
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>
......