FusionCharts for Flex > Creating Widgets > Cylinder Gauge > Creating a Gauge

We will create our first cylinder gauge to depict the amount of petrol left in a fuel tanker. The capacity of which is 4000 litres. We'll display a value of 2452 litres. The final gauge would look similar to the image shown below:

The following tasks involved in building this chart are:

  • Deciding the minimum and the maximum value that would be plotted on the chart. The minimum value is termed as the lower limit and the maximum value is termed as the upper limit. The limits are displayed on the vertical scale to the left/right of the cylinder. Since we are plotting the amount of fuel left in a tanker, the lower and upper limits have been set to 0 litres and 4000 litres respectively.
  • Plotting the desired value on the chart, which would be depicted by filling up the cylinder to that level on the scale. Here, we've set it to 2,452 litres.
  • Embedding the chart in your MXML application.

Creating the XML

XML for the chart
The XML for the chart can be listed as under:
<chart palette='3' lowerLimit='0' upperLimit='4000' numberSuffix=' ltrs.' bgColor='FFFFFF'>
   <value>2452</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 lowerLimit and upperLimit attributes of the <chart> element.

We also set the palette number and number suffix as ' ltrs.'

<chart palette='3' lowerLimit='0' upperLimit='4000' numberSuffix=' ltrs.' bgColor='FFFFFF'>
We also set the value of the chart using:
<value>2452</value>
And this finishes our first cylinder 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 Cylinder 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="Cylinder"/> ...
</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.