[4.1-pr1] Reloading pie chart with less data orphans labels

[slemmon]

REQUIRED INFORMATIONExt version tested:

Ext 4.1-pr1
Browser versions tested against:

IE9 NOTHING RENDERS AT ALL
FF7.0.1 (firebug 1.8.3
Chrome 15.0.874.106 beta-m
DOCTYPE tested against:

xhtml1-transitional

Description:

Loading the pie with say 6 records and then loading it with 2 will result in 2 pie slices, but 6 labels total (with the 4 extra floating within the pie). The legend has only 2 labels as expected.
Steps to reproduce the problem:

Load the pie chart example
Reload the pie chart store with generateData(2, 20)
The result that was expected:

The labels remaining should only be for the two records.
The result that occurs instead:

There are labels for the previous 6 records instead of just the two.
Test Case: (modified from the example in the SDK)
Ext.require('Ext.chart.*');
Ext.require('Ext.layout.container.Fit');


Ext.onReady(function () {
store1.loadData(generateData(6, 20));


var donut = false,
panel1 = Ext.create('widget.panel', {
width: 400,
height: 400,
title: 'Semester Trends',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
store1.loadData(generateData(2, 20));
}
}, {
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
}],
items: {
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store1,
shadow: true,
legend: {
position: 'right'
},
insetPadding: 10,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
donut: donut,
tips: {
trackMouse: true,
width: 140,
height: 28,
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'
}
}]
}
});
});


HELPFUL INFORMATIONScreenshot or Video:

attached
See this URL for live test case: http://Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

WinXP Pro

[slemmon]

Should I open this in the bugs forum instead?
* Or if that's appropriate, could an admin move this post to Bugs?

[waitingmyself]

i have the same problem

[wdunn]

Same issue.

[gordonk66]

Here is the work around I'm using. Add a renderer to the label for the chart and do some kind of verification with the store backing the chart to determine if the label should be an empty string. In my case any store item with a value of zero does not need a label.



label: {
field: 'name',
display: 'rotate',
font: '18px Arial',
renderer: function(name) {
label = "";
// Look up the record from the store to determine if the label should be shown
if (Ext.data.StoreManager.get('pieStore').findRecord('name', name).get('value') > 0) {
label = name;
}
return label;
}
}