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

To take an example for thermometer gauge, here we are plotting the temperature of Antarctica. The final result would look similar to the image shown below:

The following steps involved in creating this thermometer chart are:

  • Defining the lower and upper limits for the gauge, i.e. the starting and the ending values respectively to be plotted on the gauge: -50 and 10 in this case.
  • Passing the value to be displayed to the chart. Here, -40° C is the value passed for Antarctica. This particular value is displayed in the chart. It fills up the thermometer to the appropriate mark on the tick mark scale (on the right of the thermometer).
  • Adding the ° C suffix at the end of the values.
  • Embedding the chart in your MXML application

Creating the XML

XML for the chart
The XML for the chart is given below to make you understand. We will be saving this XML file as Data.xml, file in the same location as our MXML apllication.
<chart palette='4' lowerLimit='-50' upperLimit='10' numberSuffix='° C'>
   <value>-40</value>
</chart>
 
Explanation

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

We also set the palette number and degree character as number suffix.

<chart palette='4' lowerLimit='-50' upperLimit='10' numberSuffix='° C'>
After that, we set the value of the chart using:
<value>-40</value>
And this finishes our first thermometer 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 Thermometer 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="Thermometer" width="100" height="300"/> ...
</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.