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

As an example for thermometer gauge, we will plot the temperature of Antarctica. The final result will look something as under:
 

The various steps involved in creating this thermometer gauge 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 gauge, -40° C for Antarctica . This value is displayed in the gauge by filling up the thermometer to this mark on the tick mark scale (on the right of the thermometer).
  • Adding the ° C suffix at the end of the values.
 
Data for the gauge
 
The XML/JSON for the gauge can be listed as under:
  
<chart palette="4" lowerLimit="-50" upperLimit="10" numberSuffix="° C">
  <value>-40</value>
</chart>
{
  "chart": {
    "palette": "4",
    "lowerlimit": "-50",
    "upperlimit": "10",
    "numbersuffix": "� C"
  },
  "value": "-40"
}

The thermometer gauge for the above data 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 and degree character as number suffix using the palette and numberSuffix attributes.

 
<chart palette='4' lowerLimit='-50' upperLimit='10' numberSuffix='° C'>
{
  "chart": {
    "palette": "4",
    "lowerlimit": "-50",
    "upperlimit": "10",
    "numbersuffix": "� C"
  }
}
 
After that, we set the value of the gauge using the <value> element as shown under:
  
<value>-40</value> 
"value": "-40"

For detailed explanation on JSON data format click here.

And this finishes our first thermometer gauge.