Configuring LED Gauge | FusionCharts

FusionCharts Suite XT allows you to configure various cosmetic and functional properties of LED gauges.

In this section, you will be shown how you can:

Configuring the LED Gauge Background Color

A LED gauge with the background color configured looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "12", "showhovereffect": "1", "tickMarkDistance": "10", "gaugeFillColor": "#444444", "theme": "fint" }, "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",
        "tickMarkDistance": "10",
        "gaugeFillColor": "#444444",
        "theme": "fint"
    },
    "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",
            "tickMarkDistance": "10",

            //Gauge fill color
            "gaugeFillColor": "#444444",

            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    }
}
);
    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 attribute used to configure the background color:

Attribute Name	Description
`gaugeFillColor`	It is used to specify the hex code for the color that will applied to the gauge background, e.g. #666666.

Using a Single Color for the LED Fill and Background

When you divide the LED scale into color ranges, the LED bars in each zone take up the fill color of that color range. You can, however, render the LED background using a single fill color - the color of the range to which the current value belongs.

A LED gauge rendered with a single color for the LED fill and background looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Battery Charge Remaining", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "12", "origW": "300", "origH": "200", "ledGap": "0", "showhovereffect": "1", "useSameFillColor": "1", "useSameFillBgColor": "1", "chartBottomMargin": "20", "theme": "fint" }, "annotations": { "showbelow": "1", "groups": [ { "id": "indicator", "items": [ { "id": "bgRectAngle", "type": "rectangle", "radius": "5", "fillColor": "#333333", "x": "$gaugeEndX - 10", "tox": "$gaugeEndX + 12", "y": "$gaugeCenterY-20", "toy": "$gaugeCenterY + 20" } ] } ] }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "45", "code": "#e44a00" }, { "minValue": "45", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "value": "50" }

{
    "chart": {
        "caption": "Battery Charge Remaining",
        "lowerLimit": "0",
        "upperLimit": "100",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": "%",
        "valueFontSize": "12",
        "origW": "300",
        "origH": "200",
        "ledGap": "0",
        "showhovereffect": "1",
        "useSameFillColor": "1",
        "useSameFillBgColor": "1",
        "chartBottomMargin": "20",
        "theme": "fint"
    },
    "annotations": {
        "showbelow": "1",
        "groups": [
            {
                "id": "indicator",
                "items": [
                    {
                        "id": "bgRectAngle",
                        "type": "rectangle",
                        "radius": "5",
                        "fillColor": "#333333",
                        "x": "$gaugeEndX - 10",
                        "tox": "$gaugeEndX + 12",
                        "y": "$gaugeCenterY-20",
                        "toy": "$gaugeCenterY + 20"
                    }
                ]
            }
        ]
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            },
            {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "value": "50"
}

<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',
    id: 'myHLED',
    width: '300',
    height: '200',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Battery Charge Remaining",
            "lowerLimit": "0",
            "upperLimit": "100",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": "%",
            "valueFontSize": "12",
            "origW": "300",
            "origH": "200",
            "ledGap": "0",
            "showhovereffect": "1",
            //Single Fill color
            "useSameFillColor": "1",
            "useSameFillBgColor": "1",

            "chartBottomMargin": "20",
            "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",
                        "radius": "5",
                        "fillColor": "#333333",
                        "x": "$gaugeEndX - 10",
                        "tox": "$gaugeEndX + 12",
                        "y": "$gaugeCenterY-20",
                        "toy": "$gaugeCenterY + 20"
                    }
                ]
            }]

        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "50"
    },
    "events": {
        "renderComplete": function(evt, arg) {
            var chargePercent = 50,
                flag = 0,
                count = 0;
                evt.sender.chargeInterval = setInterval(function() {

                    if (flag === 0) {
                        count++;
                        if (count > 2) {
                            chargePercent -= 5;
                            count = 0;
                        }

                        if (chargePercent === 5) {
                            flag = 1;
                        }
                    } else {
                        chargePercent += 5;
                        if (chargePercent === 100) {
                            flag = 0;
                        }

                    }
                    evt.sender.feedData("&value=" + chargePercent);
                }, 2000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.chargeInterval);
        }
    }

}
);
    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 apply a single color for the LED fill and the LED background::

Attribute Name	Description
`useSameFillColor`	It is used to specify whether a single fill color - the color of the range to which the current value belongs - will be applied to the activated LED bars. Setting this attribute to `1` will apply the same fill color, setting it to `0` (default) will apply the color specific to that range.
`useSameFillBgColor`	It is used to specify whether a single color - the color of the range to which the current value belongs - will be applied to the entire LED background. Setting this attribute to `1` will apply the same fill color, setting it to `0` (default) will apply the color specific to that range.

Showing/Hiding the Gauge Border

A LED gauge rendered with the border hidden looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "12", "showhovereffect": "1", "tickMarkDistance": "10", "showGaugeBorder": "0", "theme": "fint" }, "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",
        "tickMarkDistance": "10",
        "showGaugeBorder": "0",
        "theme": "fint"
    },
    "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",
            "tickMarkDistance": "10",

            //Gauge Configuration
            "showGaugeBorder": "0",

            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    }
}
);
    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 attribute used to show/hide the LED gauge border:

Attribute Name	Description
`showGaugeBorder`	It is used to specify whether the border for the LED gauge will be shown. Setting this attribute to 0 hides the gauge border, setting it to 1 (default) shows it.

Customizing Gauge Border Properties

A LED gauge rendered with a customized border looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "12", "showhovereffect": "1", "tickMarkDistance": "10", "showGaugeBorder": "1", "gaugeBorderColor": "#AAAAAA", "gaugeBorderThickness": "7", "gaugeBorderAlpha": "70", "theme": "fint" }, "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",
        "tickMarkDistance": "10",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "#AAAAAA",
        "gaugeBorderThickness": "7",
        "gaugeBorderAlpha": "70",
        "theme": "fint"
    },
    "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",
            "tickMarkDistance": "10",
            //Gauge Configuration
            "showGaugeBorder": "1",
            "gaugeBorderColor": "#AAAAAA",
            "gaugeBorderThickness": "7",
            "gaugeBorderAlpha": "70",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    }
}
);
    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 customize the gauge border:

Attribute Name	Description
`gaugeBorderColor`	It is used to specify the hex code of the color that will be used to render the entire border of the gauge, e.g. #111111.
`gaugeBorderThickness`	It is used to specify the thickness, in pixels, for the gauge border, e.g. 5.
`gaugeBorderAlpha`	It is used to specify the transparency for the gauge border. This attribute takes values 0 (transparent) and 100 (opaque), e.g. 40.

Configuring the LED Bar Size and Gap

By default, the gauge determines the bar size and the gap automatically, based on the data provided by you. However, you can explicitly specify the bar size and gap.

A LED gauge configured for the LED bar size and gap looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "12", "showhovereffect": "1", "ledSize": "5", "ledGap": "1", "ChartBottomMargin": "20", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "45" }, { "minValue": "45", "maxValue": "75" }, { "minValue": "75", "maxValue": "100" } ] }, "value": "92" }

{
    "chart": {
        "caption": "Fuel Level Indicator",
        "lowerLimit": "0",
        "upperLimit": "100",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": "%",
        "valueFontSize": "12",
        "showhovereffect": "1",
        "ledSize": "5",
        "ledGap": "1",
        "ChartBottomMargin": "20",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "45"
            },
            {
                "minValue": "45",
                "maxValue": "75"
            },
            {
                "minValue": "75",
                "maxValue": "100"
            }
        ]
    },
    "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",
            /* LED Size And Gap */
            "ledSize": "5",
            "ledGap": "1",
            "ChartBottomMargin": "20",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45"
            }, {
                "minValue": "45",
                "maxValue": "75"
            }, {
                "minValue": "75",
                "maxValue": "100"
            }]
        },
        "value": "92"
    }
}
);
    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 configure the LED bar size and gap:

Attribute Name	Description
`ledSize`	It is used to specify the size, in pixels, of the LED bar, e.g. 5.
`ledGap`	It is used to specify the gap, in pixels, between consecutive LED bars,e.g. 3.

To make the LEDs appear continuous, you can set ledGap to 0.

Showing/Hiding Chart Value

An LED gauge rendered with the chart value hidden looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "14", "showhovereffect": "1", "showValue": "0", "ledSize": "4", "chartBottomMargin": "20", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "45" }, { "minValue": "45", "maxValue": "75" }, { "minValue": "75", "maxValue": "100" } ] }, "value": "92" }

{
    "chart": {
        "caption": "Fuel Level Indicator",
        "lowerLimit": "0",
        "upperLimit": "100",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": "%",
        "valueFontSize": "14",
        "showhovereffect": "1",
        "showValue": "0",
        "ledSize": "4",
        "chartBottomMargin": "20",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "45"
            },
            {
                "minValue": "45",
                "maxValue": "75"
            },
            {
                "minValue": "75",
                "maxValue": "100"
            }
        ]
    },
    "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": "14",
            "showhovereffect": "1",
            /* Hiding Value */
            "showValue": "0",
            "ledSize": "4",
            "chartBottomMargin": "20",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45"
            }, {
                "minValue": "45",
                "maxValue": "75",
            }, {
                "minValue": "75",
                "maxValue": "100"
            }]
        },
        "value": "92"
    }
}
);
    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 attribute used to show/hide the chart value:

Attribute Name	Description
`showValue`	It is used to specify whether the current data value, or the chart value, should be shown. Setting this attribute to `0` hides the chart value, setting it to `1` (default) shows it.

Showing/Hiding Tick Marks and Tick Values

An LED gauge with the tick marks and tick values hidden looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "showTickMarks": "0", "showTickValues": "0", "chartBottomMargin": "20", "ledSize": "4", "theme": "fint" }, "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",
        "numberSuffix": "%",
        "showTickMarks": "0",
        "showTickValues": "0",
        "chartBottomMargin": "20",
        "ledSize": "4",
        "theme": "fint"
    },
    "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",
            "numberSuffix": "%",

            /* Tick Marks and Values configuration */
            "showTickMarks": "0",
            "showTickValues": "0",

            "chartBottomMargin": "20",
            "ledSize": "4",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    }
}
);
    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 show/hide tick marks and tick values:

Attribute Name	Description
`showTickMarks`	It is used to specify whether tick marks will be shown for the LED gauge. Setting this attribute to `0` hides the tick marks, setting it to `1` (default) shows them.
`showTickValues`	It is used to specify whether tick values will be shown for the LED gauge. Setting this attribute to `0` hides the tick values, setting it to `1` (default) shows them.

Configuring Tick Marks and Tick Values

By default, the tick marks and values are placed below the gauge in the horizontal LED gauge and to the right in the vertical LED gauge. However, you can explicitly configure the position of tick marks and tick values as required.

You can also configure the number of tick marks, set the tick marks and tick values distance, and skip the tick values.

A LED gauge with the tick marks and tick values configured looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "adjustTM": "0", "ticksBelowGauge": "0", "tickMarkDistance": "5", "tickValueDistance": "2", "majorTMNumber": "9", "majorTMHeight": "12", "minorTMNumber": "4", "minorTMHeight": "7", "tickValueStep": "2", "chartBottomMargin": "20", "ledSize": "4", "theme": "fint" }, "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",
        "numberSuffix": "%",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "adjustTM": "0",
        "ticksBelowGauge": "0",
        "tickMarkDistance": "5",
        "tickValueDistance": "2",
        "majorTMNumber": "9",
        "majorTMHeight": "12",
        "minorTMNumber": "4",
        "minorTMHeight": "7",
        "tickValueStep": "2",
        "chartBottomMargin": "20",
        "ledSize": "4",
        "theme": "fint"
    },
    "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",
            "numberSuffix": "%",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",

            /* Tick Marks auto adjustment off */
            "adjustTM": "0",

            /* Positions */
            "ticksBelowGauge": "0",
            "tickMarkDistance": "5",
            "tickValueDistance": "2",

            /* Major Tick Marks */
            "majorTMNumber": "9",
            "majorTMHeight": "12",

            /* Minor Tick Marks */
            "minorTMNumber": "4",
            "minorTMHeight": "7",

            /* Tick value step */
            "tickValueStep": "2",

            "chartBottomMargin": "20",
            "ledSize": "4",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    }
}
);
    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 configure tick marks and tick values:

Attribute Name	Description
`ticksBelowGauge`	It is used to specify whether the tick marks and values will be rendered below or above the gauge. Setting this attribute to `0` renders the tick marks and values above the gauge, setting it to `1` (default) renders them below the gauge. This attribute is applicable only to the horizontal LED gauge.
`ticksOnRight`	It is used to specify whether the tick marks and values will be rendered to the left or the right. Setting this attribute to `0` renders the tick marks and values on the left, setting it to `1` (default) renders them on the right. This attribute is applicable only to the vertical LED gauge.
`tickMarkDistance`	It is used to specify the distance, in pixels, between the tick marks and the gauge scale, e.g. 10.
`tickValueDistance`	It is used to specify the distance, in pixels, between the tick marks and the tick values, e.g. 5.
`adjustTM`	It is used to specify whether the number of major tick marks should be automatically adjusted to ensure better distribution of the chart scale. Setting this attribute to `0` disables automatic adjustment of tick marks, setting it to `1` (default) enables it.
`majorTMNumber`	It is used to specify the number of major tick marks to be rendered, e.g. 12.
`majorTMHeight`	It is used to specify the height of major tick marks, e.g., 5
`minorTMNumber`	It is used to specify the number of minor tick marks to be rendered, e.g. 4.
`minorTMHeight`	It is used to specify the height of minor tick marks, e.g., 7.
`tickValueStep`	If you need to show only every n-th tick value , this attribute is used to specify that value.

FusionCharts Suite XT also allows you to configure the cosmetics of major and minor tick marks.

A LED gauge rendered with customized major and minor tick marks looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "majorTMNumber": "5", "minorTMNumber": "5", "tickMarkDistance": "5", "majorTMColor": "#0000CC", "majorTMAlpha": "60", "majorTMThickness": "2", "minorTMColor": "#0000CC", "minorTMAlpha": "30", "minorTMThickness": "2", "chartBottomMargin": "20", "ledSize": "4", "theme": "fint" }, "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",
        "numberSuffix": "%",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "majorTMNumber": "5",
        "minorTMNumber": "5",
        "tickMarkDistance": "5",
        "majorTMColor": "#0000CC",
        "majorTMAlpha": "60",
        "majorTMThickness": "2",
        "minorTMColor": "#0000CC",
        "minorTMAlpha": "30",
        "minorTMThickness": "2",
        "chartBottomMargin": "20",
        "ledSize": "4",
        "theme": "fint"
    },
    "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: '180',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Fuel Level Indicator",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",

            /* Tick Limits Display Values */
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",

            "majorTMNumber": "5",
            "minorTMNumber": "5",
            "tickMarkDistance": "5",

            /* Major Tick Marks */
            "majorTMColor": "#0000CC",
            "majorTMAlpha": "60",
            "majorTMThickness": "2",


            /* Minor Tick Marks */
            "minorTMColor": "#0000CC",
            "minorTMAlpha": "30",
            "minorTMThickness": "2",



            "chartBottomMargin": "20",
            "ledSize": "4",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    }
}
);
    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 configure the major and minor tick marks:

Attribute Name	Description
`majorTMColor`	It is used to specify the hex code of the color that will be used to render the major tick marks, e.g. #666666.
`majorTMAlpha`	It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50.
`majorTMThickness`	It is used to specify the thickness, in pixels, of the major tick marks, e.g. 5.
`minorTMColor`	It is used to specify the hex code of the color that will be used to render the minor tick marks, e.g. #AAAAAA.
`minorTMAlpha`	It is used to specify the transparency of the minor tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50.
`minorTMThickness`	It is used to specify the thickness, in pixels, of the minor tick marks, e.g. 5.

Configuring Hover Effects

FusionCharts Suite XT allows you to display hover effects for the gauge.

An LED gauge configured for hover effects looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

{ "chart": { "caption": "Fuel Level Indicator", "lowerLimit": "0", "upperLimit": "100", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": "%", "valueFontSize": "12", "showhovereffect": "1", "theme": "fint", "ledSize": "4" }, "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",
        "theme": "fint",
        "ledSize": "4"
    },
    "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",
            //Add hover effect
            "showhovereffect": "1",

            "theme": "fint",
            "ledSize": "4"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "45",
                "code": "#e44a00"
            }, {
                "minValue": "45",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "value": "92"
    }
}
);
    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 attribute used to enable the hover effect for the LED gauge:

Attribute Name	Description
`showHoverEffect`	It is used to specify whether the hover effect will be enabled for the LED gauge. Setting this attribute to `1` enables the hover effect, setting it to `0` (default) disables it.