Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chart</title>
<script type="text/javascript" src="ext-all-debug.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" media="screen, projection, print" href="ext-all.css" />
<script type="text/javascript">
Ext.require([
'Ext.window.Window',
'Ext.chart.*'
]);
Ext.onReady(function () {
////FIX - uncomment to get it right
//Ext.chart.TimeAxis.prototype.calcEnds = function() {
// var me = this, range, step = me.step;
//
// if (step) {
// range = me.getRange();
// range = Ext.draw.Draw.snapEndsByDateAndStep(new Date(range.min), new Date(range.max), Ext.isNumber(step) ? [Date.MILLI, step] : step, true);
// return range;
// }
// else {
// return me.callParent(arguments);
// }
// };
////END of FIX
var chart;
var generateData = (function() {
var data = [],
last = false,
min = Math.min,
max = Math.max,
random = Math.random;
return function() {
data = data.slice();
data.push({
date: new Date(),
visits: min(100, max(last? last.visits + (random() - 0.5) * 20 : random() * 100, 0)),
views: min(100, max(last? last.views + (random() - 0.5) * 10 : random() * 100, 0)),
veins: min(100, max(last? last.veins + (random() - 0.5) * 20 : random() * 100, 0))
});
last = data[data.length -1];
return data;
};
})();
var store = Ext.create('Ext.data.JsonStore', {
fields: ['date', 'visits', 'views', 'veins'],
data: generateData()
});
var intr = setInterval(function() {
// debugger;
var data = generateData();
timeAxis.maximum = +data[data.length-1].date;
timeAxis.minimum = +data[data.length-1].date - 2*60*1000; //2 minutes
timeAxis.step = [Ext.Date.SECOND, 15];
store.loadData(data);
}, 1000);
Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
maximizable: true,
title: 'Live Updated Chart',
layout: 'fit',
items: [{
xtype: 'chart',
style: 'background:#fff',
store: store,
grid: true,
id: 'chartCmp',
axes: [{
type: 'Numeric',
grid: true,
minimum: 0,
maximum: 100,
position: 'left',
fields: ['views', 'visits', 'veins'],
title: 'Number of Hits',
grid: {
odd: {
fill: '#dedede',
stroke: '#ddd',
'stroke-width': 0.5
}
}
}, {
type: 'Time',
position: 'bottom',
fields: 'date',
title: 'Time',
label: {
renderer: function(value) {
if (!timeAxis) { return ''; }
var
max = timeAxis.maximum,
e = Ext.Date.getElapsed(value, max),
s = Math.floor(e/1000);
return (0 === s) ? 'now' : s + 's ago';
}
},
constrain: true
}],
series: [{
type: 'line',
axis: ['left', 'bottom'],
xField: 'date',
yField: 'visits',
label: {
display: 'none',
field: 'visits',
renderer: function(v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 5,
size: 5
}
},{
type: 'line',
axis: ['left', 'bottom'],
xField: 'date',
yField: 'views',
label: {
display: 'none',
field: 'visits',
renderer: function(v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 5,
size: 5
}
},{
type: 'line',
axis: ['left', 'bottom'],
xField: 'date',
yField: 'veins',
label: {
display: 'none',
field: 'visits',
renderer: function(v) { return v >> 0; },
'text-anchor': 'middle'
},
markerConfig: {
radius: 5,
size: 5
}
}]
}]
}).show();
chart = Ext.getCmp('chartCmp');
var timeAxis = chart.axes.get(1);
});
</script>
</head>
<body>
<h1>Chart</h1>
</body>
</html>
Fix included in the code.