4 Replies Latest reply on Jan 12, 2011 10:01 PM by Tanu Jain

    How to toggle bubble chart Item's visibility?

    Tanu Jain Level 2

      I have a bubble chart. I need to toggle the visibility of a particular bubbleSeriesItem (specific data point) ?

       

      Thanks,

      Tanu

        • 1. Re: How to toggle bubble chart Item's visibility?
          Devtron Level 3

          does the bubbleSeries item have an ID?

           

          if not, assign it one. then reference it "mynewID.visible=true/false;".

          • 2. Re: How to toggle bubble chart Item's visibility?
            SashaKeith Adobe Employee

            If your dataProvider is an ArrayCollection, you can set the filterFunction on it. In the filterFunction, return false on that particular item. Then reset the filterFunction to null when you want to make it visible again. You need to call refresh() on the ArrayCollection after setting the filterFunction and resetting it back to null.

            • 3. Re: How to toggle bubble chart Item's visibility?
              BhaskerChari Level 4

              Hi Tanu,

               

              You can try this..provided you only have only positive values on y-axis.

               

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                  <mx:Script>
                      <![CDATA[       
                      import mx.collections.ArrayCollection;

                      [Bindable]
                      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 },
                          { Month: "Jun", Profit: 2400, Expenses: 120, Amount: 1500 } ]);
                     
                      //Say if I want to hide items for May and Jun    
                      private function hidePoints():void
                      {
                       for each(var obj:Object in expensesAC)
                       {
                        if(obj.Month == "May" || obj.Month == "Jun")
                        {
                         if(parseInt(obj.Expenses) > 0)
                         {
                          obj.Expenses = -obj.Expenses;
                         }
                        }
                       }
                       expensesAC.refresh();
                      }   
                      private function showPoints():void
                      {
                       for each(var obj:Object in expensesAC)
                       {
                        if(obj.Month == "May" || obj.Month == "Jun")
                        {
                         if(parseInt(obj.Expenses) < 0)
                         {
                          obj.Expenses = -obj.Expenses;
                         }
                        }
                       }
                       expensesAC.refresh();
                      }
                      ]]>
                  </mx:Script>
              <mx:HBox>
                <mx:Button id="btnHide" label="Hide Points" click="hidePoints()" />
                <mx:Button id="btnShow" label="Show Points" click="showPoints()"/>
              </mx:HBox>
                  <!-- Define custom color and line style for the bubbles. -->
                  <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
                  <mx:Stroke id="stroke1" color="blue" weight="1"/>

                  <mx:Panel title="BubbleChart Sample Example" height="100%" width="100%">
                      <mx:BubbleChart id="bubblechart"
                          height="100%" width="100%"
                          paddingRight="5" paddingLeft="5"
                          showDataTips="true" maxRadius="20"
                          dataProvider="{expensesAC}">
                          <mx:verticalAxis>
                  <mx:LinearAxis minimum="0" />
                 </mx:verticalAxis>
                          <mx:series>
                              <mx:BubbleSeries
                                  displayName="Profit/Expenses/Amount"
                                  xField="Profit"
                                  yField="Expenses"
                                  radiusField="Amount"
                                  fill="{sc1}"
                                  stroke="{stroke1}"
                              />
                          </mx:series>           
                      </mx:BubbleChart>           
                      <mx:Legend dataProvider="{bubblechart}"/>           
                  </mx:Panel>
              </mx:Application>

               

               

              Thanks,

              Bhasker Chari

              • 4. Re: How to toggle bubble chart Item's visibility?
                Tanu Jain Level 2

                Hello,

                 

                One can set the filterFunction of the bubbleChart in which decision can be made for item's visibility. If we want to show an item, it can be added else not.

                 

                --

                Tanu