3초마다 업데이트되는 그래프

조민지
Commit f4f6408fbd41abc529d178e0a9b84aeeab6fefd4 f4f6408f 1 parent 7c8168b3
Showing 1 changed file with 101 additions and 0 deletions
graph/areaspline/3sec_update.htm
--- a/graph/areaspline/3sec_update.htm 0 → 100644
View file @f4f6408
+++ b/graph/areaspline/3sec_update.htm 0 → 100644
View file @f4f6408
+ <!DOCTYPE html>
+ <html>
+   <head>
+     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+     <meta name="viewport" content="width=device-width, initial-scale=1" />
+     <title>Highcharts Example</title>
+ 
+     <style type="text/css"></style>
+   </head>
+   <body>
+     <script src="../../code/highcharts.js"></script>
+     <script src="../../code/modules/exporting.js"></script>
+     <script src="../../code/modules/export-data.js"></script>
+ 
+     <div
+       id="container"
+       style="min-width: 310px; height: 400px; margin: 0 auto"
+     ></div>
+ 
+     <script type="text/javascript">
+ 
+ Highcharts.chart('container', {
+     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초
+             }
+         }
+     },
+ 
+     time: {
+         useUTC: false
+     },
+ 
+     title: {
+         text: '실시간 사망률'
+     },
+     xAxis: {
+         type: 'datetime',
+         tickPixelInterval: 150
+     },
+     yAxis: {
+         title: {
+             text: 'Value'
+         },
+         plotLines: [{
+             value: 0,
+             width: 1,
+             color: '#808080'
+         }]
+     },
+     tooltip: {
+         headerFormat: '<b>{series.name}</b><br/>',
+         pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
+     },
+     legend: {
+         //enabled: false
+         layout: "vertical",
+           align: "left",
+           verticalAlign: "top",
+           x: 120,
+           y: 70,
+           floating: true,
+           borderWidth: 1,
+           backgroundColor:
+             (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
+             "#FFFFFF"
+     },
+     exporting: {
+         enabled: false
+     },
+     series: [{
+         name: '사망률(%)',
+         data: (function () {
+             // generate an array of random data
+             var data = [],
+                 time = (new Date()).getTime(),
+                 i;
+ 
+             for (i = -19; i <= 0; i += 1) {
+                 data.push({
+                     x: time + i * 1000,
+                     y: Math.random()
+                 });
+             }
+             return data;
+         }())
+     }]
+ });
+     </script>
+   </body>
+ </html>
\ No newline at end of file