2 Replies Latest reply on Dec 7, 2011 7:19 AM by DushyantG

    Creating a multi series line chart with different data providers

    DushyantG

      I have 3 data providers of the same structure i.e ArrayCollection of DataElement and want to use them to create a multiseries line chart. I do not have just 1 dataProvider that can be used but 3 different data providers of the same structure that i want to use each for different series.

       

      [Bindable] private var orangeSales : ArrayCollection =

                      new ArrayCollection(

                          [ { sales: 101000, month: new Date( '01/01/2008' ) },

                              { sales: 960000, month: new Date( '02/01/2008' ) },

                              { sales: 475000, month: new Date( '03/01/2008' ) },

                              { sales: 425000, month: new Date( '04/01/2008' ) }

                          ] );

       

                 

                  [Bindable] private var appleSales : ArrayCollection =

                      new ArrayCollection(

                          [ { sales: 991000, month: new Date( '01/01/2008' ) },

                              { sales: 140000, month: new Date( '02/01/2008' ) },

                              { sales: 565000, month: new Date( '03/01/2008' ) },

                              { sales: 255000, month: new Date( '04/01/2008' ) }

                          ] );

                 

                  [Bindable] private var bananaSales : ArrayCollection =

                      new ArrayCollection(

                          [ { sales: 891000, month: new Date( '01/01/2008' ) },

                              { sales: 147560, month: new Date( '02/01/2008' ) },

                              { sales: 295000, month: new Date( '03/01/2008' ) },

                              { sales: 574000, month: new Date( '04/01/2008' ) }

                          ] );

       

      I want to create a line chart with orangeSales, appleSales and bananaSales as three different lines on the chart for different dates specified.

       

       

      <mx:ColumnChart showDataTips="true" >

              <mx:horizontalAxis>

                  <mx:CategoryAxis

                      dataProvider="{orangeSales}"

                      categoryField="month"

                      />

              </mx:horizontalAxis>

       

              <mx:series>

                  <mx:LineSeries displayName="OrangeSales" yField="sales" xField="month" dataProvider="{orangeSales}"/>

                  <mx:LineSeries displayName="AppleSales" yField="sales" xField="month" dataProvider="{appleSales}"/>

                  <mx:LineSeries displayName="BananaSales" yField="sales" xField="month" dataProvider="{bananaSales}"/>

              </mx:series>

       

      </mx:ColumnChart>

       

       

      Please help!

        • 1. Re: Creating a multi series line chart with different data providers
          DushyantG Level 1

          I am using mx:Line Chart and not ColumnChart

           

          Sorry the mxml code that i'm using to build the Line chart is :

           

          <mx:LineChart showDataTips="true" >

                  <mx:horizontalAxis>

                      <mx:CategoryAxis

                          dataProvider="{orangeSales}"

                          categoryField="month"

                          />

                  </mx:horizontalAxis>

           

                  <mx:series>

                      <mx:LineSeries displayName="OrangeSales" yField="sales" xField="month" dataProvider="{orangeSales}"/>

                      <mx:LineSeries displayName="AppleSales" yField="sales" xField="month" dataProvider="{appleSales}"/>

                      <mx:LineSeries displayName="BananaSales" yField="sales" xField="month" dataProvider="{bananaSales}"/>

                  </mx:series>

           

          </mx:LineChart>

          • 2. Re: Creating a multi series line chart with different data providers
            DushyantG Level 1

            Sorry for the confusion. Actually I must be doing some thing wrong like using ColumnChart to display a line chart or something like that.

            I have now realized that a multi series line chart can be built by having a different data provider for each of the LineSeries object.

            So the code below would create a multi series line graph :

             

            [Bindable] private var orangeSales : ArrayCollection =

                            new ArrayCollection(

                                [ { sales: 101000, month: new Date( '01/01/2008' ) },

                                    { sales: 960000, month: new Date( '02/01/2008' ) },

                                    { sales: 475000, month: new Date( '03/01/2008' ) },

                                    { sales: 425000, month: new Date( '04/01/2008' ) }

                                ] );

             

                       

                        [Bindable] private var appleSales : ArrayCollection =

                            new ArrayCollection(

                                [ { sales: 991000, month: new Date( '01/01/2008' ) },

                                    { sales: 140000, month: new Date( '02/01/2008' ) },

                                    { sales: 565000, month: new Date( '03/01/2008' ) },

                                    { sales: 255000, month: new Date( '04/01/2008' ) }

                                ] );

                       

                        [Bindable] private var bananaSales : ArrayCollection =

                            new ArrayCollection(

                                [ { sales: 891000, month: new Date( '01/01/2008' ) },

                                    { sales: 147560, month: new Date( '02/01/2008' ) },

                                    { sales: 295000, month: new Date( '03/01/2008' ) },

                                    { sales: 574000, month: new Date( '04/01/2008' ) }

                                ] );

             

            I want to create a line chart with orangeSales, appleSales and bananaSales as three different lines on the chart for different dates specified.

             

             

            <mx:ColumnChart showDataTips="true" >

                    <mx:horizontalAxis>

                        <mx:CategoryAxis

                            dataProvider="{orangeSales}"

                            categoryField="month"

                            />

                    </mx:horizontalAxis>

             

                    <mx:series>

                        <mx:LineSeries displayName="OrangeSales" yField="sales" xField="month" dataProvider="{orangeSales}"/>

                        <mx:LineSeries displayName="AppleSales" yField="sales" xField="month" dataProvider="{appleSales}"/>

                        <mx:LineSeries displayName="BananaSales" yField="sales" xField="month" dataProvider="{bananaSales}"/>

                    </mx:series>

             

            </mx:ColumnChart>