Showing
1 changed file
with
101 additions
and
0 deletions
graph/areaspline/3sec_update.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 | + | ||
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 |
-
Please register or login to post a comment