Overview

Flash components always have been the most visually gratifying components on the web. And with Flex, Flash has reached a whole new level for interface design. Flex has not only reduced the total LOC count but has made interface design considerably easier with its tag based design principles and lots of custom components. But there are still a lot of components missing in Flex. For example funnel charts are widely used to show potential revenue in different stages of a sales process. However, Flex provides no support for such charts. Thankfully there are several 3rd party components that provide alternatives to Flex charting. Notable among them is FusionCharts, who provide a module just for Flex. The module is rather convenient as it provides custom tags which can be bound to Flex's native data structures. So, we have chosen the FusionCharts for Flex suite as the base for our example.

Setting Up

Before we set up the FusionCharts for Flex module, it might interest you to know how it works. Technically, FusionCharts is written in AS2 and such cannot directly be embedded into the Flex environment. So it uses the FlashInterface to communicate with the Flex runtime environment (AVM2). If you want to know more about how it works, you can see their documentation at www.fusioncharts.com/flex/docs.

So how does one set up FusionCharts for Flex? It's quite easy, as FusionCharts for Flex comes as a SWC library module for Flex. The module can be fully integrated with the Flex Builder application, or be used as an external library if someone wishes to use the free SDK. The actual installation is a simple copy-paste process that can be executed in 3 steps:

  1. Download the FusionCharts for Flex module and extract the archive. The location where you have extracted the FusionCharts for Flex archive will subsequently be referred to as the DISTRIBUTION_ROOT. You can download the evaluation version from www.fusioncharts.com/flex/Download.asp.
  2. Create a new Flex project with which you want to associate the FusionCharts for Flex module.
  3. Copy the FusionCharts.swc Shockwave Component present at DISTRIBUTION_ROOT/Charts to PROJECT_ROOT/libs folder. The DISTRIBUTION_ROOT root is the location where you have downloaded and extracted the FusionCharts for Flex archive.
  4. Copy the fusioncharts folder from DISTRIBUTION_ROOT/Charts to the PROJECT_ROOT/src folder. This folder holds all the chart Flash objects.

The following image shows the resultant folder structure after incorporating the FusionCharts for Flex module. We have named the project as FusionCharts, so an MXML file of the same name is present by default:


Creating the Funnel Chart

So now that we have set up the FusionCharts library, we can dive right in to creating a funnel chart. For those of you who are unfamiliar with the term "funnel chart", they are used to display values as progressively decreasing proportions. The size of the area is determined by the series value as a percentage of the total of all values.

For our example, we will show the process and conversion ratio of website visits to avtual purchases. You can get the complete source code of this example in the funnel_example1.mxml file present in example.zip archive. So, without further ado, lets begin:

Step 1: Declaring FusionCharts Tag

Firstly we need to declare the FusionCharts tags within the MXML. The tags look as follows.

<ns1:FusionCharts x="10" y="10" FCChartType="Funnnel" height="400">
<ns1:FCChartData />
</ns1:FusionCharts>

For using Flex data structures such as ArrayCollections, XMLList etc., we also need to declare the child tag FCChartData. This tag will allow us to bind plot data, chart properties and style to the FusionCharts object.

Step 2: Defining Chart Properties

Now let us create an ArrayCollection to describe the basic properties of the chart. We shall call our ArrayCollection chartParam. The declaration is as follows:

[Bindable]      
private var chartParam:ArrayCollection=new ArrayCollection([
{caption: 'Conversion Ratio'},
{subcaption: 'May 2007'},
{showPercentValues: '1'},
...

]);

If you notice carefully, each array element is an object that happens to be a list of properties and their respective values. For example, the chart caption is declared as {caption: 'Conversion Ratio'}. So, without knowing anything about FusionCharts XML we can add or remove properties to our chart object. If you want to know about the different properties available, you can visit the Funnel Chart Reference.

Step 3: Providing Chart Data

We also have to declare the data set for this chart. The data set can be declared as follows:

[Bindable]       
private var chartData:ArrayCollection=new ArrayCollection([
{label: "Website Visits", value: "385634" },
{label: "Downloads", value: "175631" },
{label: "Interested to buy", value: "84564" },
...

]);

The chart data for a funnel chart is simple single series type. Each object is declared as {label: "Downloads", value: "175631" }, a simple key value pair. You are free to enter data in any order you want, the chart will automatically arrange the data..

Step 4: Binding Flex Data to FusionCharts Object

Now that we have declared the all the necessary data for our scatter chart, we should bind these data to our FusionCharts object. As we mentioned before, all Flex data sources are bound to the attributes of the FCChartData tag. After binding the chart parameters and the data source, the source would look as follows:

<ns1:FCChartData  FCParams="{chartParam}" FCData="{chartData}" />

Step 5: Running the Code

It's finally time to run the example. You can get the complete source code for this example in the example.zip package. Setup the FusionCharts library as described in the previous section and then compile the funnel_example1.mxml file. Run the resultant SWF file and you should see a chart as follows:


Configuring Various Properties

Funnel charts are unique and have certain properties that can only be applied to them. Let's take a look at these properties and how to manipulate them:

Drawing 2D funnel chart

When you draw a normal funnel chart, it renders as 3D, with a context menu allowing you to switch between 2D & 3D mode. However, if you intend to render the funnel as 2D itself, you can define the is2D attribute in the chartParam array:

[Bindable]      
private var chartData:ArrayCollection=new ArrayCollection([
...
{is2D: '1'},
...
]);

When in 2D mode, you can customize the border properties of the funnel as follows:

[Bindable]      
private var chartParam:ArrayCollection=new ArrayCollection([
...
{is2D: '1'},
{showPlotBorder: '1'},
{plotBorderThickness: '2'},
{plotBorderAlpha: '100'},
{plotBorderColor: 'CCCCCC'}

...
]);

Slicing out funnel slices

Funnel charts allow you to slice out different portions of the funnel. To slice out a single data set, just add isSliced: 1 property to the property list of that data set:

[Bindable]      
private var chartData:ArrayCollection=new ArrayCollection([
...
{label: 'Interested to buy', value: '84564', isSliced: '1' },
...
]);

You can also slice out all the parts by declaring the property in the chart parameters. You can also override the global isSliced value at individual data sets to un-slice those segments.

[Bindable]      
private var chartParam:ArrayCollection=new ArrayCollection([
...
{isSliced: '1'},
...
]);

Adding Styles

Time to kick it off and really spice up you chart with styles. Adding styles is quite simple; as before, make a new ArrayCollection. Within the array for styles, we have to declare two types of objects:

  1. Style object to define different styles
  2. A application object to map styles onto various objects

Just look at the code, if this seems a bit confusing:

[Bindable]
private var chartStyle:ArrayCollection=new ArrayCollection([
{name: 'CaptionSize', type: 'font', size: '17'},
{name: 'MyShadow', type: 'shadow'},

{toObject: 'Caption', styles: 'CaptionSize'},
{toObject: 'Caption', styles: 'MyShadow'},
{toObject: 'Dataplot', styles: 'MyShadow'}
]);

This type of style declarations are advantageous for the fact that they can be re-used, and used over multiple objects. In our case we have changed the font size for just the caption, while adding shadows to both the caption and the dataplots.

The {name: 'MyShadow', type: 'shadow'} object is used to declare styles. The name attribute represents the name of the object and the type attribute represents the type of style. These are followed by attributes pertinent to a particular type of style. Next comes the mapping of styles to particular chart objects. The {toObject: 'Caption', styles: 'MyShadow'} declaration does exatctly that. It is quite obvious that the style attribute is for the name of the style and the toObject defines the type of object applied to.

Bind the new styles array to our chart object as before

<ns1:FCChartData FCData="{chartData}" FCParams="{chartParam}" FCStyles="{chartStyle}" />

You can get the modified code from the bubble_example2.mxml file in the example.zip archive. The resultant application would look like:

Converting it to a Pyramid Chart

Converting a chart into another chart is really easy. All you have to do is

  1. Change the chart type.
  2. Make sure the current data conforms to the data of the new chart type. If not, change it accordingly.
  3. Make visual adjustments to suit your new chart type.

To change the chart type, simply set the FCChartType attribute to Pyramid.

<ns1:FusionCharts x="10" y="10" FCChartType="Pyramid" ...>

The data-set for funnel and pyramid is essentially the same, so they just differ in their representation of data. So we do not need to modify the data set in any way.

Also, the properties for the pyramid chart are the same as funnel charts. So we can modify them in the same way as we did in the case of funnel chart.

If we compile and run the file, we will get a chart as follows:


You can get the code for this from the pyramid_example.mxml file in the example.zip archive.

Conclusions

So we're finally done with building our chart. Now you can go out and spread your FusionCharts applications to the world. On and all, building charts with FusionCharts is pretty easy. And with the custom tags and Flex data binding provided by FusionCharts, it really is the component you should use for your Flex applications.