Flex Examples
The following example shows how you can set fill colors in a Flex PieChart by specifying a custom fill function. In this example the fill function calculates the fill color based on the percentage value of each item. The larger the wedge, the brigher the fill color.
Full code after the jump.
<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2007/11/07/creating-custom-fills-in-a-flex-piechart-control-using-the-fillfunction-property/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.charts.series.items.PieSeriesItem;
import mx.graphics.IFill;
import mx.charts.ChartItem;
import mx.graphics.SolidColor;
private function pieSeries_fillFunc(item:ChartItem, index:Number):IFill {
var curItem:PieSeriesItem = PieSeriesItem(item);
/* Convert to a number between 0 and 1. */
var pct:Number = curItem.percentValue / 100;
return new SolidColor(0x0000FF * pct, 1.0);
}
]]>
</mx:Script>
<mx:XML id="dp">
<products>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</products>
</mx:XML>
<mx:PieChart id="chart"
height="100%"
width="100%"
showDataTips="true"
dataProvider="{dp.product}">
<mx:series>
<mx:PieSeries id="series"
nameField="@label"
field="@data"
fillFunction="pieSeries_fillFunc"
filters="[]" />
</mx:series>
</mx:PieChart>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Is this ‘fillFunction’ work only for Flex 3.0? And if it is any possible method to do the same in flex 2.0?
I’m looking around the web and can not found the solution for flex 2.0.
At last, I found another way to modified the fill color in runtime. (For Flex 2.0, if you have 3.0 then it’s easier by use fillFunction)
The key is to define an Array to store the default color data.(any color)
eg.
Then set it to PieSeries attributes : fills=”{pieColor}”
And replace each color in that array through the code!! That’s it.
One thing is the number of data that I used hasn’t change so I’m not sure it will work for dynamic number of data.
The code is below is:
private var pieColor:Array = [0x000000, 0x000000, 0x000000, 0x000000]; private function changeColor():void{ pieColor[0] = getColor('red'); pieColor[1] = getColor('amber'); pieColor[2] = getColor('green'); pieColor[3] = getColor('default'); } private function getColor(color:String):uint { trace("--getColor--: " color); switch(color){ case "red": return 0xFF0000; case "green": return 0x00FF00; case "amber": return 0xFFCC00; default: return 0x8800CC; } }How can I create a pie chart that uses dynamic data from ArrayCollection ? (I have a web page that does a cycles between the stats and then on the endState it generates all information in one RichTextEditor and then just add the text information into the DataGrid (3 rows) and now I want to create a pieChart that will use the data from one row and then generate a pieChart.
Just found this sample of code and it was exactly what I needed for a test.
Thanks for sharing you flex code.
First of all thanks for you all Mr. Cosmos and Peter for your help and i do the thinks based on that.
while going i found a small changes and its also working fine for the dynamic pie series color change.
I used the same
For setting the initial color :
private var pieColor:Array = [0x000000, 0x000000, 0x000000, 0x000000];
———————————
(giving this pieColor as a fill color for my pieSeries like fills=”{pieColor}” ).
———————————
there are 4 combo box in my application say an example :
confidanceValuesList data provider is having a value [0,Empty] and [1,Full]
—————–combo box change event ———-
protected function changeChargeTabCombo(event:IndexChangeEvent):void
{
var selectedItemIndex:int = event.currentTarget.selectedIndex;
switch (selectedItemIndex){
case 1:
pieColor[0] = 0xCE1AC5;
break;
default:
pieColor[6] = 0xFFFFFF;
}
changeColor();
}
———————————–
private function changeColor():void{
// making null need to set the fillFunction again
pieSeries.fillFunction = null;
pieSeries.fillFunction = pieSeries_fillFunc;
}
public function pieSeries_fillFunc(item:ChartItem, index:Number):IFill {
var curItem:PieSeriesItem = PieSeriesItem(item);
return new SolidColor(pieColor[curItem.index], 1.0);
}
this will change the pie series color based on the combo value .. the same can do foe the other 4 combo box,
dynamically we can change the pieSeries color ..