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

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

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'
            }
        }
    }
});

Answer 2

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...              
}