Find file
Fetching contributors…
Cannot retrieve contributors at this time
155 lines (140 sloc) 5.4 KB
<!DOCTYPE html>
<html>
<head>
<title>sencha-wakanda :: rpc</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/ext-all.js"></script>
<script type="text/javascript">
var startDate = new Date();
Ext.onReady(function() {
var updateData = function(response) {
var timeAxis = chart.axes.get(1),
data = Ext.decode(response.responseText).result,
min, max = Math.ceil((data[0].date - (+startDate))/1000);
if (max > 20) {
var records = [];
store.each(function(record) {
if (record.get('date') < max - 20) {
records.push(record);
}
});
store.remove(records);
timeAxis.maximum = max;
}
if (store.getCount()) {
min = store.first().get('date');
} else {
min = max;
}
timeAxis.minimum = min;
store.loadData(data, true);
};
var store = Ext.create('Ext.data.Store', {
fields: [
'views', 'visits', 'users',
{name: 'date', convert: function(v) {return Math.ceil((v - (+startDate))/1000);}}
]
});
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
store: store,
animate: true,
shadow: false,
insetPadding: 20,
legend: {position: 'bottom'},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
minimum: 0,
maximum: 100,
fields: ['views', 'visits', 'users'],
title: 'Number of Hits'
}, {
type: 'Numeric',
position: 'bottom',
fields: 'date',
title: 'Time',
decimals: 0,
majorTickSteps: 3,
minimum: 0,
maximum: 20,
label: {
renderer: function(v) {
var dt = Ext.Date.add(startDate, Ext.Date.SECOND, v);
return Ext.Date.format(dt, 'H:i:s');
}
}
}],
series: [{
type: 'line',
axis: 'left',
fill: true,
smooth: true,
xField: 'date',
yField: 'visits',
style: {
fill: '#18428E',
stroke: '#18428E',
'stroke-width': 3
},
markerConfig: {
type: 'circle',
size: 3,
radius: 3,
'stroke-width': 0,
fill: '#18428E',
stroke: '#18428E'
}
}, {
type: 'line',
axis: 'left',
fill: true,
smooth: true,
xField: 'date',
yField: 'views',
markerConfig: {
size: 3,
radius: 3,
type: 'cross',
'stroke-width': 0
}
}, {
type: 'line',
axis: 'left',
fill: true,
smooth: true,
xField: 'date',
yField: 'users',
markerConfig: {
size: 3,
'stroke-width': 0
}
}]
});
Ext.create('Ext.Panel', {
x: 20,
y: 20,
width: 700,
height: 500,
frame: true,
layout: 'fit',
floating: true,
renderTo: document.body,
items: chart
});
Ext.TaskManager.start({
interval: 1500,
run: function() {
Ext.Ajax.request({
url: '/rest/Employee/getHits',
success: updateData
});
}
});
});
</script>
</body>
</html>