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:
|
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 ChartWe 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
The equivalent code in <?xml version="1.0" encoding="utf-8"?> 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. |