3 Replies Latest reply on Apr 28, 2009 11:05 AM by Gregory Lafrance

    BubbleChart question

    hkpadobe

      I have created a BubbleChart that is working with hardcoded values used for the DataProvider as shown below:

       

      [ Bindable] public var myChart:ArrayCollection = new ArrayCollection( [{ Profit: 0.30, Sales: 0.50, Taxes: 0.75 } ]);


      As my application will use Variables to contain the above data for Profit, Sales and Taxes, how do I get the chart to work with these variables? I have tried just substituting the above values with the variables, but this has not worked. Also tried other data binding but no luck.

       

      Thanks in advance for any help.

        • 1. Re: BubbleChart question
          SujitG Level 2

          Hi,

           

          I took the sample in Flex 3 language reference and substituted your values and it is working. Please find the code below. The bubble will be small, cause the values are small.

           

          Hope this helps.

           

          <?xml version="1.0"?>
          <!-- Simple example to demonstrate the BubbleChart control. -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:Script>
                  <![CDATA[       
                  import mx.collections.ArrayCollection;
                  [Bindable]
                  public var myChart:ArrayCollection =
                  new ArrayCollection( [{ Profit: 0.30, Sales: 0.50, Taxes: 0.75 } ]);
                  ]]>
              </mx:Script>

           

              <!-- 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 Control Example" height="100%" width="100%">
                  <mx:BubbleChart id="bubblechart"
                      height="100%" width="100%"
                      paddingRight="5" paddingLeft="5"
                      showDataTips="true" maxRadius="20"
                      dataProvider="{myChart}">
                      <mx:series>
                          <mx:BubbleSeries
                              displayName="Profit/Expenses/Amount"
                              xField="Profit"
                              yField="Sales"
                              radiusField="Taxes"
                              fill="{sc1}"
                              stroke="{stroke1}"
                          />
                      </mx:series>           
                  </mx:BubbleChart>           
                  <mx:Legend dataProvider="{bubblechart}"/>           
              </mx:Panel>
          </mx:Application>

          • 2. Re: BubbleChart question
            hkpadobe Level 1

            Sujit: Thanks for your effort. I did take a look at the basic setup of the BubbleCharts in the Flex Help. What I really wanted the answer was to how to substitute the ArrayCollection Data with my own variables.

             

            I have managed to work it by using the arrayCollectionName.getItemAt().labelName to retrieve the data and then setting it with my variable.

             

            This worked fine.

            • 3. Re: BubbleChart question
              Gregory Lafrance Level 6

              You should look at models in the Flex Builder help sys to map between variables and your charts, but really, your data should comes from a collection that is updated, perhapsa from a database query.