FusionCharts for Flex > Special Cases > FusionCharts in various Flex Containers

The FusionCharts for Flex module allows you to put your FusionCharts applications within various Flex containers. This allows you to build custom UIs with embedded FusionCharts components.

The following sections describe the implementation of FusionCharts into various containers. For our purposes, we have chosen a Column 2D chart as the sample application and placed it in various containers.

 

Sample Application

The following sample FusionCharts data will be embedded within the various containers. For more information on creating FusionCharts applications in Flex, see the chart creation section.

The FusionCharts tag will be specified in the following manner

<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>

The chart data is provided as a bindable Flex ArrayCollection object.

// Data for the chart as ArrayCollection datatype
[Bindable]
private var chartData:ArrayCollection=new ArrayCollection([
{label:'Diego', value:'22'},
{label:'Steve', value:'20'},
{label:'Bill', value:'18'},
{label:'Stephen', value:'64'},
{label:'Wallcott', value:'48'},
{label:'Hendrix', value:'43'},
{label:'John', value:'32'},
{label:'Venky', value:'56'},
{label:'Leexi', value:'26'},
{label:'Gilbert', value:'21'
}]);

Box Container

The Box class is the base class for VBox and HBox. For prcatical cases, VBox or Hbox should be used as the container for the FusionCharts object rather than the generic box container.

The following snippet describes how to insert a FusionCharts object within a Box container

<mx:Box id="pop_box" width="100%" height="100%" borderStyle="solid" borderThickness="4" borderColor="#EAB45F">
<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>
</mx:Box>

FusionCharts component within a Box container:

Box

Panel Container

The Panel object is a general-purpose container that can be used to group FusionCharts object. It can be implmented as:

<mx:Panel id="pop_panel" title="FusionCharts in Panel" width="100%" height="100%">
<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>
</mx:Panel>

FusionCharts component within a Panel container:

Panel

Accordion Container

The Accordion object is another general purpose container used as a form of split-pane interface. The following code allows you to implement a FusionCharts object within the container,

<mx:Accordion id="pop_accor" width="100%" height="100%" >
<mx:Form id="a1" label="FusionCharts in Accordion">
<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>
</mx:Form>
<mx:Form id="a2" label="Chart Details">
<mx:Text text="For more details, log on to : www.fusioncharts.com"/>
</mx:Form>
</mx:Accordion>

FusionCharts component within an Accordion container:

Canvas Container

The Canvas container allows the user to set decorated background and custom rendering. A FusionCharts component can be fit in a Canvas container in the following manner:

<mx:Canvas id="pop_canvas" width="100%" height="100%" borderColor="#89C0DF" borderThickness="4" borderStyle="solid" >
<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>
</mx:Canvas>

FusionCharts component within a Canvas container:

Canvas

Grid Container

Grid objects are used for highly formatted interactive displays. A FusionCharts object can be placed within a cell of the grid in the following manner:

<mx:Grid id="pop_grid" >
<mx:GridRow id="row1">
<mx:GridItem>
<mx:Text text="First cell of row 1"/>
</mx:GridItem>
<mx:GridItem>
<mx:Text text="Second cell of row 1"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow id="row2">
<mx:GridItem>
<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="dummy button"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>

FusionCharts component within a Grid container:

Canvas

Tab Navigator

The TabNavigator object is a basic container that allows the user to show different content in context to a tab. A FusionCharts component can be integrated with it in the following maner.

<mx:TabNavigator id="pop_tab" width="100%" height="100%" >
<mx:VBox label="Chart" paddingLeft="5" paddingBottom="5">
<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>
</mx:VBox>
<mx:VBox label="Details">
<mx:Text text="Log on to : www.fusioncharts.com"/>
</mx:VBox>
</mx:TabNavigator>

FusionCharts component within a Grid container:

Tab

Title Window

The TitleWindow container is a top-level container and is able to contain other containers. However, FusionCharts may be directly embedded within a TitleWindow container itself

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" showCloseButton="true" close="PopUpManager.removePopUp(this);" 
title="FusionCharts in different container" borderAlpha="100" width="520" height="460" creationComplete="initApp()" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts id="fc" FCChartType="MSColumn2D">
<ns1:FCChartData FCData="{chartData}"/>
</ns1:FusionCharts>
</mx:TitleWindow>

FusionCharts component within a TitleWindow container:

TitleWindow