14 Replies Latest reply on Sep 6, 2009 11:54 PM by Andrew Rosewarn

    LineGraph with flexible data

    Augusto Esteves Level 1

      Hello

       

       

      I’m trying to build a LineGraph but I don’t have static data. I want to have the energy spent by various devices in the 4 weeks of the month. I have an ArrayCollection, we can call it devices, with devices and the weekly energy spent for each one, according to a specific user.

       

       

      I want a LineGraph with the Weeks in the horizontal Axis (this is static, since every month has roughly 4 weeks), and a line for each device.

       

      What I want is to generate something like:

       

       

      private var energySpent:ArrayCollection  = new ArrayCollection( [

                      { Week: “Week 1”, Device1: 500, Device2: 100 },

                      { Week: “Week 2”, Device1: 1500, Device2: 300 },

                      { Week: “Week 3”, Device1: 0, Device2: 200 },

                      { Week: “Week 4”, Device1: 500, Device2: 0 } ]);

       

       

      The problem is I don’t know how many devices I have each week without analyzing my devices ArrayCollection.

       

       

      How can I create a iteration that goes adding devices (Device 1, Device 2, etc.) after “Week 1” until I reach the end of the devices ArrayCollection? (and then goes adding the same devices for Week 2, 3, and 4)

        • 1. Re: LineGraph with flexible data
          inghamc

          Have you already created and added LineSeries objects with the .xField = 'Week' and .yField = 'Device1' to your LineChart's .series Array?

           

          Then you just need to declare your ArrayCollection as [Bindable] in your .mxml and assigned your LineChart's dataProvider="{devices}"?

           

          Pardon me if you're already beyond this...

          • 2. Re: LineGraph with flexible data
            Augusto Esteves Level 1

            Hi inghamc :) thanks for the reply.

             

            The problem is that I don't know exactly how many devices there are on the devices ArrayCollection. In my example I had 2 devices for each week. Imagine I had 3, or 4?


            I know that I can add stuff like:


            for (var i:Number = 0; i< 4; i++ {


                 var obj:Object = new Object()

                 obj.Week = "Week " + i;

                 obj.Device = devices.getItemAt(i).energy;

                 energySpent.addItem(obj);

            }


            But this way, I only get one device per week. Isn't something like obj.Device{i} = devices.getItemAt(i).energy ? So I could iterate over every device in a Week?



            • 3. Re: LineGraph with flexible data
              Andrew Rosewarn Level 3

              Hi there

               

              I think this is what your trying to achieve.  It adds a loop to run through your objects in your arrayCollection and add a new lineSeries to the array.  Therefore your servies will increase as you add more to the collection.

               

              Does this help, I think its what your trying to do?

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler()">
                  <mx:Script>
                      <![CDATA[
                          import mx.charts.series.LineSeries;
                          import mx.collections.ArrayCollection;
                         
                          [Bindable]
                          private var ac:ArrayCollection = new ArrayCollection([
                              { Week: 'Week 1', Device1: 500, Device2: 100, Device3: 400 },
                              { Week: 'Week 2', Device1: 1500, Device2: 300, Device3: 400 },
                              { Week: 'Week 3', Device1: 0, Device2: 200, Device3: 400 },
                              { Week: 'Week 4', Device1: 500, Device2: 0, Device3: 400 }
                          ]);
                         
                          private function creationCompleteHandler():void {
                              var seriesArray:Array = new Array();
                              for each (var obj:Object in ac) {
                                   for (var sRole:String in obj) {
                                         var ls:LineSeries = new LineSeries();
                                         ls.displayName = sRole;
                                         ls.yField = sRole;
                                         seriesArray.push(ls);
                                     }
                              }
                              chart.series = seriesArray;   
                          }
                      ]]>
                  </mx:Script>
                 
                  <mx:LineChart x="208" y="215" id="chart" dataProvider="{ac}">
                      <mx:horizontalAxis>
                          <mx:CategoryAxis categoryField="Week"/>
                      </mx:horizontalAxis>
                  </mx:LineChart>
                 
              </mx:Application>

              1 person found this helpful
              • 4. Re: LineGraph with flexible data
                Augusto Esteves Level 1

                Hello Andrew Thanks for your answer.

                 

                What I get from your example is that you try to generate the LineSeries from the objects in the ac ArrayCollection. My problem is getting the ac ArrayCollection. I want to able to built it from a device array. I don't know how many devices I'll have, it can be 3 or 4, 5 o 6.

                • 5. Re: LineGraph with flexible data
                  Andrew Rosewarn Level 3

                  Can you give a quick sample of this array.  Is it just a long list of devises with week device spend etc?

                   

                  Thanks

                   


                  Andrew

                  • 6. Re: LineGraph with flexible data
                    Augusto Esteves Level 1

                    public class PastEventsByWeek

                    {

                         public var deviceID:Number;

                         public var week:Number;

                         public var userID:Number;

                         public var sectionID:Number;

                         public var installationID:Number;

                         public var month:Number;

                         public var year:Number;

                         public var totalEnergyWeek:Number;

                         public var totalMoneyWeek:Number;

                         public var timesTurnedOnWeek:Number;

                     

                         ...

                     

                     

                    My devices ArrayCollection has a number of objects like this. I just want to create an ArrayCollection for the LineGraph with the totalEnergyWeek for every device in each week.

                    • 7. Re: LineGraph with flexible data
                      Augusto Esteves Level 1

                      In this example:

                       

                      var ls:LineSeries = new LineSeries();
                      ls.displayName = sRole;
                      ls.yField = sRole;


                      seriesArray.push(ls);

                       

                      chart.series = seriesArray;

                       

                      How can I set the series form to curve?

                      • 8. Re: LineGraph with flexible data
                        Andrew Rosewarn Level 3

                        Hi there

                         

                        ls.setStyle('form','curve');

                         

                        That should do it

                         

                        Andrew

                        1 person found this helpful
                        • 9. Re: LineGraph with flexible data
                          Augusto Esteves Level 1

                          Hey Andrew Thanks for the answer once again.

                           

                          Can I use the setStyle to set other properties like:

                           

                          line.setStyle('showDataEffect','zoomIn');

                           

                          line.setStyle('hideDataEffect', 'zoomOut');

                           

                          line.setStyle('lineStroke', '{s2}');

                           

                          ?

                          • 10. Re: LineGraph with flexible data
                            Andrew Rosewarn Level 3

                            Yea

                             

                            Instansiate the dataEffect first like below

                             

                            var interpol:SeriesInterpolate = new SeriesInterpolate()

                            interpol.duration = 100;

                            ls.setStyle('showDataEffect',interpol);

                             

                            Andrew

                            • 11. Re: LineGraph with flexible data
                              Augusto Esteves Level 1

                              Hey Andrew, thanks for all your help

                               

                              I tried what you mentioned but when I try to assing a color it gives me and error:

                               

                              var areaColor:SolidColor = new SolidColor();

                              areaColor.color = "blue";

                               

                              or

                               

                              areaColor.color = #550e;

                               

                              Also, doing:

                               

                              var areaColor:SolidColor = new SolidColor();

                              areaColor.alpha = 0.3;

                              line.setStyle('areaFill', 'areaColor');

                               

                              doesn't change the alpha of the colored area :/

                               

                              Last, but not least, I'm also having an error (at runtime) when I do this:

                               

                              var stroke:Stroke = new Stroke();

                              stroke.weight = 2;

                              line.setStyle('lineStroke', 'stroke');

                              • 12. Re: LineGraph with flexible data
                                Andrew Rosewarn Level 3

                                OK first one I am able to set the stroke fine like this

                                 

                                var stroke:Stroke = new Stroke();
                                stroke.color = 0x000000;
                                stroke.alpha = 0.5;
                                ls.setStyle('lineStroke',stroke);

                                 

                                Full Code

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationCompleteHandler()">
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.graphics.Stroke;
                                            import mx.charts.series.LineSeries;
                                            import mx.collections.ArrayCollection;
                                          
                                            [Bindable]
                                            private var ac:ArrayCollection = new ArrayCollection([
                                                { Week: 'Week 1', Device1: 500, Device2: 100, Device3: 400 },
                                                { Week: 'Week 2', Device1: 1500, Device2: 300, Device3: 400 },
                                                { Week: 'Week 3', Device1: 0, Device2: 200, Device3: 400 },
                                                { Week: 'Week 4', Device1: 500, Device2: 0, Device3: 400 }
                                            ]);
                                          
                                            private function creationCompleteHandler():void {
                                                var seriesArray:Array = new Array();
                                                for each (var obj:Object in ac) {
                                                     for (var sRole:String in obj) {
                                                           var ls:LineSeries = new LineSeries();
                                                           ls.displayName = sRole;
                                                           ls.yField = sRole;
                                                          
                                                           var stroke:Stroke = new Stroke();
                                                           stroke.color = 0x000000;
                                                           stroke.alpha = 0.5;
                                                           ls.setStyle('lineStroke',stroke);
                                                          
                                                           seriesArray.push(ls);
                                                       }
                                                }
                                                chart.series = seriesArray;  
                                            }
                                        ]]>
                                    </mx:Script>
                                  
                                    <mx:LineChart x="208" y="215" id="chart" dataProvider="{ac}">
                                        <mx:horizontalAxis>
                                            <mx:CategoryAxis categoryField="Week"/>
                                        </mx:horizontalAxis>
                                      
                                    </mx:LineChart>
                                  
                                </mx:Application>

                                 

                                 

                                Andrew

                                • 13. Re: LineGraph with flexible data
                                  Augusto Esteves Level 1

                                  One property I'm having problem assigning to:


                                  var line:LineSeries = new LineSeries();


                                  is the click property.


                                  How can I achieve this?

                                  • 14. Re: LineGraph with flexible data
                                    Andrew Rosewarn Level 3

                                    Hi Augusto

                                     

                                    The click event needs to be added to the chart itself not the line series.

                                     

                                    Then you can listen to the chartEvent and extract the data about the clicked item from there.

                                     

                                    Andrew