2 Replies Latest reply on Jul 19, 2011 5:40 AM by Sathyamoorthi

    Flex Pie chart add an image to each wedge.

    Sathyamoorthi Level 2

      Hi,

       

           I want to add image to each wedge based on the dataProvider value. any help?

       

      Thanks,

      Sathyamoorthi.

        • 1. Re: Flex Pie chart add an image to each wedge.
          Karl_Sigiscar_1971 Level 3

          Hi,

           

          Do you mean to say you want to render an image inside the wedge ?

           

          In that case, have you considered using the beginBitmapFill() method on an instance of PolarDataCanvas in the backgroundElements of the PieChart ?

          • 2. Re: Flex Pie chart add an image to each wedge.
            Sathyamoorthi Level 2

            Hi,

             

                 Finally iresolved this using itemRenderer for Pieseries.

             

             

            <?xml version="1.0"?>
            <!-- Simple example to demonstrate the PieChart control. -->
            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx">
                <fx:Script>
                    <![CDATA[         
                    import mx.collections.ArrayCollection;
                    import mx.effects.easing.Elastic;

             

                    [Bindable]
                    private var medalsAC:ArrayCollection = new ArrayCollection( [
                        { Country: "USA", Gold: 35, Silver:39, Bronze: 29, Icon: 'download.png' },
                        { Country: "China", Gold: 32, Silver:17, Bronze: 14, Icon: 'download.png' },
                        { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
               
                    private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
                        var temp:String= (" " + percentValue).substr(0,6);
                        return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
                    }
                    ]]>
                </fx:Script>

             

                <fx:Declarations>
                    <!-- Define custom colors for use as pie wedge fills. -->
                    <mx:SolidColor id="sc1" color="blue" alpha=".6"/>
                    <mx:SolidColor id="sc2" color="red" alpha=".6"/>
                    <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>

             

                    <!-- This Stroke is used for the callout lines. -->
                    <mx:SolidColorStroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>
               
                    <!-- This Stroke is used to separate the wedges in the pie. -->
                    <mx:SolidColorStroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>

             

                    <!-- This Stroke is used for the outer border of the pie. -->
                    <mx:SolidColorStroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>
                </fx:Declarations>
               

             


                <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="100%">
                    <mx:PieChart id="chart"
                        height="400"
                        width="400"
                        paddingRight="5"
                        paddingLeft="5"
                        showDataTips="true"
                        dataProvider="{medalsAC}">                            
                        <mx:series>               
                            <mx:PieSeries
                                nameField="Country"
                                labelPosition="inside"
                                field="Gold"                    
                                labelFunction="displayGold"
                                perWedgeExplodeRadius="[0, 0, 0.01]"
                                radialStroke="{radial}"
                                stroke="{pieborder}"                   
                                fills="{[sc1, sc2, sc3]}" itemRenderer="CycleColorRenderer">
                                <mx:showDataEffect>
                                    <mx:SeriesInterpolate duration="1000" />
                                </mx:showDataEffect>
                                <!-- Clear the drop shadow filters from the chart. -->
                                <mx:filters>
                                    <fx:Array/>
                                </mx:filters>
                            </mx:PieSeries>
                        </mx:series>
                    </mx:PieChart> 
                    <mx:Legend dataProvider="{chart}"/>
                </mx:Panel>
            </s:Application>

             

             

             

             

            /************************ Item renderer ******************************/

            package
            {
                import flash.display.Sprite;
                import flash.events.Event;
                import mx.charts.renderers.WedgeItemRenderer;
                import mx.charts.series.PieSeries;
                import mx.containers.Canvas;
                import mx.controls.Image;
                import mx.core.UITextField;
                import mx.events.FlexEvent;
               
                /**
                 * ...
                 * @author
                 */
                public class CycleColorRenderer extends WedgeItemRenderer
                {
                    private var objCanvas:Canvas = new Canvas();
                    private var imgTemp:Image = new Image();
                   
                    public function CycleColorRenderer()
                    {       
                        super();               
                    }
                   
                    override public function set data(value:Object):void
                    {
                        var lblContainer:Sprite;
                        super.data = value;
                                   
                        try
                        {           
                            if (value == null || value.item == null || value.item.hasOwnProperty('Icon') == false)
                                return;
                               
                            lblContainer = (this.parent as PieSeries).labelContainer;
                           
                            if (objCanvas.parent == null)
                            {
                                imgTemp.source = value.item.Icon;
                                objCanvas.addChild(imgTemp);
                                imgTemp.addEventListener("updateComplete", IconUpdateCompHandler);
                                (this.parent as PieSeries).addChild(objCanvas);   
                            }
                           
                            if (lblContainer.numChildren > value.index)
                            {
                                objCanvas.visible = objCanvas.includeInLayout = true;
                               
                                objCanvas.x = (lblContainer.getChildAt(value.index) as UITextField).x;
                                objCanvas.y = (lblContainer.getChildAt(value.index) as UITextField).y - objCanvas.height;           
                            }
                            else
                            {
                                objCanvas.visible = objCanvas.includeInLayout = false;
                            }
                        }
                        catch(err:Error)
                        {}
                    }
                   
                    private function IconUpdateCompHandler(event:Event):void
                    {
                        event.target.parent.height = event.target.height;
                        event.target.parent.width = event.target.width;
                    }
                   
                    override protected function updateDisplayList(unscaledWidth:Number,
                                                              unscaledHeight:Number):void
                    {       
                        super.updateDisplayList(unscaledWidth, unscaledHeight);       
                    }
                   
                }

            }