EXTJS MVC Pie chart

Question

Am having a pie chart and a grid displaying below it, both of which use the same store.

And, in the store, am having the following fields:

Total, Allocated, Used, Remaining.

Is it possible to make the pie chart to have only three of the fields from the four, as i dont want the total field to appear in the pie chart, but the grid should have it. so, could anyone please tell me what is the best way to to this?

Code as follows:

Pie chart

var chart1 = Ext.create('Ext.chart.Chart', {
        id : 'chart1',
        xtype : 'chart',
        theme : '',
        animate : true,
        shadow : true,
        height : 250,
        width : 250,
        store : LicSumStore,
        series : [{
            type : 'pie',
            angleField : 'value',

            showInLegend : true,
            highlight :{
                segment :{
                    margin :20
                }
            } ,
            label : {
                field : 'title',
                display :'rotate',
                contrast : true,
                font : '12px Arial'
            },
            title : 'Licenses',

        }],

    });

Grid

   var licSummaryGrid = Ext.create('Ext.grid.Panel',{
        title :'LicenseSummary',
        store : LicSumStore,
        enableColumnResize : false,
        columns : [
            {
                text : 'License Type', 
                dataIndex : 'title',
                width : 150,
                sortable : false,
                hideable : false,

            },
            {
                text : 'Count', 
                dataIndex : 'value', 
                width : 100,
                sortable : false,
                hideable : false,


            }
        ],

        height : 180,
        width : 255

    });

rosebrit3 rosebrit3 · Accepted Answer · 2012-09-27T10:51:40

Solved this, by adding the total field in the grid, using the summary type,instead of modifying the data in the pie chart. Thus, i got rid of the total field in the store, and calculated it in the grid.

Here is the code:

{
    text: 'License Type',
    dataIndex: 'title',
    width: 150,
    sortable: false,
    hideable: false,
    summaryRenderer: function () {
        return Ext.String.format('Total');
    }
}, {
    text: 'Count',
    dataIndex: 'value',
    width: 100,
    sortable: false,
    hideable: false,
    summaryType: 'sum'

}

EXTJS MVC Pie chart

1 Answers