PDA

View Full Version : Chart based on summary data



DmitryF
29 Jun 2012, 5:38 AM
Hello.

I have a Store with data:


{
sites: [
{name: 'site1', date1: '10', date2: '15',...},
{name: 'site2', date1: '10', date2: '15',...},
....
],

total: {date1: '100', date2: '150'}
}


How a can create a chart with total (or summary) data if root of the store is "sites"?

scottmartin
29 Jun 2012, 6:57 AM
You could create a convert field to create calculated data to use as fields, dump totals to another store real quick.

Scott.

DmitryF
29 Jun 2012, 8:08 AM
Sorry but i did not understand you :(
Could you give me a short example code, please

scottmartin
29 Jun 2012, 10:43 AM
You can create calculated fields as such:




Ext.onReady(function () {

Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: [
'student',
{ name: 'month1', type: 'int' },
{ name: 'month2', type: 'int' },
{
name: 'total', type: 'int',
convert: function(val,row) {
return row.data.month1 + row.data.month2;
}
}
]
});

Ext.create('Ext.grid.Panel', {
width: 500,
height: 140,
renderTo: document.body,
features: [{
ftype: 'summary'
}],
store: {
model: 'TestResult',
data: [{
student: 'Row 1',
month1: 100,
month2: 50
},{
student: 'Row 2',
month1: 200,
month2: 100
},{
student: 'Row 3',
month1: 300,
month2: 150
}
]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format('{0} row{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'month1',
text: 'Month1',
summaryType: 'sum'
}, {
dataIndex: 'month2',
text: 'Month2',
summaryType: 'sum'
}, {
dataIndex: 'total',
text: 'total',
summaryType: 'sum'
}
]
});


});



Scott.

DmitryF
29 Jun 2012, 12:31 PM
Thank you, i got it.
But i need summary data for rows (not fields) in chart.

For example:


data: [{
student: 'Row 1',
month1: 100,
month2: 50
},{
student: 'Row 2',
month1: 200,
month2: 100
},{
student: 'Row 3',
month1: 300,
month2: 150
}
]


Summary data for a chart series is: {month1: 600, month2: 300}

scottmartin
29 Jun 2012, 12:42 PM
Right .. you could use the summaryRenderer to add this data to array store for the chart:
console.log(summaryData);

You could assign an itemId for each column for reference.

astore.add(record);

Scott.

DmitryF
30 Jun 2012, 10:09 AM
Thank you, very much! It works great! :)