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

As a first linear gauge, we will be plotting the value of Customer Satisfaction Survey, on a scale of 0 to 100%. The final result will look something as under:

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. The limits are displayed at the starting and ending points of the circular scale as in the image above.
  • Dividing the gauge scale into 3 regions, the ones shown in red, yellow and green above which convey the Customer Satisfaction Index to be in the bad, satisfactory and good regions respectively.
  • Pointing the pointer of the linear gauge to a certain value, 92 in the above image.
 
Data for the gauge

Since we're plotting customer satisfaction index for a fictional company, let us first define the scales for measuring this index. The scales will look as under in a tabular form:

Range
What it means?
Color to be represented in
0-75%
Bad customer satisfaction
Red
75-90%
Moderate customer satisfaction
Yellow
90-100%
Good customer satisfaction
Green
 
The XML/JSON for the entire gauge can be listed as under:
  
<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="Bad" upperLimitDisplay="Good" palette="1" numberSuffix="%" chartRightMargin="20">  
    <colorRange>    
        <color minValue="0" maxValue="75" code="FF654F" label="Bad"/>    
        <color minValue="75" maxValue="90" code="F6BD0F" label="Moderate"/>    
        <color minValue="90" maxValue="100" code="8BBA00" label="Good"/>  
    </colorRange>  
    <pointers> 
        <pointer value="92"/> 
    </pointers>
</chart>
{
  "chart": {
    "lowerlimit": "0",
    "upperlimit": "100",
    "lowerlimitdisplay": "Bad",
    "upperlimitdisplay": "Good",
    "palette": "1",
    "numbersuffix": "%",
    "chartrightmargin": "20"
  },
  "colorrange": {
    "color": [
      {
        "minvalue": "0",
        "maxvalue": "75",
        "code": "FF654F",
        "label": "Bad"
      },
      {
        "minvalue": "75",
        "maxvalue": "90",
        "code": "F6BD0F",
        "label": "Moderate"
      },
      {
        "minvalue": "90",
        "maxvalue": "100",
        "code": "8BBA00",
        "label": "Good"
      }
    ]
  },
  "pointers": {
    "pointer": [
      {
        "value": "92"
      }
    ]
  }
}

The Linear gauge for the above data will look as under:

 
See it live!
 
Explanation

First 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've asked the gauge to show lower limit text as Bad and upper limit text as Good.

We also set the palette number using the palette attribute and number suffix (the character which will show up at the end of end number) using the numberSuffix attribute. 

<chart lowerLimit='0' upperLimit='100' lowerLimitDisplay='Bad' upperLimitDisplay='Good' palette='1' numberSuffix='%' chartRightMargin='20'>
{
  "chart": {
    "lowerlimit": "0",
    "upperlimit": "100",
    "lowerlimitdisplay": "Bad",
    "upperlimitdisplay": "Good",
    "palette": "1",
    "numbersuffix": "%",
    "chartrightmargin": "20"
  }
}

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="75" code="FF654F" label="Bad"/>  
    <color minValue="75" maxValue="90" code="F6BD0F" label="Moderate"/>  
    <color minValue="90" maxValue="100" code="8BBA00" label="Good"/>
</colorRange>
"colorrange": {
    "color": [
      {
        "minvalue": "0",
        "maxvalue": "75",
        "code": "FF654F",
        "label": "Bad"
      },
      {
        "minvalue": "75",
        "maxvalue": "90",
        "code": "F6BD0F",
        "label": "Moderate"
      },
      {
        "minvalue": "90",
        "maxvalue": "100",
        "code": "8BBA00",
        "label": "Good"
      }
    ]
  }

Now that we've the color ranges in place, we need the pointer to point to the desired value (92% in our case). We create the pointer using the <pointers><pointer .../></pointers> elements, as shown below:

 
<pointers>  
 <pointer value="92"/>
</pointers>
 "pointers": {
    "pointer": [
      {
        "value": "92"
      }
    ]
  }

You can customize the pointer's visual properties using the attributes of <pointer> element, as explained in next section.

FusionWidgets XT linear gauge allows you to have multiple pointers on a single gauge. To have multiple pointers, just keep on adding <pointer...> element within the <pointers> element with the required attributes.

For detailed explanation on JSON data format click here.

And with this, you've created your first linear gauge.