FusionCharts for Flex > Creating Widgets > Bulb Gauge > Creating a Simple Gauge

In the first bulb gauge, we would be plotting Attrition Rate from 0-100%. The final outcome would look similar to the one shown below:

The following tasks involved in building this chart are:

  • Defining the minimum and maximum value which would be plotted on the gauge scale. They are termed as the lower and upper limits of the gauge scale. In this case setting them to 0 and 100 respectively would suit our purpose just fine - as we're plotting the chart indicating a %, which cannot go below 0 or beyond 100.
  • Dividing the values into pre-determined regions:
    0-15%: Low Attrition Rate (the bulb would shown in green when the value is in this region)
    15-35%: Medium Attrition Rate (bulb would be yellow in this region)
    35-100%: High Attrition Rate (bulb would be red in this region)
  • Passing the data value to the chart. We have put 12 in the above chart. Since 12 lies in the 1st pre-determined region, i.e. of the Low Attrition rate, the entire bulb is displayed in green.
  • Embedding the chart in your MXML application.

With the tasks defined, now lets get to the XML side of things.

Creating the XML

XML for the chart
<chart upperLimit='100' lowerLimit='0' numberSuffix='%'>
   <colorRange>
      <color minValue='0' maxValue='15' label='Low' code='00FF00' />
      <color minValue='15' maxValue='35' label='Medium' code='FFFF00' />
      <color minValue='35' maxValue='100' label='High' code='FF0000' />
   </colorRange>
   <value>12</value>
</chart>
 
Explanation

First comes the <chart> element, which is the starting element for any chart that you create using FusionWidgets. Now we define the lower and upper limits of the gauge scale. To define the limits, we use the lowerLimit and upperLimit attributes of the <chart> element.

We also set the palette number and number suffix (the character which would show up at the end of end number).

<chart upperLimit='100' lowerLimit='0' numberSuffix='%'>

There are other attributes of the <chart> element but we won't be exploring the attributes right now.

Next, we need to define our color range.As shown above, this chart has 3 color ranges. To define the color range, we use the <colorRange> element, which is an immediate child of the <chart> element. Under each <colorRange> element, we place a <color> element specifying a single color range as shown in the code below.

<colorRange>
   <color minValue='0' maxValue='15' label='Low' code='00FF00' />
   <color minValue='15' maxValue='35' label='Medium' code='FFFF00' />
   <color minValue='35' maxValue='100' label='High' code='FF0000' />
</colorRange>
After that, we set the value of the chart using:
<value>12</value>
And this finishes our first bulb gauge.

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 Bulb 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="Bulb" width="100" height="125"/> ...
</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.