5 Replies Latest reply on Aug 28, 2009 7:23 AM by Andrew Rosewarn

    How to dynamically generate data to be consumed by a LineGraph?

    Augusto Esteves

      Hello,

       

      I'm trying to build a LineGraph with data I have on an ArrayCollection called pebw. I noticed that the ArrayCollections used as dataProviders for a LineGraph usually go as follows (for example):

       

      private var expensesAC:ArrayCollection = new ArrayCollection( [

                  { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },

                  { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },

                  { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },

                  { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },

                  { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);

       

      which provides data and labels. How can I turn my pewb, which has data such as Week (which would be the horizontal axis), TotalEnergySpent, and Devices (which would have a line in the graph for each device), into an array like expensesAC?

        • 1. Re: How to dynamically generate data to be consumed by a LineGraph?
          Andrew Rosewarn Level 3

          You want to generate a chart from this data as below?

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
             
              <mx:Script>
                  <![CDATA[

           

                  import mx.collections.ArrayCollection;

           

                  [Bindable]
                  private var pebw:ArrayCollection = new ArrayCollection( [
                      { Week: "Jan", TotalEnergy: 2000, Devices: 1500},
                      { Week: "Feb", TotalEnergy: 1000, Devices: 200},
                      { Week: "Mar", TotalEnergy: 1500, Devices: 500},
                      { Week: "Apr", TotalEnergy: 1800, Devices: 1200},
                      { Week: "May", TotalEnergy: 2400, Devices: 575}
                  ]);
                  ]]>
              </mx:Script>
              <mx:LineChart id="linechart" color="0x323232" height="346"
                 showDataTips="true" dataProvider="{pebw}" x="76" y="38" width="553">
                    
                 <mx:horizontalAxis>
                     <mx:CategoryAxis categoryField="Week"/>
                 </mx:horizontalAxis>
                
                 <mx:series>
                     <mx:LineSeries yField="TotalEnergy" displayName="TotalEnergy"/>
                     <mx:LineSeries yField="Devices" displayName="Devices"/>
                </mx:series>
              </mx:LineChart>
          </mx:Application>

           

          to dynamically add data to the chart just add it to the arrayCollection as its bound to the chart.  To add more series, you add a LineSeries to the series collection and make sure there is relevant data to that in the arrayCollection.

           

          Does this help?

           

          Andrew

          1 person found this helpful
          • 2. Re: How to dynamically generate data to be consumed by a LineGraph?
            Augusto Esteves Level 1

            Hi Andrew, thanks for the quick reply

             

            What I really need to know is how to turn my pebw ArrayCollection into the format:

             

            Week: "Jan", TotalEnergy: 2000, Devices: 1500

             

            since it's now "Jan", 2000, 1500 for instance. Is there any way to achieve this?

            • 3. Re: How to dynamically generate data to be consumed by a LineGraph?
              Andrew Rosewarn Level 3

              Ok right

               

              You need to loop through this data wherever its come from and then add it to the arrayCollection as objects so;

               

              In a loop you would say;

               

              [Bindable]

              var pewb:ArrayCollection = new ArrayCollection()

               

              for (var i:int = 0; i<dataSource.length; i ++ {

                 

                   // Each time you loop through a new object is created and added to the arraycollection

                    var obj:Object = new Object()

                   obj.Week = 'Jan';  // swap these values for you data source values.

                   obj.TotalEnergy = 2000;

                   obj.Devices = 100;

               

                   pewb.addItem(obj);

              }

               

              The arraycollection would then be a collection of objetcts that the lineChart can then identify the fields you want to use.

               

              ok or no?

              • 4. Re: How to dynamically generate data to be consumed by a LineGraph?
                Augusto Esteves Level 1

                I'll try it, but I think it's it Thank you so much Andrew.

                 

                Imagine I have 2 devices and I wanna show one line in the graph for each. How can I do it? (Week in the horizontal axis, and TotalEnergySpent the values of the graph)

                • 5. Re: How to dynamically generate data to be consumed by a LineGraph?
                  Andrew Rosewarn Level 3

                  You just add the 2nd device to  your arrayCollection and encure that you have a LineSeries for it in the series collection of the chart

                   

                  MXML Sample

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                     
                      <mx:Script>
                          <![CDATA[

                   

                          import mx.collections.ArrayCollection;

                   

                          [Bindable]
                          private var pebw:ArrayCollection = new ArrayCollection( [
                              { Week: "Jan", TotalEnergy: 2000, Devices: 1500, Device2: 2500},
                              { Week: "Feb", TotalEnergy: 1000, Devices: 200, Device2: 3500},
                              { Week: "Mar", TotalEnergy: 1500, Devices: 500, Device2: 2500},
                              { Week: "Apr", TotalEnergy: 1800, Devices: 1200, Device2: 3500},
                              { Week: "May", TotalEnergy: 2400, Devices: 575, Device2: 2500}
                          ]);
                          ]]>
                      </mx:Script>
                      <mx:LineChart id="linechart" color="0x323232" height="346"
                         showDataTips="true" dataProvider="{pebw}" x="76" y="38" width="553">
                            
                         <mx:horizontalAxis>
                             <mx:CategoryAxis categoryField="Week"/>
                         </mx:horizontalAxis>
                        
                         <mx:series>
                             <mx:LineSeries yField="TotalEnergy" form="curve" displayName="TotalEnergy"/>
                             <mx:LineSeries yField="Devices" form="curve" displayName="Devices"/>
                              <mx:LineSeries yField="Device2" form="curve" displayName="Device 2"/>
                        </mx:series>
                      </mx:LineChart>
                  </mx:Application>

                   

                  And when dynamix, just make sure you add devide2 to your object.

                   

                  var obj:Object = new Object();

                  obj.week = 'Mon';

                  obj.device1 = 100;

                  obj.device2 = 300;

                   

                  :-)

                  1 person found this helpful