FusionCharts for Flex > Your First Widget > Using Dynamic resizing

Starting FusionCharts for Flex v1.3, all widgets (gauges) can resize automatically as per the changed size of the container component. The gauges  can accept width and height in percentage (%) and scale in percentage with respect to the containers' size. Whenever a container's size changes, the chart automatically resizes itself with respect to the new size of the container component. To achieve this, all you need to do is:

  • Set percentage values as the gauge's width and height
<components:FusionWidgets width="100%" height="100%" FCChartType="AngularGauge" FCDataURL="Data.xml" x="0" y="0" />

or

import com.fusioncharts.components.FusionWidgets;
import com.events.FCEvent;

...

var FW:FusionWidgets=new FusionWidgets();                    

//Set widget type
FW.FCChartType="AngularGauge";

// Set 100% width and height
FW.percentWidth = 100;
FW.percentHeight = 100;

//set widget data source XML
FW.FCDataURL="Data.xml";

// x, y position on stage
FW.x=0;
FW.y=0;

//show the component in the stage
addChild(FW);
// or 
//addElement(FW);


  • Set manageResize="1" in <chart> element
<chart manageResize='1' ...>

All gauges in FusionWidgets can now resize automatically as per the changed size of the container element.

To demonstrate this we have created an angular gauge inside a resizable panel (using Chris Callendar's Resizable Panel component, thanks!). 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:win="fb.util.ui.*"
                xmlns:components2="com.fusionwidgets.components.*"
                width="100%" height="100%" layout="absolute">
    
    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import fb.util.ui.ResizeablePanel;
        ]]>
    </mx:Script>

    <win:ResizeablePanel x="510" y="70" width="450" height="450"
                     title="Resizable Angular Gauge" enableResize="true" enableMove="true">

        <components2:FusionWidgets FCChartType="AngularGauge" FCDataURL="Data.xml" width="100%" height="100%"/>
        
    </win:ResizeablePanel>
    
</mx:Application>

When the application with the above code is launched, the gauge is rendered inside the panel occupying the available space.

When the panel is resized, the gauge automatically resizes too, as shown in the image below: