CODEWITHSUNDEEP
extjsextjs4
Dylan
Dylan

Reputation: 151

ExtJS 4 - sort bar chart

I have a grid and a bar chart immediately underneath it, all representing the same data (same store). The grid is obviously sortable based on clicking column headers, and the chart auto-refreshes based on the data that is shown in the grid.

Trouble is, bar charts seem to sort the underlying store data in the opposite direction of the grid. So for example when the grid is sorted to show...

Name / Sales  
Joe / 100  
Sally / 80  
Tim / 60

...the bar chart shows:

[bar 1 - top]: Tim / 60  
[bar 2 - mid]: Sally / 80  
[bar 3 - bot]: Joe / 100

This is counter-intuitive to the user -- they would expect the sort of the grid and chart to be consistent. (Column charts work well - Joe/Sally/Tim from left column to right -- but that is not an option on this page for other reasons.)

Is there a way to change this so that the bar chart sorts the other direction?

Perhaps the store itself could be re-sorted within the chart class definition? If so, how would that be done exactly? And would this affect how the grid displays its data?

Upvotes: 0

Views: 1581

Answers (2)

Dylan
Dylan

Reputation: 151

Thanks to mfruizs2 for the pointers - helped get me on the right track. For anyone coming by in the future, here is what I did to solve this:

//get the # of records in the current grid page
var gridStoreItems = gridStore.getCount();

//setup a separate store just for the *chart*
var chartStore = Ext.create('Ext.data.ArrayStore', {                    
   model    : gridStore.model,
   proxy    : gridStore.proxy,
   storeId  : 'chartStore',
});

//loop records of current *grid* store, from bottom to top
//and add the bottom grid store record to the top of the chart store, and so on
for (var i=(gridStoreItems-1); i>=0; i--)                               
   {
      chartStore.add(gridStore.getAt(i).data);
   }

Then use chartStore as the basis for the bar chart. It will now display chart records in the same sequence as shown in the grid.

Here's hoping that Sencha adds a simple sorting config to charts in the future...

Upvotes: 0

mfruizs
mfruizs

Reputation: 770

1. Load your grid store:

gridStore.load({
    callback: function(records, operation, success) {
        if(success){
            // Load data from first Store (grid) to second Store (chart)
            chartStore.loadData(records);
                    // Sort chart store data:
            chartStore.sort('field','ASC');
        }
    }
});

2. sort the grid store:

gridStore.sort('field','DESC');

Upvotes: 1

Related Questions