PDA

View Full Version : Wrong pie chart behaviour when animate is set tot true



PranKe01
20 Feb 2012, 2:23 AM
REQUIRED INFORMATION




Ext version tested:

Ext 4.1 beta2

Browser versions tested against:

Chrome
IE9

Description:

When setting the animate property of a pie chart, a hole appears and the smaller piece does not animate.

Steps to reproduce the problem:

Create a pie chart with two pieces. One with 78 and one with 4 items.
Set the animate property.

The result that was expected:

No holes.
Both pieces are animated when mouse hovers them.

The result that occurs instead:

A hole.
Only the bigger one animates.

Test Case:



Ext.define('StpInsolvenzportalCharts.view.ui.PieChart', {
extend: 'Ext.chart.Chart',


id: 'pieChartCmp',
height: 500,
width: 667,
animate: true, // comment this line and the hole disappears and both pieces are moving...
shadow: false,
insetPadding: 20,
store: 'PercentalStore',


initComponent: function () {
var me = this;


Ext.applyIf(me, {
series: [
{
type: 'pie',
field: 'Amount',
label: {
field: 'Name',
contrast: true,
font: '14px Arial',
display: 'rotate'
},
highlight: {
segment: {
margin: 10
}
},
tips: {
trackMouse: true,
width: 180,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Amount')+' (' + Math.round(storeItem.get('Amount') / storeItem.get('Total') * 100) + '%)');
}
}
}
]
});


me.callParent(arguments);
}
});








HELPFUL INFORMATION




Screenshot or Video:

attached (first one with animate: true. second one with animate: false)
3192931930
Operating System:

Windows 7

PranKe01
20 Feb 2012, 3:11 AM
Just another note: if I got two pieces, where one got 0 "items", the chart is rendered completely wrong:
31933
The Pie is placed completely wrong!

PranKe01
20 Feb 2012, 3:40 AM
And here a screenshot from the examples where the same problem exists (between January and May):
31934