Creating custom fills in a Flex PieChart control using the fillFunction property

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.

View MXML

<?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.

5 thoughts on “Creating custom fills in a Flex PieChart control using the fillFunction property

  1. 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.

  2. 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.

    private var pieColor:Array = [0x000000, 0x000000, 0x000000, 0x000000];
    

    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;
    	}
    }
    
  3. 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.

  4. 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 ..

Comments are closed.