15 Replies Latest reply on Dec 9, 2010 9:14 PM by BhaskerChari

    How to bind BubbleSeries data provider?

    Tanu Jain Level 2

      Hi,

       

      I have a bubbleChart and multiple bubble series inside it. Initially I set the data provider of each of my series. Later, when I update the array collections (to which my bubble series's data provider was binded), bubble series' data provider is not updated.

       

      <mx:BubbleChart>

           <mx:BubbleSeries dataprovider={arr[0]}>

           </mx:BubbleSeries>

       

           <mx:BubbleSeries dataprovider={arr[1]}>

           </mx:BubbleSeries>

       

           <mx:BubbleSeries dataprovider={arr[2]}>

           </mx:BubbleSeries>

      </mx:BubbleChart>

       

      In actionscript, arr[0],arr[1] and arr[2] are updated. I want to see updated bubbleseries too, but in vain.

      I have marked arr as bindable.

       

       

      Please help..

       

      Thanks,

      Tanu

        • 1. Re: How to bind BubbleSeries data provider?
          Claudiu Ursica Level 4

          is arr[0] an ArrayCollection ? Try with getItemAt(0) ...

           

           

          C

          • 2. Re: How to bind BubbleSeries data provider?
            Tanu Jain Level 2

            It is an arrayCollection and I have tried using both arr.getItemAt(0) and arr[0]. It is setting on the initial application startup.

             

            Issue is when "arr" gets updated on run-time, bubble series' data provider is not automatically set.

             

            --

            Tanu

            • 3. Re: How to bind BubbleSeries data provider?
              BhaskerChari Level 4

              Hi Tanu Jain,

               

              Can you post the sample application code as how you are updating your DataProvider reprodcing your problem.

               

               

              Thanks,

              Bhasker

              • 4. Re: How to bind BubbleSeries data provider?
                Tanu Jain Level 2

                Case- I

                <?xml version="1.0" encoding="utf-8"?>


                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600" creationComplete="init()">
                    <mx:Script>
                        <![CDATA[
                            import mx.charts.series.BubbleSeries;
                            import mx.collections.ArrayCollection;
                           
                            [Bindable]
                            public var expenses:ArrayCollection = new ArrayCollection([
                                {Month:"Jan", Profit:2000, Expenses:1500,amt:200},
                                {Month:"Feb", Profit:1000, Expenses:200,amt:340},
                                {Month:"Mar", Profit:1500, Expenses:500,amt:500}
                            ]);
                           
                           
                            [Bindable]
                            public var expenses1:ArrayCollection = new ArrayCollection([
                                {Month:"Jan", Profit:2500, Expenses:1500,amt:1000},
                                {Month:"Feb", Profit:1500, Expenses:200,amt:2000},
                                {Month:"Mar", Profit:2000, Expenses:500,amt:1500}
                            ]);
                           
                            private function init():void
                            {               
                                var bubbleSeriesColl:Array = new Array();
                                for(var i:int = 0; i < expenses.length; i++)
                                {
                                    var bubbleSeries:BubbleSeries = new BubbleSeries();
                                    bubbleSeries.xField = "Profit";
                                    bubbleSeries.yField = "Expenses";
                                    bubbleSeries.radiusField = "amt";
                                    bubbleSeries.dataProvider = expenses.getItemAt(i);
                                    bubbleSeriesColl.push(bubbleSeries);               
                                }
                                myChart.series = bubbleSeriesColl;               
                            }
                           
                            private function clickHandler():void
                            {               
                                expenses = expenses1;
                            }
                        ]]>
                    </mx:Script>
                    <mx:BubbleChart id="myChart" showDataTips="true">          
                    </mx:BubbleChart>
                    <mx:Button label="change Data" click="clickHandler()" />
                </mx:Application>

                 

                BubbleSeries are created at run time and their data provider are set to individual item in an ArrayCollection. On buttonClick, when expenses array is changed, it doesnt update the bubbleSeries.

                 

                Case- II

                However, If I create the series at compile time like given below, button click successfully updates the bubbleSeries

                <mx:series>
                             <mx:BubbleSeries               
                                 xField="Profit"
                                 yField="Expenses"
                                 radiusField="amt"               
                                 dataProvider="{expenses.getItemAt(0)}"
                             />
                             <mx:BubbleSeries               
                                 xField="Profit"
                                 yField="Expenses"
                                 radiusField="amt"               
                                 dataProvider="{expenses.getItemAt(1)}"
                                 />
                             <mx:BubbleSeries               
                                 xField="Profit"
                                 yField="Expenses"
                                 radiusField="amt"               
                                 dataProvider="{expenses.getItemAt(2)}"
                                 />           
                         </mx:series>

                • 5. Re: How to bind BubbleSeries data provider?
                  Flex Rock Level 1

                  Hi,

                       What you have done is correct . Except you need to call the init() in clickHandler() inoreder to render the new array to bubble chart. If you assign in compile time it will auotmaticaly take the value what ever you have in expense array. Because the inbuilt updateDisplayList  method will called internally whenever you change the parent array during compile time assignemnet. But it is not called during run time. So we are reassigning the value by calling the init() function next to expenses=expenses1;

                   

                   

                  Thanks

                  Jayagopal.

                  • 6. Re: How to bind BubbleSeries data provider?
                    Tanu Jain Level 2

                    Hi Jayagopal,

                     

                    If we call init() on ClickHandler, I would be creating the bubbleSeries all over again on every data change event.

                    What I understand is that its not binding expenses array with bubbleSeries.

                     

                    I do not want to create bubbleSeries again. Just want to update its data. Is there some way of binding it with specific items in the arrayCollection. I have tried BindingUtils, but in vain.

                     

                    Thanks,

                    Tanu

                    • 7. Re: How to bind BubbleSeries data provider?
                      BhaskerChari Level 4

                      Hi Tanu,

                       

                      Sorry I am late in replying as I was out for sometime.

                       

                      You can try this without recreating the Bubble series again..

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600" creationComplete="init()">
                          <mx:Script>
                              <![CDATA[
                                  import mx.charts.series.BubbleSeries;
                                  import mx.collections.ArrayCollection;
                                 
                                  [Bindable]
                                  public var expenses:ArrayCollection = new ArrayCollection([
                                      {Month:"Jan", Profit:2000, Expenses:1500,amt:200},
                                      {Month:"Feb", Profit:1000, Expenses:200,amt:340},
                                      {Month:"Mar", Profit:1500, Expenses:500,amt:500}
                                  ]);
                                 
                                 
                                  [Bindable]
                                  public var expenses1:ArrayCollection = new ArrayCollection([
                                      {Month:"Jan", Profit:2500, Expenses:1500,amt:1000},
                                      {Month:"Feb", Profit:1500, Expenses:200,amt:2000},
                                      {Month:"Mar", Profit:2000, Expenses:500,amt:1500}
                                  ]);
                                 
                                  private function init():void
                                  {               
                                      var bubbleSeriesColl:Array = new Array();
                                      for(var i:int = 0; i < expenses.length; i++)
                                      {
                                          var bubbleSeries:BubbleSeries = new BubbleSeries();
                                          bubbleSeries.xField = "Profit";
                                          bubbleSeries.yField = "Expenses";
                                          bubbleSeries.radiusField = "amt";
                                          bubbleSeries.dataProvider = expenses.getItemAt(i);
                                          bubbleSeriesColl.push(bubbleSeries);               
                                      }
                                      myChart.series = bubbleSeriesColl;               
                                  }
                                 
                                  private function clickHandler():void
                                  {               
                                      expenses = expenses1;
                                      updateBubbleSeries();
                                  }
                                  private function updateBubbleSeries():void
                                  {
                                   for(var i:int = 0; i < myChart.series.length; i++)
                                      {  
                                          myChart.series[i].dataProvider = expenses.getItemAt(i);
                                      }
                                  }
                              ]]>
                          </mx:Script>
                          <mx:BubbleChart id="myChart" showDataTips="true">          
                          </mx:BubbleChart>
                          <mx:Button label="change Data" click="clickHandler()" />
                         
                      </mx:Application>

                       

                       

                       

                      Thanks,

                      Bhasker

                       

                      Message was edited by: BhaskerChari

                      • 8. Re: How to bind BubbleSeries data provider?
                        Tanu Jain Level 2

                        Hi Bhasker,

                         

                        I have around 200-300 BubbleSeries. Initially, I was also updating it in the same manner you suggested: updating the dataprovider of each series. But its taking quite a lot of time and hence I had to look for an option like Binding which will automatically update the series.

                         

                        Any suggestion?

                         

                        Thanks,

                        Tanu

                        • 9. Re: How to bind BubbleSeries data provider?
                          Flex Rock Level 1

                          Hi,

                           

                          Without recreating the bubbleseries i think it is not possible during runtime.

                           

                          Thanks

                          Jayagopal.

                          • 10. Re: How to bind BubbleSeries data provider?
                            SashaKeith Adobe Employee

                            Have you tried updating your data in-place instead of clearing out the ArrayCollection and adding new items again? That may help speed things up, especially if the number of items remains the same. Creating new items each time is expensive.

                            • 11. Re: How to bind BubbleSeries data provider?
                              Tanu Jain Level 2

                              I had tried updating the value there itself.. as given below. But this doesn't update the values for BubbleSeries. Thats why I had to try updating whole arrayCollection through re-assignment, which also didnt work.

                               

                              private function clickHandler():void
                                          {               
                                              for(var i:int= 0;i<3; i++ )
                                              {
                                                  expenses.getItemAt(i).Profit += 500;
                                                  expenses.getItemAt(i).Expenses += 500;
                                                  expenses.getItemAt(i).amt += 500;
                                              }

                                        }

                               

                              Thanks,

                              Tanu

                              • 12. Re: How to bind BubbleSeries data provider?
                                BhaskerChari Level 4

                                Hi Tanu Jain,

                                 

                                If you have no problem updating the values there itself.. then you can do one thing...But the way you are trying to update the things is however correct but it will not update the values for BubbleSeries. The reason is why because the each object and its properties in the expenses array collection are not Bindable as since the objects in the expenses array collection are generic objects.

                                 

                                In order to make the objects bindable you can make use of a seperate class and make all the properties Bindable as needed so that you can acheive things you needed.

                                 

                                And one more thing here to note is ...when you are assiging the dataProvider the first time in the for loop you are using the below line of code...

                                 

                                bubbleSeries.dataProvider = expenses.getItemAt(i);

                                 

                                But in the click handler you are reassigning the dataProvider as expenses = expenses1; by doing so you are assigning/adding new items to your expenses ArrayCollection but the binding you assigned to the bubbleSeries dataProvider are different items so there is no possibility of updating the values to the BubbleSeries by this approach so you should update the values there itself by making use of external Bindable class so that Bubble Series gets updated correctly.

                                 

                                Actually I got this sorted out yesterday itself but you said as you are having some 200 - 300 series it is taking more time delay to get updated by reassigning the dataProvider by looping through the series as I suggested in my previous post. By updating the values there itself say if you have some 300 - 400 rows in your expenses ArrayCollection then you need to loop through all the rows(300 - 400 times)  and update all the properties within that Object.

                                 

                                Any way try this example below which I am explaining above...hope this is less expensive when compared to reassigning the dataProvider again..

                                 

                                <!-- Bindable class BubbleSeriesVO -->

                                package
                                {
                                [Bindable]
                                public class BubbleSeriesVO
                                {
                                        public var Month:String;
                                        public var Profit:Number;
                                        public var Expenses:Number;
                                        public var amt:Number;
                                 
                                  public function BubbleSeriesVO()
                                  {
                                  }
                                }
                                }

                                 

                                 

                                <!-- Application Source Code -->

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600" creationComplete="init()">
                                    <mx:Script>
                                        <![CDATA[
                                            import mx.charts.series.BubbleSeries;
                                            import mx.collections.ArrayCollection;
                                           
                                            /* [Bindable]
                                            public var expenses:ArrayCollection = new ArrayCollection([
                                                {Month:"Jan", Profit:2000, Expenses:1500,amt:200},
                                                {Month:"Feb", Profit:1000, Expenses:200,amt:340},
                                                {Month:"Mar", Profit:1500, Expenses:500,amt:500}
                                            ]); */
                                           
                                            [Bindable]public var expenses:ArrayCollection;
                                            [Bindable]public var expenses1:ArrayCollection;
                                           
                                            /* [Bindable]
                                            public var expenses1:ArrayCollection = new ArrayCollection([
                                                {Month:"Jan", Profit:2500, Expenses:1500,amt:1000},
                                                {Month:"Feb", Profit:1500, Expenses:200,amt:2000},
                                                {Month:"Mar", Profit:2000, Expenses:500,amt:1500}
                                            ]); */
                                           
                                            private function createExpensesCollection():void
                                            {
                                             //Creating expenses ArrayCollection
                                             expenses = new ArrayCollection();
                                             var bubbleVO:BubbleSeriesVO = new BubbleSeriesVO();
                                            
                                             bubbleVO.Month = "Jan";
                                             bubbleVO.Profit = 2000;
                                             bubbleVO.Expenses = 1500;
                                             bubbleVO.amt = 200;
                                             expenses.addItem(bubbleVO);
                                            
                                             bubbleVO = new BubbleSeriesVO();
                                             bubbleVO.Month = "Feb";
                                             bubbleVO.Profit = 1000;
                                             bubbleVO.Expenses = 200;
                                             bubbleVO.amt = 340;
                                             expenses.addItem(bubbleVO);
                                            
                                             bubbleVO = new BubbleSeriesVO();
                                             bubbleVO.Month = "Mar";
                                             bubbleVO.Profit = 1500;
                                             bubbleVO.Expenses = 500;
                                             bubbleVO.amt = 500;
                                             expenses.addItem(bubbleVO);
                                            
                                             //Creating expenses1 ArrayCollection
                                             expenses1 = new ArrayCollection();
                                             bubbleVO = new BubbleSeriesVO();
                                             bubbleVO.Month = "Jan";
                                             bubbleVO.Profit = 2500;
                                             bubbleVO.Expenses = 1500;
                                             bubbleVO.amt = 1000;
                                             expenses1.addItem(bubbleVO);
                                            
                                             bubbleVO = new BubbleSeriesVO();
                                             bubbleVO.Month = "Feb";
                                             bubbleVO.Profit = 1500;
                                             bubbleVO.Expenses = 200;
                                             bubbleVO.amt = 2000;
                                             expenses1.addItem(bubbleVO);
                                            
                                             bubbleVO = new BubbleSeriesVO();
                                             bubbleVO.Month = "Mar";
                                             bubbleVO.Profit = 2000;
                                             bubbleVO.Expenses = 500;
                                             bubbleVO.amt = 1500;
                                             expenses1.addItem(bubbleVO);
                                            }
                                            private function init():void
                                            {
                                             createExpensesCollection();
                                                var bubbleSeriesColl:Array = new Array();
                                                for(var i:int = 0; i < expenses.length; i++)
                                                {
                                                    var bubbleSeries:BubbleSeries = new BubbleSeries();
                                                    bubbleSeries.xField = "Profit";
                                                    bubbleSeries.yField = "Expenses";
                                                    bubbleSeries.radiusField = "amt";
                                                    bubbleSeries.dataProvider = expenses.getItemAt(i);
                                                    bubbleSeriesColl.push(bubbleSeries);               
                                                }
                                                myChart.series = bubbleSeriesColl;               
                                            }
                                           
                                            private function clickHandler():void
                                            {
                                                //expenses = expenses1;
                                                for(var i:int = 0; i < expenses1.length; i++)
                                                {
                                                 if(i >= expenses.length)
                                                 {
                                                  break;
                                                 }
                                                 (expenses.getItemAt(i) as BubbleSeriesVO).Month = (expenses1.getItemAt(i) as BubbleSeriesVO).Month;
                                                 (expenses.getItemAt(i) as BubbleSeriesVO).Profit = (expenses1.getItemAt(i) as BubbleSeriesVO).Profit;
                                                 (expenses.getItemAt(i) as BubbleSeriesVO).Expenses = (expenses1.getItemAt(i) as BubbleSeriesVO).Expenses;
                                                 (expenses.getItemAt(i) as BubbleSeriesVO).amt = (expenses1.getItemAt(i) as BubbleSeriesVO).amt;
                                                }
                                                expenses.refresh();
                                                //updateBuubleSeries();
                                            }
                                           
                                            private function updateBuubleSeries():void
                                            {
                                              for(var i:int = 0; i < myChart.series.length; i++)
                                                {  
                                                    myChart.series[i].dataProvider = expenses.getItemAt(i);
                                                }
                                            }
                                        ]]>
                                    </mx:Script>
                                    <mx:BubbleChart id="myChart" showDataTips="true">          
                                    </mx:BubbleChart>
                                    <mx:Button label="change Data" click="clickHandler()" />
                                   
                                </mx:Application>

                                 

                                 

                                Thanks,

                                Bhasker

                                1 person found this helpful
                                • 13. Re: How to bind BubbleSeries data provider?
                                  BhaskerChari Level 4

                                  Hi Tanu Jain,

                                   

                                  Have you tried the approach I suggested..??

                                   

                                   

                                  Thanks,

                                  Bhasker

                                  • 14. Re: How to bind BubbleSeries data provider?
                                    Tanu Jain Level 2

                                    Hi Bhasker,

                                     

                                    I tried your approach and that worked too.. But as my number of series were too many,  it gave the same performance as setting the dataprovider of each series again. Hence  I could not gain on performance front.

                                     

                                    Thanks for your reply:)

                                     


                                    --

                                    Tanu

                                    • 15. Re: How to bind BubbleSeries data provider?
                                      BhaskerChari Level 4

                                      Hi Tanu,

                                       

                                      I dont think there is any other way other than the reassigning the dataProvider which I explained in my first post, or recreating the series or the last approach which I explained of using dynamic class in my last post to modify the items in the dataProvider there itself. May be you should opt of the three the one which could give the performance gain.

                                       

                                      If you can find any other way out please share with me and I also would like to hear the views on this from other guys of this community...

                                       

                                       

                                      Thanks,

                                      Bhasker Chari