Extjs Store all fields average

1
votes

I have a store like below

Ext.define('Result', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'state', type: 'string', mapping:0 },
        { name: 'product', type: 'string', mapping:1 },
        { name: 'quantity', type: 'int', mapping:2 }
        { name: 'price', type: 'int', mapping:3 }
    ]
});
var store = Ext.create('Ext.data.ArrayStore', {
    model: 'Result',
    groupField: 'state',
    data: [
        ['MO','Product 1',50,40],
        ['MO','Product 2',75,50],
        ['MO','Product 3',25,60],
        ['MO','Product 4',125,70],
        ['CA','Product 1',50,50],
        ['CA','Product 2',100,40],
        ['WY','Product 1',250,40],
        ['WY','Product 2',25,50],
        ['WY','Product 3',125,86],
        ['WY','Product 4',175,83]
    ]
});

I want to calculate the average of quantity and price of every state group and show it into the grid . I have seen in the sencha documentation, there is a function like average(http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-average) and I can Implement it like 

store.avarage('quantity', true);

but it only gives the average of only one field .

How and I calculate the average of multiple fields depending on the group and show it in a grid.

2
javascriptextjsextjs4sencha-touchstore
store.avarage('quantity', true); – Ivan
So you mean you want the average of fields grouped by state == 'MO', state == 'WY', etcetera? – Dexygen
@GeorgeJempty yes I want the average like state ='MO' , Quantity=avg of Quantity(state 'MO') Price= avg of Price(state'MO' ) – Yogesh patel
@Ivan I Know this function store.avarage('quantity', true); but I want average of more then one fields... – Yogesh patel
@Yogeshpatel: ok next try: jsfiddle.net/Jandalf/Wn4UY/3 but I think you need a whole new store to place into the grid, you could merge the result of both average results and place the merged data into the store.. – Jan S

2 Answers

1
votes

The following is one way to address the data issue -- I've appended each record with average quantity and price fields. I'll leave it to you as an exercise as to how to appropriately update the fields setting above data in your example:

data: (function() {
    var data = [
        ['MO','Product 1',50,40],
        ['MO','Product 2',75,50],
        ['MO','Product 3',25,60],
        ['MO','Product 4',125,70],
        ['CA','Product 1',50,50],
        ['CA','Product 2',100,40],
        ['WY','Product 1',250,40],
        ['WY','Product 2',25,50],
        ['WY','Product 3',125,86],
        ['WY','Product 4',175,83]
    ];

    var qtyByState = {};
    var priceByState = {};
    var record;
    var state;

    for (var i=0, n=data.length; i<n; i++) {
        record = data[i];
        state = record[0];

        if (!qtyByState[state]) {
            qtyByState[state] = {
                total: 0,
                nbr: 0,
            }
        }

        if (!priceByState[state]) {
            priceByState[state] = {
                total: 0,
                nbr: 0
            }
        }

        qtyByState[state].avg = (qtyByState[state].total += record[2]) / ++qtyByState[state].nbr;
        priceByState[state].avg = (priceByState[state].total += record[3]) / ++priceByState[state].nbr;
    }

    for (var i=0, n=data.length; i<n; i++) {
        record = data[i];
        state = record[0];
        record.push(qtyByState[state].avg);
        record.push(priceByState[state].avg);
    }

    return data;
})()
1
votes

this will give you a grid with average data only: http://jsfiddle.net/Jandalf/Wn4UY/4/

var chartStore = Ext.create('Ext.data.ArrayStore', {
    fields: ['state',  'product', 'quantity', 'price'],
    groupField: 'state',
    data: [
        ['MO','Product 1',50,40],
        ['MO','Product 2',75,50],
        ['MO','Product 3',25,60],
        ['MO','Product 4',125,70],
        ['CA','Product 1',50,50],
        ['CA','Product 2',100,40],
        ['WY','Product 1',250,40],
        ['WY','Product 2',25,50],
        ['WY','Product 3',125,86],
        ['WY','Product 4',175,83]
    ]
});

var data = [];
var quantities = chartStore.average("quantity", true);
var prices = chartStore.average("price", true);
Ext.each(chartStore.collect('state'), function(item){
    data.push({
        state: item,
        quantity: quantities[item],
        price: prices[item]
    });
});

var gridStore = Ext.create('Ext.data.Store', {
    fields: ['state', 'quantity', 'price'],
    groupField: 'state',
    data: data
});

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: gridStore,
    columns: [
        { dataIndex: 'state', text: 'State' },
        { dataIndex: 'quantity', text: 'Quantity' },
        { dataIndex: 'price', text: 'Price' }
    ]
});

if you want a chart with a different grouping you need a extra store, you can't define 2 'views' for a store.