How to control the display of legend in Pie Chart as per our need?

Question

In my Flex application, I have a pie chart which shows the distribution of shares held by different people in a company.

[Bindable]
        private var shareData:ArrayCollection;


    <mx:PieChart id="sharesDistribution" dataProvider="{shareData}" showDataTips="true"                              
            height="100%" width="70%"  left="0" right="0" bottom="0" top="0" >
        <mx:series>
            <mx:PieSeries field="share" nameField="name" labelPosition="insideWithCallout" />
        </mx:series>
</mx:PieChart>

<mx:Legend right="0" width="30%" direction="horizontal" dataProvider="{sharesDistribution}" />

As per the above code, the Pie Chart appears properly. The problem I'm facing here is....

Sometime, any of the member may have 0 or 0% shares. During that instance, the pie chart displays only the people who have shares. Say for e.g A, B, C & D are holding shares in a company. At one point of time, C doesn't hold any share, the pie chart shows only the shares held by A,B & D.

But, the legend shows the person C also with a colour which is not actually looking correct since the pie chart doesn't show such a person. Hope, you understand my point and agree with me.

I want the person C not to be displayed in the legend.

How can I do that ? Kindly, Share your answers.

Answer 1

I think the pie chart component do always show all items from the data source.

I would process the change Event of the ArrayList and define another List, which does not content any null elements.

Something like this (here is a working example):

<?xml version="1.0" encoding="utf-8"?>
<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" 
           minWidth="955" minHeight="600" creationComplete="init(event)">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.CollectionEvent;
        import mx.events.FlexEvent;

        [Bindable]private var shareData:ArrayCollection = new ArrayCollection(
            [
                {name: "A", share: 20}, 
                {name: "B", share: 50},
                {name: "C", share: 0},
                {name: "D", share: 10}
            ]);

        [Bindable]private var shareDataDP:ArrayCollection = new ArrayCollection();


        protected function init(event:FlexEvent):void
        {
            shareData.addEventListener(CollectionEvent.COLLECTION_CHANGE, onCollectionChange);
            updateDP();
        }

        private function onCollectionChange(evt:CollectionEvent):void
        {
            updateDP();
        }

        private function updateDP():void
        {
            shareDataDP.removeAll();

            for each (var item:Object in shareData)
            {
                if (item.share != 0)
                {
                    shareDataDP.addItem(item);
                }
            }
        }

    ]]>
</fx:Script>

<s:VGroup left="20" top="20">

    <s:HGroup verticalAlign="bottom">
        <s:Label text="Value for C: "/>
        <s:TextInput id="valueC" text="0" width="40" restrict="0-9"/>
        <s:Button label="Change" click="{shareData.getItemAt(2).share = int(valueC.text); shareData.refresh()}"/>
    </s:HGroup>

    <s:HGroup>

        <s:Group width="300" height="300">

            <mx:PieChart id="sharesDistribution" dataProvider="{shareData}" showDataTips="true"                              
                         height="100%" width="70%"  left="0" right="0" bottom="0" top="0">
                <mx:series>
                    <mx:PieSeries field="share" nameField="name" labelPosition="insideWithCallout" />
                </mx:series>
            </mx:PieChart>

            <mx:Legend right="0" width="30%" direction="horizontal" dataProvider="{sharesDistribution}" />

        </s:Group>

        <s:Group width="300" height="300">

            <mx:PieChart id="sharesDistributionDP" dataProvider="{shareDataDP}" showDataTips="true"                              
                         height="100%" width="70%"  left="0" right="0" bottom="0" top="0">
                <mx:series>
                    <mx:PieSeries field="share" nameField="name" labelPosition="insideWithCallout" />
                </mx:series>
            </mx:PieChart>

            <mx:Legend right="0" width="30%" direction="horizontal" dataProvider="{sharesDistributionDP}" />

        </s:Group>
    </s:HGroup>
</s:VGroup>
</s:Application>