조민지

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

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 + type: 'spline',
25 + animation: Highcharts.svg, // don't animate in old IE
26 + marginRight: 10,
27 + events: {
28 + load: function () {
29 + // set up the updating of the chart each second
30 + var series = this.series[0];
31 + setInterval(function () {
32 + var x = (new Date()).getTime(), // 현재 시간
33 + y = Math.random(); //
34 + series.addPoint([x, y], true, true);
35 + }, 3000); //1000=1초
36 + }
37 + }
38 + },
39 +
40 + time: {
41 + useUTC: false
42 + },
43 +
44 + title: {
45 + text: '실시간 사망률'
46 + },
47 + xAxis: {
48 + type: 'datetime',
49 + tickPixelInterval: 150
50 + },
51 + yAxis: {
52 + title: {
53 + text: 'Value'
54 + },
55 + plotLines: [{
56 + value: 0,
57 + width: 1,
58 + color: '#808080'
59 + }]
60 + },
61 + tooltip: {
62 + headerFormat: '<b>{series.name}</b><br/>',
63 + pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
64 + },
65 + legend: {
66 + //enabled: false
67 + layout: "vertical",
68 + align: "left",
69 + verticalAlign: "top",
70 + x: 120,
71 + y: 70,
72 + floating: true,
73 + borderWidth: 1,
74 + backgroundColor:
75 + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
76 + "#FFFFFF"
77 + },
78 + exporting: {
79 + enabled: false
80 + },
81 + series: [{
82 + name: '사망률(%)',
83 + data: (function () {
84 + // generate an array of random data
85 + var data = [],
86 + time = (new Date()).getTime(),
87 + i;
88 +
89 + for (i = -19; i <= 0; i += 1) {
90 + data.push({
91 + x: time + i * 1000,
92 + y: Math.random()
93 + });
94 + }
95 + return data;
96 + }())
97 + }]
98 +});
99 + </script>
100 + </body>
101 +</html>
...\ No newline at end of file ...\ No newline at end of file