Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

An LED gauge uses a horizontal/vertical scale to represent data values. It uses bars that change color, or marks out different regions in different colors to indicate whether data is within preset parameters. Colors to represent each region can be selected based on the application for which the gauge is being configured.

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

Creating a Simple LED Gauge

For our example, we will create a horizontal LED gauge that will indicate the fuel level.

To create this LED gauge, we will:

  • Define the lower and upper limits (also known as the minimum and maximum values) for the gauge scale. For our example, we will set the lower limit to 0 and the upper limit to 100.

  • Divide the gauge scale into three differently colored regions to indicate the fuel level.

  • Set the data value to indicate the present level of fuel. For our example, we will set the fuel level to 92.

The horizontal LED gauge thus created looks like this

FusionCharts will load here..
{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "12", "showhovereffect": "1", "origW": "400", "origH": "150", "ledSize": "3", "ledGap": "2", "manageResize": "1", "theme": "fint" }, "annotations": { "showbelow": "1", "groups": [ { "id": "indicator", "items": [ { "id": "bgRectAngle", "type": "rectangle", "alpha": "90", "radius": "1", "fillColor": "#6baa01", "x": "$gaugeCenterX - 20", "tox": "$gaugeCenterX + 20", "y": "$gaugeEndY + 25", "toy": "$gaugeEndY + 45" } ] } ] }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "45", "code": "#e44a00" }, { "minValue": "45", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "value": "92" }
{
    "chart": {
        "caption": "Fuel Level Indicator",
        "lowerLimit": "0",
        "upperLimit": "100",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": "%",
        "valueFontSize": "12",
        "showhovereffect": "1",
        "origW": "400",
        "origH": "150",
        "ledSize": "3",
        "ledGap": "2",
        "manageResize": "1",
        "theme": "fint"
    },
    "annotations": {
        "showbelow": "1",
        "groups": [
            {
                "id": "indicator",
                "items": [
                    {
                        "id": "bgRectAngle",
                        "type": "rectangle",
                        "alpha": "90",
                        "radius": "1",
                        "fillColor": "#6baa01",
                        "x": "$gaugeCenterX - 20",
                        "tox": "$gaugeCenterX + 20",
                        "y": "$gaugeEndY + 25",
                        "toy": "$gaugeEndY + 45"
                    }
                ]
            }
        ]
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            },
            {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "value": "92"
}
<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: 'hled',
    renderAt: 'chart-container',
    width: '400',
    height: '150',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Fuel Level Indicator",
            "lowerLimit": "0",
            "upperLimit": "100",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": "%",
            "valueFontSize": "12",
            "showhovereffect": "1",
            "origW": "400",
            "origH": "150",
            "ledSize": "3",
            "ledGap": "2",
            "manageResize": "1",
            "theme": "fint"
        },
        //All annotations are grouped under this element
        "annotations": {
            "showbelow": "1",
            "groups": [{
                //Each group needs a unique ID
                "id": "indicator",
                "items": [

                    {
                        "id": "bgRectAngle",
                        //Polygon item
                        "type": "rectangle",
                        "alpha": "90",
                        "radius": "1",
                        "fillColor": "#6baa01",
                        "x": "$gaugeCenterX - 20",
                        "tox": "$gaugeCenterX + 20",
                        "y": "$gaugeEndY + 25",
                        "toy": "$gaugeEndY + 45"
                    }
                ]
            }]

        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    },
    "events": {
        "drawComplete": function(evt, arg) {
            var i,
                //Annotation
                annotations = evt.sender.annotations,
                //Value
                val = evt.sender.getData(),
                //Color Range Array
                crArr = evt.sender.args.dataSource.colorRange.color;

            for (i = crArr.length - 1; i >= 0; i--) {
                //When value falls within the color range
                if (val >= crArr[i].minValue && val <= crArr[i].maxValue) {
                    annotations.update('bgRectAngle', {
                        "fillColor": crArr[i].code
                    });
                }
            }

        }
    }

}
);
    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 LED gauge:

Attribute Name Description

lowerLimit

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

upperLimit

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

lowerLimitDisplay

It is used to specify the label to be displayed with the lower limit value on the gauge scale, eg. Empty.

upperLimitDisplay

It is used to specify the label to be displayed with the upper limit value on the gauge scale, eg. Full

numberSuffix

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

Top