PDA

View Full Version : Restrict load data to pie chart extjs



vl.isaev
17 Dec 2013, 8:09 AM
I have store with model and pie chart, this data also are shown in some grid. My chart show graph for one column, I want to show in chart just data, which more some value. Put minimum in axes didn't help.

scottmartin
17 Dec 2013, 10:00 AM
You can change the store filters as needed. See the following:



Ext.define('MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore',
storeId:'simpsonsStore',
fields:['name', 'email', 'phone', 'data'],
data:{'items':[
{ 'name': 'Lisa', 'email':'[email protected]', 'phone':'555-111-1224', 'data': 10 },
{ 'name': 'Bart', 'email':'[email protected]', 'phone':'555-222-1234', 'data': 7 },
{ 'name': 'Homer', 'email':'[email protected]', 'phone':'555-222-1244', 'data': 5 },
{ 'name': 'Marge', 'email':'[email protected]', 'phone':'555-222-1254', 'data': 27 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.onReady(function () {

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: {
type: 'mystore' // create instance
},
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' },
{ header: 'Data', dataIndex: 'data' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

// get instance created by grid; or use grid.getStore()
var chartStore = Ext.data.StoreManager.lookup('simpsonsStore');

// filter that instance
chartStore.filter({
property: 'name',
value: 'Bart'
});

var chart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,

store: {
type: 'mystore' // new store instance; separate data
},

theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}],

listeners: {
render: function(me) {
// create a filter on the chart store
me.getStore().filter({
property: 'name',
value: 'Homer'
});
}

}
});

});

vl.isaev
18 Dec 2013, 12:19 AM
Ok, thank you. I thought, like you wrote, but hoped, that there can be some configuration.