PDA

View Full Version : [4.1-pr1] Reloading pie chart with less data orphans labels



slemmon
29 Oct 2011, 4:01 PM
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
2 Nov 2011, 7:26 AM
Should I open this in the bugs forum instead?
* Or if that's appropriate, could an admin move this post to Bugs?

waitingmyself
10 Nov 2011, 12:30 AM
i have the same problem

wdunn
15 Nov 2011, 9:53 AM
Same issue.

gordonk66
17 Nov 2011, 1:21 PM
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;
}
}