Ext Js ChartsKitchenSink.view.charts.pie.Basic - extjs

Question

I'm using this pie chart example in this link to display a pie chart.
How do I set the pie chart dynamically and refresh the pie chart?

Answer 1

To dynamically create chart:-
var chart = Ext.create('Ext.chart.Chart', {
xtype: 'chart',
animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store1.each(function(rec) {
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
To refresh the chart you can use store.loadData method.
Reference url

Answer 2

For loading dynamic data in pie char store you can use reload(),loadData() and load() methods of store.
store.reload() example
store.reload({
params : {
userid : 1234
}
});
store.load() example
store.load({
scope: this,
callback: function(records, operation, success) {
// the Ext.data.operation.Operation object
// contains all of the details of the load operation
console.log(records);
}
});
If the callback scope does not need to be set, a function can simply be passed:
store.load(function(records, operation, success) {
console.log('loaded records');
});
store.loadData() example
var data= [{
os: 'Android',
data1: 68.3
},{
os: 'Others',
data1: 1.9
}];
store.loadData(data);
In this FIDDLE, I have created a demo. Hope this will help/guide you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
/**
* Returns a random integer between min (inclusive) and max (inclusive)
* Using Math.round() will give you a non-uniform distribution!
*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function createDyanmicData(store) {
store.each(rec => {
rec.set('data1', getRandomInt(20, 100));
});
}
Ext.create({
xtype: 'polar',
tbar: ['->', {
text: 'Refresh Chart',
height: 35,
padding: 5,
margin:'0 10',
style: {
background: 'green'
},
handler: function () {
createDyanmicData(this.up('polar').getStore())
}
}],
title: 'Pie Chart Example',
renderTo: Ext.getBody(),
width: '100%',
height: window.innerHeight,
interactions: 'rotate',
store: {
fields: ['os', 'data1'],
data: [{
os: 'Android',
data1: 68.3
}, {
os: 'iOS',
data1: 17.9
}, {
os: 'Windows Phone',
data1: 10.2
}, {
os: 'BlackBerry',
data1: 1.7
}, {
os: 'Others',
data1: 1.9
}]
},
series: {
type: 'pie',
xField: 'data1',
label: {
field: 'os',
display: 'inside',
calloutLine: true
},
showInLegend: true,
highlight: true,
highlightCfg: {
fill: '#ccc',
'stroke-width': 10,
stroke: '#fff'
},
tips: {
trackMouse: true,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('os') + ': ' + storeItem.get('data1') + '%');
}
}
}
});
}
});