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

LED Charts are like the ones used to display CPU Usage. The values displayed in an LED chart fills up the LED box to that particular level, horizontally in the horizontal LED chart and vertically in the vertical LED chart. In this sample that we are going to build, we would be using and referring to the horizontal LED throughout.

Now as a first chart, we would be building a sound meter to show the sound produced by a particular equipment on a scale on 0-120dB. The final result 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, the limits are set to 0 and 120 respectively. The limits are displayed at the starting and ending points of the gauge scale as in the image above.
  • Dividing the gauge scale into 3 regions: the ones shown in red, yellow, and green that convey the various sound levels to be in the faint, moderate, or loud bands respectively.
  • Filling up the LED to indicate the required value, 102 in this case.
  • 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
The XML for this chart can be listed as under:
<chart lowerLimit='0' upperLimit='120' lowerLimitDisplay='Low' upperLimitDisplay='High' palette='1' numberSuffix='dB' chartRightMargin='20' >
   <colorRange>
      <color minValue='0' maxValue='60' code='FF0000' />
      <color minValue='60' maxValue='90' code='FFFF00' />
      <color minValue='90' maxValue='120' code='00FF00' />
   </colorRange>
   <value>102</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 the upperLimit attributes of the <chart> element. We've notified the chart to display lower limit text as Bad and upper limit text as Good.

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

<chart lowerLimit='0' upperLimit='120' lowerLimitDisplay='Low' upperLimitDisplay='High' palette='1' numberSuffix='dB' chartRightMargin='20' >

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

Next, we need to define the 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='60' code='FF0000' />
   <color minValue='60' maxValue='90' code='FFFF00' />
   <color minValue='90' maxValue='120' code='00FF00' />
</colorRange>
Now that we've the color ranges in place, we need to set the value for the chart. We do this by setting:
<value>102</value>

Bingo!! you just made your first LED gauge. Next, we'll see how to customize the various facets of this chart.

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 HLED 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="HLED" width="355" height="105"/> ...
</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.