1 Reply Latest reply on Jan 25, 2010 8:40 AM by msakrejda

    Using complex objects in PieChart

    rcanulla Level 1

      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>
      
      
        • 1. Re: Using complex objects in PieChart
          msakrejda Level 4

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