7 Replies Latest reply on Jun 3, 2010 5:56 AM by BhaskerChari

    Hierarchical Arraycollection

    Yoni_Hillel_Barak

      Hi everybody. I have the following arraycollection structure:

       

              public var dpac:ArrayCollection = new ArrayCollection ([
                  { date:"01/01/2006", cash;50000, 
                    stocks:198192, retirement:130101, 
                    home:750000, other:19148 },
                  { date:"02/01/2006", cash:50000, 
                    stocks:210309, retirement:143707, 
                    home:760000, other:19493 },
                  { date:"04/01/2006", cash:50000, 
                    stocks:292269, retirement:242596, 
                    home:770000, other:21445 }]);
      

       

      As you can see, values are Hard-Coded. I want to assign the values of "date", "cash" and all the others during the run of the program. How can I create an arraycollection with this structure that will be dynamic and not hard coded?

       

      Sorry if this is very basic stuff, I'm new to flex.

        • 1. Re: Hierarchical Arraycollection
          BhaskerChari Level 4

          Hi,

           

          Try to use the application code below:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="loadData();" layout="absolute">
          <mx:Script>
            <![CDATA[
             import mx.collections.ArrayCollection;
             import mx.rpc.xml.SimpleXMLDecoder;
            
             private var loader:URLLoader = new URLLoader();
             public var dpac:ArrayCollection = new ArrayCollection();
            
             private function loadData():void
             {   
              var request:URLRequest = new URLRequest();
              request.url = "data.xml";
              loader.load(request);
              loader.addEventListener(Event.COMPLETE,dataLoadComp);
             }
            
             private function dataLoadComp(event:Event):void
             {
              var xml:XML = new XML(loader.data);
              var xmlDoc:XMLDocument = new XMLDocument(xml);
              var decoder:SimpleXMLDecoder = new SimpleXMLDecoder(true);
              var obj:Object = decoder.decodeXML(xmlDoc);
              dpac = obj.root.item as ArrayCollection;   
             }
            ]]>
          </mx:Script>
          </mx:Application>

           

           

          Below are your data.xml contents:::

           

          <root>

          <item>

          <date>01/01/2006</date>

          <cash>50000</cash>

          <stocks>198192</stocks>

          <retirement>130101</retirement>

          <home>750000</home>

          <other>19148</other>

          </item>

          <item>

          <date>02/01/2006</date>

          <cash>50000</cash>

          <stocks>210309</stocks>

          <retirement>143707</retirement>

          <home>760000</home>

          <other>19493</other>

          </item>

          <item>

          <date>04/01/2006</date>

          <cash>50000</cash>

          <stocks>292269</stocks>

          <retirement>242596</retirement>

          <home>770000</home>

          <other>21445</other>

          </item>

          </root>

           

           

          If you are using any backend as source for data then process the request on serverside and return the result in xml format to flex and use in the same fashion as above.

           

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          1 person found this helpful
          • 2. Re: Hierarchical Arraycollection
            Yoni_Hillel_Barak Level 1

            I don't want to get the data from external xml. I have an ABAP program that can communicate with a compiled SWF file through a unique interface.I've used it up until now to create charts. What I did was this: I created an arraycollection and 3 or 4 variables of type string, I used the arraycollection as the datasource for the chart and the variables as the Yfield and Xfield of each series.

             

            It looked like this:

             

            private var ds;arraycollection

            private var sales;string

            private var forecst;string

            private var date;string

             

            and then:

             

            <mx:columnchart dataprovider="ds"

             

            <mx:lineseries dataprovider="ds" xField="date" yField="sales"

            <mx:lineseries dataprovider="ds" xField="date" yField="forecast"

             

            very simple stuff as you can see.

             

            then, during the run of the abap program, I have an interface in which I can "talk" to the flex swf in the following way:

             

            "date = 12.03.09", sales = 1, forecast = 2"

            "date = 13.03.09", sales = 2, forecast =3"

            "date = 14.03.09", sales = 3, forecast = 4"

             

            And then i get a chart that displays 3 weeks (12-14.03.09) and their respected sales and forecasts.

             

            My question is: is there a way to create a structure that is variable-based, like the one I showed here, with an structure like the one in my original post?

            • 3. Re: Hierarchical Arraycollection
              BhaskerChari Level 4

              How do you get the following values into flex.

               

              "date = 12.03.09", sales = 1, forecast = 2"

              "date = 13.03.09", sales = 2, forecast =3"

              "date = 14.03.09", sales = 3, forecast = 4"

               

              Do u get the above values in strings ...can you please post the function or code in your flex app where you capture these values in Flex.

               

               

              Thanks,

              Bhasker Chari

              • 4. Re: Hierarchical Arraycollection
                Yoni_Hillel_Barak Level 1

                Here is the code of my flex program:

                 

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                 

                    <mx:Script>

                        <![CDATA[

                            import mx.events.EffectEvent;

                            import mx.charts.ChartItem;

                            import mx.charts.HitData;

                            import mx.charts.chartClasses.IAxis;

                            import mx.charts.chartClasses.Series;

                            import mx.charts.series.ColumnSet;

                            import mx.charts.series.items.ColumnSeriesItem;

                            import mx.utils.StringUtil;

                            import sap.FlashIsland;

                            import mx.collections.ArrayCollection;   

                 

                            [Bindable]

                            public var dataSource:ArrayCollection;

                            [Bindable]

                            public var WeekLbl:String;

                            [Bindable]

                            public var Store_Stock:String;

                            [Bindable]

                            public var Promotion:String;

                 

                public function initApp():void

                            {

                                  FlashIsland.register(this);

                            }

                 

                            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {

                                return numberFormatter.format(item);

                            }

                 

                 

                        ]]>

                    </mx:Script>

                      

                     

                   <mx:NumberFormatter id="numberFormatter" precision="0" />

                 

                 

                    <mx:ColumnChart id="columnChart"

                            dataProvider="{dataSource}"

                            width="100%"

                            height="100%">

                 

                        <mx:horizontalAxis>

                            <mx:CategoryAxis id="ca" categoryField="{WeekLbl}" />

                        </mx:horizontalAxis>

                 

                        <mx:verticalAxis>

                            <mx:LinearAxis labelFunction="linearAxis_labelFunc" />

                        </mx:verticalAxis>

                 

                        <mx:horizontalAxisRenderers>

                            <mx:AxisRenderer axis="{ca}" />

                        </mx:horizontalAxisRenderers>

                 

                        <mx:series>

                            <mx:LineSeries

                                      dataProvider="{dataSource}"

                                      showDataEffect="slideIn"

                                    xField="{WeekLbl}"

                                    yField="{Store_Stock}"

                                    displayName="Store Stock"

                                    form="curve"

                                    lineStroke="{s1}">

                                 

                            </mx:LineSeries>

                                       

                            <mx:LinenSeries

                                      dataProvider="{dataSource}"

                                      showDataEffect="slideIn3"

                                    xField="{WeekLbl}"

                                    yField="{Promotion}"

                                    displayName="Promotion" >

                                 

                            </mx:LinenSeries

                                   

                        </mx:series>

                 

                        <mx:seriesFilters>

                            <mx:Array />

                        </mx:seriesFilters>

                 

                    </mx:ColumnChart>

                   

                            <mx:Legend dataProvider="{columnChart}" direction="horizontal"/>

                 

                </mx:Application>

                 

                 

                In this program, I have 3 variables I assign values to during the run of the abap program: Store_Stock, Promotion and WeelLbl. All of the belong to the same "father", dataSource of type arraycollection.

                • 5. Re: Hierarchical Arraycollection
                  BhaskerChari Level 4

                  Hi,

                  Where your dataSource ArrayCollection gets populated in your Flex application...I want the block of code where this dataSource ArrayCollection is set.

                   

                  Thanks,

                  Bhasker Chari

                  • 6. Re: Hierarchical Arraycollection
                    Yoni_Hillel_Barak Level 1

                    The datasource gets populated during the run of the Abap program. The Abap program gets the and sends it to the Flex App.

                    • 7. Re: Hierarchical Arraycollection
                      BhaskerChari Level 4

                      Hi,

                       

                      Ofcourse the date gets populated during the run of the Abap program but how do you identify or capture the event that the data is loaded into flex application.

                       

                      Thanks,

                      Bhasker