FusionCharts for Flex > Creating Widgets > Overview

In this section we will learn how to incorporate widgets in your Flex applications. Unlike the charts from FusionCharts pack, each widget (gauges, charts and graphs) is unique in nature, structure and configuration. Due to this, we create individual section for each widget, explain the features offered by each widget and the XML required to implement the features in Flex applications. Please note that due to the unique XML structure of each widget, FusionWidgets does not support Flex data structures. Widgets can only accept XML data either from a file (URL) or form a String. Each widget section begins with a simple example and then proceeds to explain, in details, various methods to customize the widgets.

The section also provides illustrative examples that are designed to help you learn the method of implementing features such as real-time updates, message loggers and alert managers. The real time updates is perhaps the best feature of the widgets, which allows you to the chart data in real time, without reloading the data. You will also learn about the alert manager and the message logger facility, which are associated with real time updates.

To start off things, we will show you a little example of creating a widget. Creating a widget can be accomplished in three easy steps:

  • Creating the XML for the widget
  • Creating a FusionWidgets object in your MXML application
  • Binding the XML to your FusionWidgets object

We will be creating a linear gauge for our example. This linear gauge would show "Cost Per Download". Let's begin by creating the XML:

Creating the XML

The XML data for the chart would look as under:

<Chart lowerLimit='0' upperLimit='30' 
gaugeRoundRadius='5' showGaugeBorder='1' bgColor='FFFFFF'
numberPrefix='$'>
<colorRange>
<color minValue='0' maxValue='30' name='Cost Per Download' />
</colorRange>
<pointers>
<pointer value='17.9' borderColor='000000' borderThickness='0' bgColor='FF5904' toolText='My cost' />
</pointers>
</Chart>

In the above XML, we have:

  • Created the <chart> element, which is the root element of each chart.
  • Specified the gauge scale by setting lower and upper limits.
  • Also configured the cosmetics of the gauge by setting gaugeRoundRadiusm showing gauge border and applying a background color.
  • Set $ as currency symbol prefixed to each value in the gauge.
  • Finally, added a pointer showing the download cost using <pointer> elements.

Building the application

First, complete the basic setup, as discussed in the installation section. After creating a new project in Flex Builder open the source view, you'll find that the following code has been automatically generated.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusionwidgets.components.*"> </mx:Application>

Next, switch to the Design view. Here, you will find a custom component named FusionCharts in the Component Window. Now, follow these steps to create the linear gauge:

  1. Drag the FusionWidgets custom component and drop it onto the stage. You will find that a control with FusionWidgets logo has been created on the stage.

  2. Next, switch to the Flex Properties window, select the Category View option and then choose the 'FusionWidgets' group.

  3. Select HLinearGauge as the value of FCChartType from the drop-down list.

The equivalent code in Source view should be:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusionwidgets.components.*">
<ns1:FusionWidgets x="10" y="10" FCChartType="HLinearGauge"/>

</mx:Application>

After this, you need to bind the XML to the widget. You can either specify the path of the data using FCDataURL property, or you can bind the a Flex String to the FCDataXML property. Here, we will bind the data to a string. The resultant code should be as follows:
 

<?xml version="1.0" encoding="utf-8"?>
  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusionwidgets.components.*">
    <ns1:FusionWidgets x="10" y="10" width="400" height="100" FCChartType="HLinearGauge" FCDataXML="{dataXML}"/>
   <mx:Script>
      <![CDATA[
          [Bindable]
          private var dataXML:String = "<Chart lowerLimit='0' upperLimit='30' " +
		        " numberPrefix='$'>" +
        	    "<colorRange>" +
             "   <color minValue='0' maxValue='30' name='Cost Per Download' />" +
	            "</colorRange>" +
    	        "<pointers>" +
             "   <pointer value='17.9' bgColor='FF5904' />" +
             "</pointers>" +
             "</Chart>";
       ]]>
   </mx:Script>
 </mx:Application>


Now just run the application and you should get a widget looking like this: