PDA

View Full Version : Display groupField from store in pie chart



alex9311
9 Oct 2012, 4:48 PM
Hi all,

I want to make a pie chart that displays groupFields from my store.

For example if I have data:
student,grade
Sam, FR
Dylan, SOPH
Jess, SOPH
Rose, SOPH
Andy, FR
Jack, JR
Tim, SR
etc etc...

I want a pie chart that shows the distribution of freshman, sophmores, juniors, and seniors. So there would be 4 sections, one for each class and they would take up a part of the 'pie' propotional to the amount of students who are of that class.

The problem is that my store isn't:
class, # of students
FR,2
SOPH, 3
JR, 1
SR, 1

how can I pull that data out of my store and show it in a chart? Do I use a group field? Or some rendering function?

Thank you for any tips

vietits
9 Oct 2012, 6:39 PM
1. Group data inside store by using <store>.group()/groupField, groupDir, etc.
2. Get results of store grouping by using <store>.getGroups().
3. Construct a new store basing on the results gotten from step 2 for the chart.

alex9311
10 Oct 2012, 3:56 PM
Thanks for the quick reply.

Do you know of any examples of creating a store based on an existing store's data?

vietits
10 Oct 2012, 5:02 PM
In fact, the result returned from calling <store>.getGroups() is an array. So you just need to create a new store with this result. It is the same as you create a store with data from an array.
Below is an example for your case:


Ext.onReady(function(){
// create a store
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'grade'],
data: [{
name: 'Sam', grade: 'FR'
},{
name: 'Dylan', grade: 'SOPH'
},{
name: 'Jess', grade: 'SOPH'
},{
name: 'Rose', grade: 'SOPH'
},{
name: 'Andy', grade: 'FR'
},{
name: 'Jack', grade: 'JR'
},{
name: 'Tim', grade: 'SR'
}]
});
// group on "grade" field
store.group('grade');
// get groups
var groups = store.getGroups();
// create new store basing on groups array
var groupStore = Ext.create('Ext.data.Store', {
fields: [{
name:'grade', mapping: 'name'
}, {
name: 'total', convert: function(value, record){
return record.raw.children.length;
}
}],
data: groups
});
console.log(groupStore);
});

alex9311
11 Oct 2012, 4:43 PM
Wow great, thank you very much. I'm going to try to implement this in my MVC architecture now!

alex9311
11 Oct 2012, 5:00 PM
So far this is what I have, still trying to get it to work though

Ext.define('C.view.chart.Chart' , {
extend: 'Ext.chart.Chart',
alias: 'widget.chartchart',
width: 500,
height: 600,
animate: true,
store: this.createStore(),
shadow: true,
legend: {
position: 'right'
},
insetPadding: 25,
series: [{
type: 'pie',
field: 'number',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
chart.each(function(rec) {
total += rec.get('number');
});
this.setTitle(storeItem.get('level') + ': ' + Math.round(storeItem.get('number') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'level',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}],

createStore: function() {
var store = Ext.data.StoreManager.lookup('Chart');
store.group('grade');
var groups = store.getGroups();
// create new store basing on groups array
var groupStore = Ext.create('Ext.data.Store', {
fields: [{
name:'grade', mapping: 'name'
}, {
name: 'total', convert: function(value, record){
return record.raw.children.length;
}
}],
data: groups
});
return groupStore;
}
});

alex9311
12 Oct 2012, 11:49 AM
figured it out:


Ext.define('C.view.chart.Chart' , {
extend: 'Ext.chart.Chart',
alias: 'widget.chartchart',
width: 600,
height: 500,
//animate: true,
initComponent: function(){
this.store = this.createStore();
this.callParent(arguments);
},
shadow: true,
legend: {
position: 'right'
},
series: [{
type: 'pie',
field: 'total',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
chart.each(function(rec) {
total += rec.get('total');
});
this.setTitle(storeItem.get('grade') + ': ' + Math.round(storeItem.get('total') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'grade',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}],

createStore:function(){
var store = Ext.data.StoreManager.lookup('Chart');
store.group('grade');
var groups = store.getGroups();
// create new store basing on groups array
var groupStore = Ext.create('Ext.data.Store', {
model: 'C.model.GroupChart',
fields: [{
name:'grade', mapping: 'name'
}, {
name: 'total', convert: function(value, record){
return record.raw.children.length;
}
}],
data: groups
});
return groupStore;
},
});