forked from JoeKuan/Highcharts-Ext-JS-Adapter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
123 lines (112 loc) · 2.92 KB
/
example.html
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/extjs/examples/ux/css/ux-all.css" />
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/extjs/ux/ux-all.js"></script>
<!-- Highcharts includes -->
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/highcharts/js/highcharts.js"></script>
<!-- export and print -->
<script src="/highcharts/js/modules/exporting.js" type="text/javascript"></script>
<!-- ExtJS adapter for Highcharts -->
<script type="text/javascript" src="adapter-extjs.js"></script>
<!-- ExtJS Plugin for Highcharts -->
<script type="text/javascript" src="Ext.ux.HighChart.js"></script>
<title id='page-title'>Highchart example</title>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
Ext.onReady(function(){
// Store for random data
var store = new Ext.data.JsonStore({
url: 'temp_example.php',
fields: [
{ name: 'time', type: 'int' },
{ name: 'yesterday', type: 'float' },
{ name: 'today', type: 'float' }
],
root: 'rows'
});
var datastore_task = {
run: function() {
store.load();
},
interval: 2000
};
Ext.TaskMgr.start(datastore_task);
Ext.QuickTips.init();
var chart;
chart = new Ext.ux.HighChart({
series: [ {
type: 'spline',
dataIndex: 'yesterday',
name: 'Yesterday',
}, {
type: 'spline',
dataIndex: 'today',
name: 'Today',
}],
height: 500,
width: 700,
store: store,
animShift: true,
xField: 'time',
chartConfig: {
chart: {
marginRight: 130,
marginBottom: 120,
zoomType: 'x'
},
title: {
text: 'Random Value',
x: -20 //center
},
subtitle: {
text: 'joekuan.wordpress.com',
x: -20
},
xAxis: [{
title: {
text: 'Time',
margin: 20,
},
labels: {
rotation: 270,
y: 35
},
type: 'datetime'
}],
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
}
}
});
new Ext.Window({ title: 'Example', layout: 'anchor', items: [ chart ] }).show();
});
</script>
</head>
<body></body>
</html>