FusionCharts for Flex > Special Cases > FusionCharts in Flex Containers

FusionCharts for Flex allows you to put charts/widgets within various Flex containers. This lets you to build custom UIs with embedded FusionCharts components.

The following sections describe the process of defining charts/widgets within containers. For our purposes, we have chosen a Column 2D chart as the sample component and placed it in various containers.

Sample Application
Box Container
Panel
Accordion
Canvas
Grid
Tab Navigator
Title Window

Sample Application

The following sample 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:

<components:FusionCharts id="fc" FCChartType="Column2D">
	<components:FCChartData FCData="{chartData}" />
</components: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:'Stela', value:'64'},
   {label:'Walls', value:'48'},
   {label:'Trex', value:'43'},
   {label:'John', value:'32'},
   {label:'Venky', value:'56'},
   {label:'Lexi', value:'26'},
   {label:'Bert', value:'21'}
]);

Box Container

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

The following snippet illustrates the process of inserting a FusionCharts object into a Box container

<mx:Box id="pop_box" width="100%" height="100%" borderStyle="solid" borderThickness="4" borderColor="#EAB45F">
   <components:FusionCharts id="fc" FCChartType="Column2D">
   	<components:FCChartData FCData="{chartData}"/>
   </components: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 implemented in the following manner:

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

In Spark Panel container

<s:Panel id="pop_panel" title="FusionCharts in Panel" width="100%" height="100%">
	<components:FusionCharts x="29" y="31">
		<components:FCChartData FCData="{chartData}" />
	</components:FusionCharts>
</s:Panel>

FusionCharts component within MX and Spark Panel container:

Panel Panel

Accordion Container

The Accordion object is another general purpose container which is generally used for creating a split-pane interface. The following code can be used to put a FusionCharts object into a an Accordion container:

<mx:Accordion id="pop_accor" width="100%" height="100%" >
   <mx:Form id="a1" label="FusionCharts in Accordion">
   	<components:FusionCharts id="fc" FCChartType="Column2D">
   	   <components:FCChartData FCData="{chartData}"/>
   	</components: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. The following code can be used for fitting a FusionCharts component into a Canvas container:

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

FusionCharts component within a Canvas container:

Canvas

Grid Container

Grid objects are used for highly formatted interactive displays. The following code can be used for placing a FusionCharts object in the cell of a grid:

<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>
   	<components:FusionCharts id="fc" FCChartType="Column2D">
   	    <components:FCChartData FCData="{chartData}"/>
   	</components: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 change the content by selecting a tab. A FusionCharts component can be integrated with it, in the following manner:

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

FusionCharts component within a Tab container:

Tab

Title Window

The TitleWindow container is a top-level container, which in-turn can contain other containers. However, FusionCharts may be directly embedded within a TitleWindow container itself. The following code shows how:

<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.*">
   <components:FusionCharts id="fc" FCChartType="Column2D">
	<components:FCChartData FCData="{chartData}"/>
   </components:FusionCharts>
</mx:TitleWindow>

FusionCharts component within a TitleWindow container:

TitleWindow

FusionCharts component in a Spark TitleWindow container. This TitleWindow is created as a new MXML component.

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
 			   xmlns:s="library://ns.adobe.com/flex/spark"
 			   xmlns:mx="library://ns.adobe.com/flex/mx"
 			   width="520" height="460"
 			   close="PopUpManager.removePopUp(this);"
			   title="FusionCharts in different container" borderAlpha="100"
 			   xmlns:components="com.fusioncharts.components.*">

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.managers.PopUpManager;

			// 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:'Stela', value:'64'},
				{label:'Walls', value:'48'},
				{label:'Trex', value:'43'},
				{label:'John', value:'32'},
				{label:'Venky', value:'56'},
				{label:'Lexi', value:'26'},
				{label:'Bert', value:'21'}
			]);
		]]>
	</fx:Script>

	<components:FusionCharts x="29" y="31">
		<components:FCChartData FCData="{chartData}" />
	</components:FusionCharts>

</s:TitleWindow>

TitleWindow