How to bind BubbleSeries data provider?

Question

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

Answer 1

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