Creating a line chart with updating data

1. We start by creating a simple Ext.data.Model to represent our HeartRate
data object:
Ext.define('HeartRate', {
extend: 'Ext.data.Model',
fields: [{
name: 'SecondsElapsed',
type: 'int'
}, {
name: 'BeatsPerMinute',
type: 'int'
}]
});

2. Next we create an Ext.data.Store that we will bind to our chart. We set this up to
point to our HeartRate.php file discussed earlier. We also attach a handler function
to our store's beforeload event where we increment the currentCount variable
and attach it as a parameter to our AJAX calls:
var currentCount = 0;
var maxDisplayCount = 20;
var heartRateStore = Ext.create('Ext.data.Store', {
model: 'HeartRate',
proxy: {
type: 'ajax',
url: 'HeartRate.php',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true,
listeners: {
beforeload: function(store, operation, opts){
currentCount++;
operation.params = {
currentCount: currentCount
};
}
}
});

3. Now we add a listener to the store's load event. This listener will be tasked with
updating the chart's x-axis' minimum and maximum values so that they stay in sync
with the data and only show 20 values at a time (defined by our maxDisplayCount
variable). We then redraw the chart:
load: function(store, records){
var chart = panel.items.get(0),
secondsElapsedAxis = chart.axes.get(1),
secondsElapsed = records[0].get('SecondsElapsed');
secondsElapsedAxis.maximum = store.getCount() < maxDisplayCount
? maxDisplayCount : secondsElapsed;
secondsElapsedAxis.minimum = store.getCount() < maxDisplayCount
? 0 : secondsElapsed - maxDisplayCount;
chart.redraw();
}

4. The next step is to create an Ext.Panel with an Ext.chart.Chart instance within
it. The chart should then be bound to heartRateStore:
var panel = Ext.create('Ext.Panel', {
width: 600,
height: 400,
title: 'Line Chart - Heart Rate Monitor',
layout: 'fit',
items: [{
xtype: 'chart',
animate: true,
store: heartRateStore
}],
style: 'margin: 50px',
renderTo: Ext.getBody()
});

5. We are now able to define the chart's series as the 'line' type and set its xField
and yField to be the SecondsElapsed and BeatsPerMinute fields respectively:
...
series: [{
type: 'line',
smooth: false,
axis: 'left',
xField: 'SecondsElapsed',
yField: 'BeatsPerMinute'
}]
...

6. The chart's numeric axes are now declared. The y-axis is bound to the
BeatsPerMinute field and given a position of left. The x-axis is bound
to the SecondsElapsed field and positioned at the bottom:
...
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
field: ['BeatsPerMinute'],
title: 'Beats per Minute',
minimum: 0,
maximum: 200,
majorTickSteps: 5
}, {
type: 'Numeric',
position: 'bottom',
fields: 'SecondsElapsed',
title: 'Seconds Elapsed',
minimum: 0,
maximum: 20,
decimals: 0,
constrain: true,
majorTickSteps: 20
}],
...
7. Finally, we make the magic happen by creating a repeating function using
the setInterval function. We pass this a simple function that calls the
heartRateStore's load method, which is configured to append the newly
loaded records to the existing ones, instead of replacing them:
setInterval(function(){
heartRateStore.load({
addRecords: true
});
}, 1000);