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