Merge branch 'developing' into 'algorithm'
# Conflicts: # package-lock.json
Showing
11 changed files
with
1157 additions
and
96 deletions
This diff could not be displayed because it is too large.
This diff is collapsed. Click to expand it.
graph/areaspline/3sec_update.htm
0 → 100644
This diff is collapsed. Click to expand it.
graph/areaspline/areaspline.htm
0 → 100644
| 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 |
graph/areaspline/dual_graph.html
0 → 100644
| 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 |
graph/areaspline/index.htm
deleted
100644 → 0
| 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> |
graph/areaspline/index.html
0 → 100644
| 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> |
| 1 | { | 1 | { |
| 2 | "weather": { | 2 | "weather": { |
| 3 | - "minutely": [{ | 3 | + "minutely": [ |
| 4 | + { | ||
| 4 | "station": { | 5 | "station": { |
| 5 | "longitude": "127.1164", | 6 | "longitude": "127.1164", |
| 6 | "latitude": "37.2772", | 7 | "latitude": "37.2772", |
| ... | @@ -43,7 +44,8 @@ | ... | @@ -43,7 +44,8 @@ |
| 43 | }, | 44 | }, |
| 44 | "lightning": "0", | 45 | "lightning": "0", |
| 45 | "timeObservation": "2018-12-06 14:14:00" | 46 | "timeObservation": "2018-12-06 14:14:00" |
| 46 | - }] | 47 | + } |
| 48 | + ] | ||
| 47 | }, | 49 | }, |
| 48 | "common": { | 50 | "common": { |
| 49 | "alertYn": "Y", | 51 | "alertYn": "Y", |
| ... | @@ -54,4 +56,201 @@ | ... | @@ -54,4 +56,201 @@ |
| 54 | "requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240", | 56 | "requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240", |
| 55 | "message": "성공" | 57 | "message": "성공" |
| 56 | } | 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 | + } | ||
| 57 | } | 256 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
| ... | @@ -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 | + let Sensible_T; | ||
| 33 | + let Heat_index; | ||
| 34 | + let Discomport_index; | ||
| 35 | + let Ultra_Violet_index; | ||
| 32 | 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 | + | ... | ... |
| 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