Question

I’m wondering if there is any way to make the bubble sizes scale or resize when the size of the chart resizes. If the bubbles are set to a specific pixel size, it seems as though the size is set and that’s it. So, if your chart is large, the bubble is size X and if the chart is small the bubble is still size X.

Here’s a sample app to show you what I mean. Any help or ideas would be appreciated?

Thanks!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var s1:ArrayCollection = new ArrayCollection( [
                {"x": 20, "y": 10, "r":10 },
                {"x": 40, "y": 5, "r":20 } ,
                {"x": 60, "y": 0, "r":30 }]);
    ]]>
    </mx:Script>

    <!-- Define custom color and line style for the bubbles. -->
    <mx:SolidColor id="sc1" color="red" alpha=".7"/>
    <mx:Stroke id="stroke1" color="red" weight="2"/>

    <mx:BubbleChart id="myChart" showDataTips="true" height="100%" width="100%"> 
        <mx:series>
            <mx:BubbleSeries 
                dataProvider="{s1}" 
                displayName="series1" 
                xField="x" 
                yField="y" 
                radiusField="r"
                selectable="true"
                fill="{sc1}"
                stroke="{stroke1}"
            />
        </mx:series>   
    </mx:BubbleChart>

</mx:Application>

Answer 1

What you can do is , add a resize event to your application.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" resize="handleMainWindowResize()">

In script part of the programme declare the function and in that function change the properties of the BubbleSeries:

<mx:Script>
        <![CDATA[
public function handleMainWindowResize():void
{
  //change values of s1 according to the percentage increase (this is important)
            for each(series in myChart.series)
            {
                var bubbleSeries:BubbleSeries= series as BubbleSeries;
                bubbleSeries.dataProvider =s1;//Resetting the data provider with the changed values

            }
}
    ]]>

</mx:Script>

Or you can always use scaling transformations.
But the above is the right way to go through it.