how to changing the pie chart color at runtime?

[capz_man]

hi guys, i have a problem about changing the pie chart color at runtime.
for example, i have this chart :

<mx:PieChart id="pcRegion" width="100%" height="100% " >
<mx:series>
<mx:Array>
<mx:PieSeries field="revenue" nameField="name" labelPosition= "callout"
labelFunction= "getSliceLabel" showDataEffect= "{interpolate} ">
<mx:fills>
<mx:Array>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry id="pie1" color="#A1AECF" ratio="0"/>
<mx:GradientEntry id="pie11" color="#47447A" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient >
</mx:series>
</mx:PieChart>

and need to change the gradient entry with the id pie1 anda pie11,i
did it like this:
pie1.color=0xFF0000 ;
but its seems doesn't work.
can someone help me to figure it out?
thanks,
regards

[flexy]

The clue to your answer lies here:


<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry id="pie1" color="#A1AECF" ratio="0"/>
<mx:GradientEntry id="pie11" color="#47447A" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient >


The colour of your PieChart is managed by an Array entry on the RadialGradient. To successfully change the colour you need to change the two gradient entries, then update your chart series with the changes.


myChart.invalidateSeriesStyles();
myChart.series = myChart.series;

[capz_man]

Ok, I've made change using this:

[Bindable]
public var pie1Color:uint=0x6FB35F;
[Bindable]
public var pie11Color:uint=0x6FB35F;

<mx:PieChart id="pcRegion" width="100%" height="100% " >
<mx:series>
<mx:Array>
<mx:PieSeries field="revenue" nameField="name" labelPosition= "callout"
labelFunction= "getSliceLabel" showDataEffect= "{interpolate} ">
<mx:fills>
<mx:Array>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry id="pie1" color="{pie1Color}" ratio="0"/>
<mx:GradientEntry id="pie11" color="{pie11Color}" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient >
</mx:series>
</mx:PieChart>

now the problem is i want to change the value of pie1Color, pie11Color trough a function, the value changed but the pie stay same as the color before.

private function init(){
pie1Color=0xFF0000;
pie11Color:uint=0xFF0000;
}

do you know why is this happened?
and what does the invalidateSeriesStyles(); means?
and i'm confuse whit this:
myChart.series = myChart.series;

thanks

[flexy]

If I'm right, the series style won't be updated with your new colours unless you invalidate it. It forces a redraw.
At the end of your function, you need to call the invalidateSeriesStyles(); of your PieChart. Calling myChart.series = myChart.series; is a naughty way of forcing your chart to display any changes you've made to the series array.

[capz_man]

hi Flexy, I've tried what you said but it still don't working for me.
i use these code:

[Bindable]
public var pie1Color:uint=0x6FB35F;
[Bindable]
public var pie11Color:uint=0x6FB35F;
[Bindable]
public var pie2Color:uint=0x6FB35F;
[Bindable]
public var pie21Color:uint=0x6FB35F;

<mx:PieChart id="pcRegion" dataProvider="{_data}" name="Chart data is available in grid view" toolTip="{pcToolTip}" showDataTips="true" width="100%" height="100%" itemClick="regionChange(event.hitData.item)"
dataTipFunction="formatDataTip"
creationComplete="chartComp()">
<mx:series>
<mx:Array>
<mx:PieSeries field="revenue" nameField="name" labelPosition="callout"
labelFunction="getSliceLabel" showDataEffect="{interpolate}">
<mx:fills>
<mx:Array>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry id="pie1" color="{pie1Color}" ratio="0"/>
<mx:GradientEntry id="pie11" color="{pie11Color}" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry id="pie2" color="{pie2Color}" ratio="0"/>
<mx:GradientEntry id="pie21" color="{pie21Color}" ratio="1"/>
</mx:Array>
</mx:entries>
</mx:RadialGradient>
</mx:fills>
</mx:PieSeries>
</mx:Array>
</mx:series>
</mx:PieChart>

then at itemClick="regionChange(event.hitData.item)" i would like to change the color of the pie chart..

private function regionChange(item:Object):void
{
selectedRegion = item;
dispatchEvent(new Event("regionPatientChange"));
var fills:Array=[];
var fill:RadialGradient = new RadialGradient();
var entries:Array = [];
entries.push( new GradientEntry( 0xff0000,0.1, 1));
entries.push( new GradientEntry( 0xff0000, 1, 1));
fill.entries = entries;
fills.push(fill);
pcRegion.setStyle("fills",fills);
pcRegion.invalidateSeriesStyles();
pcRegion.series=pcRegion.series;
}
any suggestion?
regards,

[capz_man]

Please...