Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

The linear gauge is used to display a specific data point over a horizontal scale using a slider component - also called as the pointer - to indicate the data value.

In this section you will be shown how you can create a simple linear gauge.

Creating a Simple Linear Gauge

For our example, we will create a linear gauge that will indicate the server utilization at food.hsm.com.

To create a simple linear gauge, you need to:

  • Define the lower and upper limits (also known as the minimum and maximum values) for the gauge scale. For our example, because we are plotting the server utilization in percentage, the lower limit will be 0 and the upper limit will be 100.

  • Divide the gauge scale into three regions that indicate the three utilization limits for the server - low, moderate, and high. This is shown in the table below:

Range Server Utilization Level Color for the Range

0-35%

Low

Green e.g. #8cba02

35-70%

Moderate

Yellow e.g. #f6bd11

70-100%

High

Red e.g. #ff6650

  • Decide a data value for the pointer to point to. For our example, we will set the data value to 75.

The linear gauge thus created to show the server utilization, in percentage, at food.hsm.com looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "subcaption": "food.hsm.com", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] }, "trendPoints": { "point": [ { "startValue": "70", "displayValue": " ", "dashed": "1", "showValues": "0" }, { "startValue": "85", "displayValue": " ", "dashed": "1", "showValues": "0" }, { "startValue": "70", "endValue": "85", "displayValue": " ", "alpha": "40" } ] }, "annotations": { "origw": "400", "origh": "190", "autoscale": "1", "groups": [ { "id": "range", "items": [ { "id": "rangeBg", "type": "rectangle", "x": "$chartCenterX-115", "y": "$chartEndY-35", "tox": "$chartCenterX +115", "toy": "$chartEndY-15", "fillcolor": "#0075c2" }, { "id": "rangeText", "type": "Text", "fontSize": "11", "fillcolor": "#ffffff", "text": "Recommended Utilization Range : 70% - 85%", "x": "$chartCenterX", "y": "$chartEndY-25" } ] } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "subcaption": "food.hsm.com",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "40",
        "valueFontSize": "11",
        "valueFontBold": "0"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    },
    "trendPoints": {
        "point": [
            {
                "startValue": "70",
                "displayValue": " ",
                "dashed": "1",
                "showValues": "0"
            },
            {
                "startValue": "85",
                "displayValue": " ",
                "dashed": "1",
                "showValues": "0"
            },
            {
                "startValue": "70",
                "endValue": "85",
                "displayValue": " ",
                "alpha": "40"
            }
        ]
    },
    "annotations": {
        "origw": "400",
        "origh": "190",
        "autoscale": "1",
        "groups": [
            {
                "id": "range",
                "items": [
                    {
                        "id": "rangeBg",
                        "type": "rectangle",
                        "x": "$chartCenterX-115",
                        "y": "$chartEndY-35",
                        "tox": "$chartCenterX +115",
                        "toy": "$chartEndY-15",
                        "fillcolor": "#0075c2"
                    },
                    {
                        "id": "rangeText",
                        "type": "Text",
                        "fontSize": "11",
                        "fillcolor": "#ffffff",
                        "text": "Recommended Utilization Range : 70% - 85%",
                        "x": "$chartCenterX",
                        "y": "$chartEndY-25"
                    }
                ]
            }
        ]
    }
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge',
    width: '400',
    height: '190',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "subcaption": "food.hsm.com",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "40",
            "valueFontSize": "11",
            "valueFontBold": "0"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        },
        "trendPoints": {
            "point": [
                //Trendpoint
                {
                    "startValue": "70",
                    "displayValue": " ",
                    "dashed": "1",
                    "showValues": "0"
                }, {
                    "startValue": "85",
                    "displayValue": " ",
                    "dashed": "1",
                    "showValues": "0"
                },
                //Trendzone
                {
                    "startValue": "70",
                    "endValue": "85",
                    "displayValue": " ",
                    "alpha": "40"
                }
            ]
        },
        "annotations": {
            "origw": "400",
            "origh": "190",
            "autoscale": "1",
            "groups": [{
                "id": "range",
                "items": [{
                    "id": "rangeBg",
                    "type": "rectangle",
                    "x": "$chartCenterX-115",
                    "y": "$chartEndY-35",
                    "tox": "$chartCenterX +115",
                    "toy": "$chartEndY-15",
                    "fillcolor": "#0075c2"
                }, {
                    "id": "rangeText",
                    "type": "Text",
                    "fontSize": "11",
                    "fillcolor": "#ffffff",
                    "text": "Recommended Utilization Range : 70% - 85%",
                    "x": "$chartCenterX",
                    "y": "$chartEndY-25"
                }]
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to create a simple linear gauge:

Attribute Name Description

lowerLimit

It is used to specify the lower limit, or the minimum value, of the gauge scale, eg. 0

upperLimit

It is used to specify the upper limit, or the maximum value, of the gauge scale, eg. 100

numberSuffix

It is used to specify the character which will be appended to the end of the number, eg. %.

minValue

It is used to specify the minimum value for a color range, e.g. 35. This attribute belongs to the color object, which in turn belongs to the colorRange object.

maxValue

It is used to specify the maximum value for a color range, e.g. 70. This attribute belongs to the color object, which in turn belongs to the colorRange object.

label

It is used to specify the label that will be rendered for a color range. This attribute belongs to the color object, which in turn belongs to the colorRange object.

value

It is used to specify the current pointer value, e.g. 75. This attribute belongs to the pointer object, which in turn belongs to the pointers object.

Top