Advertisement
Other

How to Create a Bubble Chart in Flex

by

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

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

folder structure

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.

  1. Firstly, the {label:'5', x:'5', ...} declaration is needed to define the x-axis labels.
  2. After this, the {seriesName:'1996', color:'227ed5', ...} is used to declare each new set of data.
  3. 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:

Bubble Chart

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-

Bubble chart with trend-zones

 

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:

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

Animated Bubble Chart

Step 8: Converting it to a Plot 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 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:

Scatter Chart

 

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.


Related Posts
  • Web Design
    HTML & CSS
    Easier Visual Data in the Browser With Variance ChartsVariance thumb
    Today, we will be diving into Variance Charts; a unique JavaScript based "grammer of graphics" which provides an abstract, declarative markup style to create what would otherwise be fairly complex charts. Read More…
  • Code
    iOS SDK
    Exploring the Multipeer Connectivity framework: Project Setup78mpi preview image
    As with every major release, iOS 7 includes many new APIs that developers can take advantage of in their applications. In this tutorial, we'll take a look at a brand new framework introduced in iOS 7, the Multipeer Connectivity framework. This framework adds support for discovering, connecting to, and communicating with nearby services, such as iOS devices. In this tutorial, I will show you how to create a simple, multi-player game using this new framework.Read More…
  • Code
    Android SDK
    Using the Accelerometer on Android06lom preview image@2x
    In this tutorial, we are going to explore how to use the accelerometer, one of the many hardware sensors of modern smartphones, in an Android application. I'll explain what an accelerometer is and why it may be something you want to take advantage of in your Android applications.Read More…
  • Game Development
    Implementation
    Bake Your Own 3D Dungeons With Procedural RecipesProcedural content generation 3d dungeon maps 400px
    In this tutorial, you will learn how to build complex dungeons from prefabricated parts, unconstrained to 2D or 3D grids. Your players will never run out of dungeons to explore, your artists will appreciate the creative freedom, and your game will have better replayability.Read More…
  • Code
    JavaScript & AJAX
    Ember Components: A Deep DiveEmber components retina preview
    Ember.js is a JavaScript MVC framework that allows developers to create ambitious web applications. Although pure MVC allows a developer to separate concerns, it does not provide you with all the tools and your application will need other constructs. Today, I'm going to talk about one of those constructs. Ember components are essentially sandboxed re-usable chunks of UI. If you are not familiar with Ember, please check out Getting Started With Ember.js or the Let's Learn Ember Course. In this tutorial, we will cover the Web Components specification, learn how to write a component in Ember, talk about composition, explain the difference between an Ember view and an Ember component, and practice integrating plugins with Ember components.Read More…
  • Code
    JavaScript & AJAX
    Testing in Node.jsNodejs testing chai retina preview
    A test driven development cycle simplifies the thought process of writing code, makes it easier, and quicker in the long run. But just writing tests is not enough by itself, knowing the kinds of tests to write and how to structure code to conform to this pattern is what it's all about. In this article we will take a look at building a small app in Node.js following a TDD pattern.Read More…