8 Replies Latest reply on Dec 1, 2010 9:07 AM by JoGlez

    NEED HELP ASAP - Parsing ArrayCollection

    JoGlez

      Hi All,

          My web service returns an array collection as follows with the following columns: Name, ID, Power, Hour. 

      An example of the populated collection would be:  Name               Power          Hour

                                                                               Texas                 5                    6

                                                                               New York           6.4                  6

                                                                               California            2.1                  6    

                                                                               Texas                 5.1                 7

                                                                               New York            6.5                  7

                                                                               California             2.6                  7

      I would like my column chart to have a different series for each different name so that they would be Side-by-Side(x axis = hour, y axis = power)Now my problem is that I cannot bind the original array collection to a chart as I would like.  So I would need to change the array to something like this:(I think)

                   Hour     Texas     NewYork       California

                     6          5          6.4                    2.1

                     7          5.1       6.5                   2.6

      any help is greatly appreciated!!!! Code ... even more!! Thanks guys!!

        • 1. Re: NEED HELP ASAP - Parsing ArrayCollection
          JoshBeall Level 1

          If I understand correctly what you're trying to do (and I'm not positive), you will need to manually create a new collection.  Sounds like you want to do this:

           

          1) Search the initial collection and determine the unique values for the "hour" property

          2) Create a new collection, with one entry per unique "hour" value, and the corresponding values for each of your cities (each in their own property)

          • 2. Re: NEED HELP ASAP - Parsing ArrayCollection
            Devtron Level 3

            Why cant you change the web service to provide the data in the format that you need??

            • 3. Re: NEED HELP ASAP - Parsing ArrayCollection
              JoGlez Level 1

              In reply---  I do not know how many states I would have once I execute my query so I cannot declare a static amount of public variables in my web service.  If I declare x amount of public variables and obtain x+1 amount of states...won't work and If I declare too many variables and only obtain 1 state... not good either...  Keep your opinions coming guys!! Thanks!!!

               

              In case some one doesn't understand, I wish to have different series in a column chart (one for each state), so that they may be compared hour-by-hour.  My web services provides the first example above.. What would i need to do to make this possible... If i were to use the array collection as is, the chart would not group them by hour...

              • 4. Re: NEED HELP ASAP - Parsing ArrayCollection
                JoGlez Level 1

                Still need help my fellow forumers

                <--bump
                • 5. Re: NEED HELP ASAP - Parsing ArrayCollection
                  drkstr_1 Level 4

                  What's wrong with the format you have now?

                   

                  http://examples.adobe.com/flex3/componentexplorer/explorer.html

                   

                  Check out the ColumChart example there. The example data is grouped by country.

                   

                   

                  What it sounds like you need is to create your chart series dynamically based on the unique state names. One way to do this is by using a hash table.

                   

                  //you may need these references later... or maybe not.
                  private var _seriesTable:Object = {};
                  
                  private function buildSeries(dp:ArrayCollection):void
                  {
                       for each(var item:Object in dp)
                       {    
                            if(!_seriesTable.hasOwnProperty(item.state))
                            {
                                 var series:BarSeries = new BarSeries();
                                 //create your series, add to the chart, blah, blah, blah
                                 //...
                  
                                 _seriesTable[item.state] = series;
                            }
                       }
                  }
                  

                   

                  This would ensure that you have one series for every unique state name in the ArrayCollection.

                  1 person found this helpful
                  • 6. Re: NEED HELP ASAP - Parsing ArrayCollection
                    JoGlez Level 1

                    You understand perfectly!!! That is what I want to do, but appearantly I'm still doing something wrong... I will show you my code and what I am being returned in my chart... It's still no quite right... so the array I'm sending in is:

                     

                      SiteName         Time          TotalPower

                      New Jersey         18               158.84

                      New Jersey          19              394.40

                    California              19               85.54

                     

                    and the function you gave me was modified as follows;

                    private function buildSeries(dp:ArrayCollection):void
                                {
                                    var hAxis:CategoryAxis = new CategoryAxis();
                                    hAxis.categoryField = "Time" ;
                                    hAxis.dataProvider =  dp;
                                    myChart.horizontalAxis = hAxis;
                                   
                                    mySeries=new Array();
                                    for each(var item:Object in dp)
                                    {   
                                        if(!_seriesTable.hasOwnProperty(item.SiteName))
                                        {
                                            var series:ColumnSeries = new ColumnSeries();
                                                       
                                            series = new ColumnSeries();
                                            series.yField="TotalPower";
                                            series.xField="Time";
                                            series.displayName = "";
                                            series.dataProvider=dp;
                                            mySeries.push(series);
                                   
                                            _seriesTable[item.SiteName] = series;
                                        }
                                    }
                                    myChart.series=mySeries;
                                }

                     

                     

                    what is being displayed--> two columns (Parallel) with the same data from New Jersey 158.84 for TIME 18

                                        to the right-->   two more columns (stacked) with the correct data for Time 19 (but they are stacked)

                     

                     

                     

                    what i want?? 1 column for 18  and two columns for 19 (parallel)

                     

                    I don't want the data to repeat itself..

                    • 7. Re: NEED HELP ASAP - Parsing ArrayCollection
                      drkstr_1 Level 4

                      Yeah, that's my bad.

                       

                      After looking a little closer at the example, it looks like you would actually need a series for each Time value, not each SiteName. You would also need to compound the data into objects with a property name for each time value. Unfortunatly, each category axis would be uniformly sized so a SiteName with only 2 values would be the same size as one with 10 different values. I did however make this little example which uses stacked columns to kind of show you how the series are set up. If that doesn't work for you, you will need to google around to see how you can make a CategoryAxis with dynamic widths.

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
                                        xmlns:s="library://ns.adobe.com/flex/spark" height="100%" width="100%"
                                        creationComplete="creationCompleteHandler(event)" >
                      
                           <fx:Script>
                                <![CDATA[
                                     import mx.charts.chartClasses.Series;
                                     import mx.charts.series.ColumnSeries;
                                     import mx.charts.series.ColumnSet;
                                     import mx.collections.ArrayCollection;
                                     import mx.events.FlexEvent;
                                     import mx.utils.ObjectUtil;
                                     
                                     private var _rawData:Array = [
                                          {SiteName:"New Jersey", Time:18, TotalPower:158.84},
                                          {SiteName:"New Jersey", Time:19, TotalPower:394.40},
                                          {SiteName:"California", Time:19, TotalPower:85.54},
                                          {SiteName:"Washington", Time:18, TotalPower:56.32},
                                          {SiteName:"Washington", Time:19, TotalPower:68.47},
                                          {SiteName:"Washington", Time:20, TotalPower:75.85},
                                          {SiteName:"Washington", Time:21, TotalPower:102.98}
                                     ];
                                     
                                     [Bindable]
                                     public var dataProvider:ArrayCollection;
                                     
                                     protected function creationCompleteHandler(event:FlexEvent):void
                                     {
                                          var siteTable:Object = {};
                                          var timeTable:Object = {};
                                          var siteDataList:Array = [];
                                          var timeSeriesList:Array = [];
                                          var columnSet:ColumnSet = new ColumnSet();
                                          
                                          columnSet.type = "stacked";
                                          
                                          for each(var rawItem:Object in _rawData)
                                          {
                                               var siteName:String = rawItem.SiteName;
                                               var time:String = rawItem.Time.toString();
                                               var totalPower:Number = rawItem.TotalPower;
                                               var dataItem:Object;
                                               
                                               //if we already have an object for this site, 
                                               //then retrieve. Otherwise create one.
                                               if( siteTable.hasOwnProperty(siteName) )
                                               {
                                                    dataItem = siteTable[siteName];
                                               }
                                               else
                                               {
                                                    dataItem = {SiteName:siteName};
                                                    siteTable[siteName] = dataItem;
                                                    siteDataList.push(dataItem);
                                               }
                                               
                                               //now add a value pair for the time and power
                                               dataItem[time] = totalPower;
                                               
                                               //we need to create a series for every unique time you have
                                               if( !timeTable.hasOwnProperty(time) )
                                               {
                                                    timeTable[time] = 1;
                                                    
                                                    var timeSeries:ColumnSeries = new ColumnSeries();
                                                    timeSeries.yField = time;
                                                    columnSet.series.push(timeSeries);
                                               }
                                          }
                                          
                                          trace(ObjectUtil.toString(siteDataList));
                                          
                                          //invalidate the chart series to force a redraw
                                          var chartSeries:Array = this.stackedChart.series;   
                                          chartSeries.push(columnSet);  
                                          this.stackedChart.series = chartSeries;   
                                          this.stackedChart.invalidateSeriesStyles();   
                                          
                                          this.dataProvider = new ArrayCollection(siteDataList);
                                     }
                      
                                ]]>
                           </fx:Script>
                      
                           <fx:Declarations>
                      
                           </fx:Declarations>
                      
                           <mx:Panel height="100%" layout="horizontal" width="100%" title="Stacked Chart Example">
                      
                                <mx:ColumnChart id="stackedChart" dataProvider="{dataProvider}" height="100%"  width="100%" paddingLeft="5"
                                                    paddingRight="5" showDataTips="true">
                                     
                                     <mx:horizontalAxis>
                                          <mx:CategoryAxis categoryField="SiteName" />
                                     </mx:horizontalAxis>
                                     
                                </mx:ColumnChart>
                      
                           </mx:Panel>
                      
                      </s:Application>
                      

                      • 8. Re: NEED HELP ASAP - Parsing ArrayCollection
                        JoGlez Level 1

                        Thanks A Lot!!!! You were Extremely HELPFUL!!!!