You are viewing documentation for an older version. For current documentation - click here.
Creating a simple Cylinder gauge

We will create our first cylinder gauge to depict the amount of petrol left in a fuel tanker, whose capacity is 4000 liters. We'll show a value of 2452 liters. The final gauge will look as under:

To create this gauge, our tasks can be broken down into the following segments:

  • Deciding the minimum and the maximum value that will be plotted on the gauge. The minimum value is called 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 liters and 4000 liters respectively.
  • Plotting the desired value on the gauge which will be depicted by filling up the cylinder to that level on the scale. We've set it to 2,452 liters here.
 
Data for the gauge
 
The XML/JSON for the gauge can be listed as under:
  
<chart palette="3" lowerLimit="0" upperLimit="4000" numberSuffix=" ltrs." bgColor="FFFFFF">
  <value>2452</value>
</chart>
{
  "chart": {
    "palette": "3",
    "lowerlimit": "0",
    "upperlimit": "4000",
    "numbersuffix": " ltrs.",
    "bgcolor": "FFFFFF"
  },
  "value": "2452"
}

The cylinder gauge for the above gauge will look as under:

 
See it live!
 
Explanation

First of all comes the <chart> element which is the starting element for any chart/gauge/graph that you create using FusionWidgets XT. Now we define the lower and upper limits of the gauge scale. To define the limits, we use the lowerLimit and upperLimit attributes of the <chart> element.

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

<chart palette='3' lowerLimit='0' upperLimit='4000' numberSuffix=' ltrs.' bgColor='FFFFFF'> 
{
  "chart": {
    "palette": "3",
    "lowerlimit": "0",
    "upperlimit": "4000",
    "numbersuffix": " ltrs.",
    "bgcolor": "FFFFFF"
  }
}
 
After that, we set the value of the gauge using the <value> element:
  
<value>2452</value>
"value": "2452"

For detailed explanation on JSON data format click here.

And this finishes our first cylinder gauge.