Draw a line on an Extjs chart for the average of a series - extjs4

Question

Using ExtJS4, I need to draw a straight line across a column chart indicating the average of the series. Does anyone have know of an example of this or have a suggestion on how to do it?

Answer 1

I usually have the average value calculated on server side and held in the store. For exmaple, My store will be:
Ext.data.Store({
fields: ['name','active','avg'],
autoLoad: true,
proxy: {
type: 'ajax',
url : '/location/to/data'
}
})
The 'avg' holds the average value. The average line is drawn using the following series configuration:
{
type: 'line',
xField: 'name',
yField: 'avg',
showMarkers: false // Ensures that markers don't show up on the line...
}

Answer 2

Or we can calculate it on client side like this. Here is a working sample.
var container = Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: 'fit',
items: {
xtype: 'cartesian',
store: {
fields: ['month', 'value'],
data: [{
month: 'January',
value: 40
}, {
month: 'February',
value: 30
}, ]
},
axes: [{
id: 'left',
type: 'numeric',
position: 'left',
fields: 'value',
grid: true,
listeners: { // this event we need.
rangechange: function (axis, range) {
var store = this.getChart().getStore();
var tmpValue = 0, ortalama = 0, idx = 0;
store.each(function (rec) {
tmpValue = rec.get('value');
ortalama = tmpValue + ortalama;
idx++;
});
ortalama = (ortalama / idx).toFixed(2);
this.setLimits({
value: ortalama,
line: {
title: {
text: 'Average: ' + ortalama + ' USD'
},
lineDash: [2, 2]
}
});
}
}
}, {
id: 'bottom',
type: 'category',
position: 'bottom',
fields: 'month'
}],
series: {
type: 'bar',
xField: 'month',
yField: 'value',
label: {
field: 'value',
display: 'outside',
orientation: 'horizontal'
}
}
}
});