1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140 | <!DOCTYPE html>
<!--[if IE 8 ]><html class="ie8" lang="en-gb"> <![endif]-->
<!--[if IE 9 ]><html class="ie9" lang="en-gb"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en-gb"><!--<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<head>
<base href="http://www.highcharts.com/stock/demo/dynamic-update/sand-signika" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="highcharts, charts, javascript charts, ajax charts, plots, line charts, bar charts, pie charts, javascript plots, ajax plots" />
<meta name="description" content="Highcharts - Interactive JavaScript charts for your web pages." />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Highcharts - Dynamically updated data</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700,400italic" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" />
<script src="/lib/jquery-1.7.2.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var example = 'dynamic-update',
theme = 'sand-signika';
(function($){ // encapsulate jQuery
$(function() {
Highcharts.setOptions({
global : {
useUTC : false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
chart : {
events : {
load : function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'Random data',
data : (function() {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
for( i = -999; i <= 0; i++) {
data.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data;
})()
}]
});
});
})(jQuery);
</script>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><link href="/templates/highsoft_colorful/images/favicon.ico" rel="shortcut icon"/><!-- Echo Header Script -->
</head>
<body id="bd" class="clearfix">
<div id="zt-wrapper">
<div id="zt-wrapper-inner">
<div id="zt-mainframe" class="clearfix">
<div class="container">
<div id="zt-mainframe-inner" class="row-fluid clearfix">
<div id="zt-mainframe-inner2" class="zt-container">
<div id="zt-content" class="span12">
<div id="zt-component" class="clearfix">
<div id="zt-component-inner">
<h2 class="demo-header">
</h2>
<div id="demo-component">
<div id="demo-content">
<div id="demo-content-container">
<div id="demo-chart">
<div id="container" style="height: 400px; min-width: 310px"></div> </div>
<div class="clearfix"></div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
|
留言列表
