Using complex objects in PieChart

Question

Hi there,
Can someone steer me in the correct direction!
I have a pie chart that is bound to my model, an AC of VO's. The VO's are news articles with date, time, id, link, reach (value of 0-30 by increments of 5). When I set the data provider to this AC, and specificially to the reach property, I get a pie chart with tons of slices (one for every item in my AC) that are not grouped in any way. I'm looking for a way to group like objects.. For example, I'm looking for a chart that can tell the user, your list looks like this, 50% high reach 25%med reach, and so on..
If anyone can help get me going I'd really appreciate it!
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
     xmlns:mx="http://www.adobe.com/2006/mxml"
     x="8" y="19"
     width="566" height="367"
     backgroundColor="#EDF8FA"
     cornerRadius="5"
     backgroundAlpha="1.0"
     borderStyle="solid"
     borderColor="#D3ECF1">
     <mx:Script>
          <![CDATA[
          import mx.collections.ArrayCollection;
          import mx.charts.chartClasses.Series;
          import com.ryancanulla.dashboard.content.vo.QueueItemVO;
          import com.ryancanulla.dashboard.content.business.utility.MetaConverter;
          [Bindable] private var _dataProvider:ArrayCollection = new ArrayCollection();
          private var _utilityConverter:MetaConverter;
          public function set queue(e:ArrayCollection):void{
                         _dataProvider = e;
          public function get queue():ArrayCollection{
                         return _dataProvider;
          private function onTotalByReach(series:Series, item:QueueItemVO, fieldName:String):Object{
                         //trace("fieldName: " + fieldName);
                         _utilityConverter = new MetaConverter;
                         //trace(_utilityConverter.convertPossibleReachData(item));
                         return _utilityConverter.convertPossibleReachData(item);
          ]]>
     </mx:Script>
<!-- Define chart effects -->
     <mx:SolidColor id="source" color="0X00b5fc"/>
    <mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
    <mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/>
    <mx:Fade id="fadeOut" alphaFrom="0" alphaTo="1" duration="1000"/>
<!-- Define Pie Chart -->
          <mx:PieChart
                    id="alexaRankChart"
                    dataProvider="{_dataProvider}"
                    width="377" height="258"
                    showDataTips="false"
                    x="10" y="80">
                     <mx:series>
                        <mx:PieSeries
                             field=""
                             nameField=""
                             labelPosition=""
                             dataFunction="onTotalByReach"
                             />
                    </mx:series>
          </mx:PieChart>
          <mx:Legend
               dataProvider="{alexaRankChart}"
               showEffect="{fadeIn}"
               labelPlacement="right"
               direction="vertical" 
               x="421" height="197"
               y="80" width="133"
               backgroundColor="#FFFFFF"
               borderStyle="solid"
               borderColor="#D3ECF1"
               cornerRadius="5"
               paddingTop="15"
               paddingLeft="10"/>
<!-- Define Container Elements -->     
          <mx:Label
               x="10" y="10"
               text="Breakdown by site traffic."
               fontWeight="bold"
               fontSize="18"
               color="#000000"
               fontFamily="Verdana"/>
          <mx:TextArea
               x="10" y="36"
               borderStyle="none"
               backgroundAlpha="0.0"
               width="365"
               fontSize="12"
               height="75">
               <mx:text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu. Met, consectetur adipiscing elit.</mx:text>
          </mx:TextArea>
          <mx:TextArea
               x="3" y="344"
               borderColor="#D3ECF1"
               cornerRadius="5"
               text="* Traffic breakdown based on Alexa rankings system. &#xd;"
               fontStyle="italic"
               width="414"
               editable="false"
               height="20"
               paddingTop="0"
               paddingLeft="10"
               backgroundAlpha="0.0"
               fontSize="9"
               borderThickness="1"
               borderStyle="none"/>
</mx:Canvas>

Answer 1

You need to pre-process your data before you feed it to the chart:
var reachBreakdown:Object = {};
for each (var o:Object in myData) {
    reachBreakdown[o.reach] = (reachBreakdown[o.reach] || 0) + 1;
var reachData:Array = [];
for each (var reachCategory:String in reachBreakdown) {
    reachData.push({ category: reachCategory, count: reachBreakdown[reachCategory] });
Set the pie's dataProvider to 'reachData', its field to 'count' and its nameField to 'category'.