How to Create a Bubble Chart in Flex

Tuesday, 02 June 2009 08:32

Flash components have always been the most visually gratifying components on the web. With Flex, Flash has reached a whole new level of interface design, and have made it considerably easier. However, Flex lacks the array of customization options, styles, and animations that are provided by several 3^rd party components. Notable among them is FusionCharts, who provide a module just for Flex. For this example, we will use this suite to create a bubble chart in Flex.

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 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:

Get 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.
Create a new Flex project with which you want to associate the FusionCharts for Flex module.
Copy the FusionCharts.swc Shockwave Component present at DISTRIBUTION_ROOT/Charts to PROJECT_ROOT/libs folder. .
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 Bubble Chart

So now that we have set up the FusionCharts library, we can dive right in to creating a bubble chart.

For those of you who are unfamiliar with the term "bubble chart", they are graphs that are plotted like any other continuous data set.

Only, they have an ability to represent an extra dimension of data. Not only that, they can be used to compare multiple data sets too.

We will plot the cost price vs. selling price of different fruits with the z-index representing the quantity of each fruit. So, without further ado, let’s 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="Bubble" width="500">
	<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: 'Annual Sales Chart'},
  {xAxisName: 'Price (Bt./kg.)'},
  {yAxisName: 'Original Cost (Bt./kg.)'},
	...
]);

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: 'Annual Sales Chart'}. 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 Bubble 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:

private var chartData:ArrayCollection=new ArrayCollection([
  {label:'0', x:'0'},
  {label:'5', x:'5', SL:'1'},
  ...
  {seriesName:'1996', color:'227ed5'},
  {x:'30', y:'35', z:'116', name:'Mango'},
  {x:'8', y:'15', z:'33', name:'Orange'},
  ...
  {seriesName:'1997', color:'8dcb1e'},
  {x:'14', y:'35', z:'116', name:'Mango'},
  {x:'28', y:'25', z:'33', name:'Orange'},
  ...
]);

If we take a closer look, there are a total of three types of objects within the ArrayCollection.

Firstly, the {label:'5', x:'5', ...} declaration is needed to define the x-axis labels.
After this, the {seriesName:'1996', color:'227ed5', ...} is used to declare each new set of data.
And finally, the individual data elements are declared as {x:'8', y:'15', z:'33', ...}. The x, y and z keys are the axis indexes for this particular data set.

Step 4: Binding Flex Data to FusionCharts Object

Now that we have declared the all the necessary data for our bubble 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 source package. Setup the FusionCharts library as described in the previous section and then compile the bubble_example1.mxml file. Run the resultant SWF file and you should see a chart as follows:

Step 6: Adding Trendlines

Now that we have seen how to represent the datasets for the charts, let’s make it cooler by adding trend-lines to it. In fact we will add trend-zones to our charts rather than just lines. As before, we would have to make a new ArrayCollection for our trend-line objects. The following code shows us just how to do that:

[Bindable]
private var chartTrend:ArrayCollection=new ArrayCollection ([
  {startValue:'30', endValue:'50', isTrendzone: '1', color:'cb2c2c', ...},
  {startValue:'0', endValue:'30', isTrendzone: '1', color:'ffc514', ...}
]);

Each trend-zone object just, declares it’s starting point, ending point and the fact that it is a zone not a line and it’s colour. Also we have the option of to set graphical properties such as colour, alpha etc.

Again, as before we will add a new attribute FChTrendlines to our FCChartData tag, and bind the data to it. The FChTrendline attribute declares, that these are horizontal trend-zones, vertical trend-zones can also be declared, The modified source would be:

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

You can get the source code for the modified chart from the bubble_example2.mxml file in the source package. If you compile and run the file, the new chart would look like this-

Step 7: Adding Styles

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

Style object to define different styles
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: 'CanvasAnim', type: 'animation', param: '_xScale', start: '0', duration: '2'},
  {toObject: 'Caption', styles: 'CaptionSize'},
  {toObject: 'Trendlines', styles: 'CanvasAnim'}
]);

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 applied the same animation style to both our trend-zones. We have also declared a style to make the caption larger.

The {name: 'CanvasAnim', type: 'animation', ...}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: 'CaptionSize'} 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}" FChTrendLines="{chartTrend}"/>

You can get the modified code from the bubble_example3.mxml file in the source archive. The resultant application would look like:

Step 8: Converting it to a Plot Chart

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

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

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

<ns1:FusionCharts x="10" y="10" FCChartType="Scatter" width="500">

Next we delete the z-index to make the chart data conformable to scatter chart data type. The data would transformed as:

{x:'14', y:'35', z:'116', name:'Mango'}  »  {x:'14', y:'35', name:'Mango'}

We also add some styling information to our charts to make the data plots look more elegant.

{seriesName:'1996', color:'227ed5', anchorSides:'3', anchorRadius:'4', anchorBgColor:'D5FFD5', anchorBorderColor:'009900'}

You can get the modified code from the scatter_example.mxml file in the source archive. The resultant application would look like:

Conclusions

So we’re finally done with building our chart. Now you can go out and spread your FusionCharts applications to the world. Mostly, building charts with FusionCharts is rather easy. With the custom tags and Flex data binding provided by FusionCharts, it really is the component you should be using for your Flex applications.