FusionCharts for Flex > Creating Widgets > Bullet Graphs > An Example

In this section, we'll create a simple bullet graph to show the process involved in the same.

 
Steps

The following tasks involved to create a a bullet graph:

  1. Decide the lower and upper limit of a chart
  2. Divide the specified limits into qualitative ranges of performance, such as poor, satisfactory, and good.
  3. Decide the value to represent
  4. Decide the target figure to represent
  5. Choose the chart cosmetics
  6. Embedding the chart in your MXML application

Let's now explain how to perform each of these.

Creating the XML

Defining the color range

We'll plot a simple horizontal bullet graph to show the revenue figures for a fictional company. To do so, we need to first decide the qualitative ranges of revenue performance for that company. Let's assume it to something as shown below:

Range What it means? Color
$0-$50,000 Poor Dark grey
$50,000-$75,000 Moderate Normal grey
$75,000-$100,000 Good Light grey

Also, we intend to plot the following values:

Intended revenue: $80,000
Revenue achieved: $78,900

 
Converting to XML
We will be creating a XML called Data.xml in the same location as our MXML apllication. The XML for the above data would look similar to the one shown below:
<chart lowerLimit='0' upperLimit='100' caption='Revenue' subcaption='US $ (1,000s)' numberPrefix='$' numberSuffix='K' showValue='1' >
   <colorRange>
      <color minValue='0' maxValue='50' color='A6A6A6'/>
      <color minValue='50' maxValue='75' color='CCCCCC'/>
      <color minValue='75' maxValue='100' color='E1E1E1'/>
   </colorRange>
   <value>78.9</value>
   <target>80</target>
</chart>

As you see in the above code we have performed the following tasks:

  • Created the <chart> element, which is the root element of each chart.
  • Specified chart limits, caption, sub-caption, number prefix, and number suffix. You can specify a lot more properties for the <chart> element, which have been discussed in next sections.
  • Defined the color range (numerical value for qualitative ranges) for the chart under <colorRange> element. Each range value has its own exclusive minValue and maxValue and also a color code.
  • Defined the value for chart inside <value> element.
  • Defined the intended target for chart inside <target> element.

When you now run this XML against the horizontal bullet graph, you'll get a chart similar to the figure shown below:

Building the Chart

We will assume that you already have a project open and an MXML application, where you are ready to insert your chart. Begin by switching to the Design View in your MXML application. Here you'll find a custom component named FusionWidgets in the Components window. Next, follow the steps listed below.

  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 FusionCharts group.

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

  4. Select Data.xml as the value of FCDataURL from the drop-down list. FCDataURL property sets the path of the XML file.

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" FCDataURL="Data.xml" FCChartType="HBullet" width="400" height="100"/> ...
</mx:Application>

The file Data.xml is our previously created XML file. The file should be present in the same location as your MXML file. If not, you should specify the path of the file in the FCDataURL property. If you do not wish to create a separate XML data file, you can also bind the data as a string to the FCDataXML property.