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

In our first bulb gauge, we will be plotting Attrition Rate from 0-100%. The final outcome will be:

The various tasks involved in building this gauge are:

  • Defining the minimum and maximum value which will be plotted on the gauge scale. They are termed as the lower and upper limits of the gauge scale and in this case setting them to 0 and 100 respectively will suit our purpose just fine - as we're plotting the gauge indicating a %, which cannot go below 0 or beyond 100.
  • Dividing the values into pre-determined regions:
    0-15%: Low Attrition Rate (the bulb will be shown in green when the value is in this region)
    15-35%: Medium Attrition Rate (bulb will be yellow in this region)
    35-100%: High Attrition Rate (bulb will be red in this region)
  • Passing the data value to the gauge, 12 in the above gauge. Since 12 lies in the 1st pre-determined region, i.e. of the Low Attrition rate, the entire bulb is shown in green.
 
Data for the gauge
  
<chart upperLimit="100" lowerLimit="0" numberSuffix="%">
  <colorRange>
    <color minValue="0" maxValue="15" label="Low" code="00FF00"/>
    <color minValue="15" maxValue="35" label="Medium" code="FFFF00"/>
    <color minValue="35" maxValue="100" label="High" code="FF0000"/>
  </colorRange>
  <value>12</value>
</chart>
{
  "chart": {
    "upperlimit": "100",
    "lowerlimit": "0",
    "numbersuffix": "%"
  },
  "colorrange": {
    "color": [
      {
        "minvalue": "0",
        "maxvalue": "15",
        "label": "Low",
        "code": "00FF00"
      },
      {
        "minvalue": "15",
        "maxvalue": "35",
        "label": "Medium",
        "code": "FFFF00"
      },
      {
        "minvalue": "35",
        "maxvalue": "100",
        "label": "High",
        "code": "FF0000"
      }
    ]
  },
  "value": "12"
}

The Bulb 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 number suffix character (the character which will show up at the end the number) using the numberSuffix attribute. 

<chart upperLimit='100' lowerLimit='0' numberSuffix='%'>
{
  "chart": {
    "upperlimit": "100",
    "lowerlimit": "0",
    "numbersuffix": "%"
  }
}

There are other attributes of the <chart> element which we will not be delving into now, because of this being a really basic gauge.

Next, we need to define our color range. As we had earlier seen, this gauge has 3 color ranges. To define the color range, we use the <colorRange> element, which is an immediate child of the <chart> element. Under each <colorRange> element, we place a <color> element specifying a single color range. The minValue attribute is used to define the lower limit of the color range and the maxValue attribute is used to define the upper limit of the color range. The label attribute is used to specify a name to the particular color range and the code attribute specifies the color of the range. 

<colorRange>
  <color minValue="0" maxValue="15" label="Low" code="00FF00"/>
  <color minValue="15" maxValue="35" label="Medium" code="FFFF00"/>
  <color minValue="35" maxValue="100" label="High" code="FF0000"/>
</colorRange>
"colorrange": {
    "color": [
      {
        "minvalue": "0",
        "maxvalue": "15",
        "label": "Low",
        "code": "00FF00"
      },
      {
        "minvalue": "15",
        "maxvalue": "35",
        "label": "Medium",
        "code": "FFFF00"
      },
      {
        "minvalue": "35",
        "maxvalue": "100",
        "label": "High",
        "code": "FF0000"
      }
    ]
  }
 
After that, we set the value of the gauge using the <value> element as shown under:
  
<value>12</value>
"value": "12"

For detailed explanation on JSON data format click here.

And this finishes our first bulb gauge.