Creating the Gauge Components
Let's start off by creating the wind speed gauge. FusionCharts gauges can be configured by specifying data and other configurations in custom XML format. The XML is easy to understand and after creating the wind speed gauge, you would be familiar with the key concepts of FusionCharts XML. We’ll be creating an angular gauge for displaying the wind speed.
Following are the steps for creating an angular gauge:
Step 1: Creating the basic gauge
In order to create a gauge, we need to set the lower and upper limits of the gauge scale. We must also specify the initial value at which the gauge’s dial will point. Following is the XML for a basic gauge:
<!-- the root chart element and its related attributes -->
<chart lowerLimit='0' upperLimit='120'>
<-- dials tag are used to declare one or more dials -->
<dial value='0' />
As you can see, the
upperLimit attributes define the range of the angular scale. For our wind speed gauge, we have set the range of the scale from 0 to 120. We have added one dial and made it to point to 0 (by setting
value='0'). There are no restrictions to the number of dials that a gauge can have. If required we could easily have shown multiple dials by declaring multiple
<dial> elements within the
Step 2: Customizing the Gauge
Now that we have the basic gauge, lets improve upon its cosmetic and functional properties. We will be customizing the tick marks that are displayed on the gauge scale. Essentially, we are gonna set the number of major tick marks and also change its size and color. Let's take a look at the code:
<chart majorTMNumber='8' majorTMThickness='3'
majorTMColor='92c1f3' majorTMHeight='15' ...>
<dials> ... </dials>
The attributes specified in the
<chart> tag are self explanatory, but just to make things clear;
majorTMNumber specifies the number of major tick marks,
majorTMThickness specifies the thickness of major tick marks,
majorTMColor specifies the color of major tick marks and
majorTMHeight specifies the height of major tick marks.
We can also customize the dial by specifying its radius, base width etc.
<dial ... baseWidth='25' radius='65' ... />
To come up with the wind speed gauge (as depicted in the image above), we had to use some additional XML attributes. You can get the full XML of the gauge from WindSpeed_Basic.xml. If you don't understand what the attributes do, you can always refer to the AngularGauge XML reference section of the FusionCharts for Flex documentation.
Step 3: Creating the FusionWidgets object
Now that we have the XML data for the gauge, it's time to build the gauge in Flex. We begin by adding the FusionWidgets tag to our source MXML:
<ns1:FusionWidgets FCChartType="AngularGauge" FCDataURL="data/WindSpeed.xml"/>
The tag represents a generic FusionWidgets object. Now, we need to specify the type of gauge that we want to build and the XML data for the gauge. To specify the gauge type you must use the expression
FCChartType="AngularGauge". And, to specify the XML data for the gauge, you need to specify the URL or the relative path of the XML data file using
FCDataURL property. You can learn more about creating these gauges from Creating a simple gauge section of the FusionCharts for Flex documentation.