Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT allows you to customize several cosmetic and functional properties for the thermometer gauge.

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

Customizing the Gauge Fill

A thermometer gauge with the gauge fill customized looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "showhovereffect": "1", "decimals": "1", "gaugeFillColor": "#008ee4", "gaugeFillAlpha": "70", "thmOriginX": "100", "theme": "fint", "chartBottomMargin": "20" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "showhovereffect": "1",
        "decimals": "1",
        "gaugeFillColor": "#008ee4",
        "gaugeFillAlpha": "70",
        "thmOriginX": "100",
        "theme": "fint",
        "chartBottomMargin": "20"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-1',
    width: '240',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "showhovereffect": "1",
            "decimals": "1",

            //Customizing gauge fill
            "gaugeFillColor": "#008ee4",
            "gaugeFillAlpha": "70",

            "thmOriginX": "100",
            "theme": "fint",
            "chartBottomMargin": "20"
        },
        "value": "-6"
    },
    "events": {
        "rendered": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 fill:

Attribute Name Description

gaugeFillColor

It is used to specify the hex code of the color that will be used as the fill color for the thermometer gauge, e.g. #008ee4.

gaugeFillAlpha

It is used to specify the transparency for the gauge fill. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50.

Customizing the Gauge Borders

A thermometer gauge with the borders customized looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "showhovereffect": "1", "decimals": "1", "gaugeFillColor": "#008ee4", "gaugeFillAlpha": "70", "showGaugeBorder": "1", "gaugeBorderColor": "#008ee4", "gaugeBorderThickness": "2", "gaugeBorderAlpha": "60", "thmOriginX": "100", "theme": "fint", "chartBottomMargin": "20" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "showhovereffect": "1",
        "decimals": "1",
        "gaugeFillColor": "#008ee4",
        "gaugeFillAlpha": "70",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "#008ee4",
        "gaugeBorderThickness": "2",
        "gaugeBorderAlpha": "60",
        "thmOriginX": "100",
        "theme": "fint",
        "chartBottomMargin": "20"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-2',
    width: '240',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "showhovereffect": "1",
            "decimals": "1",
            "gaugeFillColor": "#008ee4",
            "gaugeFillAlpha": "70",

            //Customizing gauge border
            "showGaugeBorder": "1",
            "gaugeBorderColor": "#008ee4",
            "gaugeBorderThickness": "2",
            "gaugeBorderAlpha": "60",

            "thmOriginX": "100",
            "theme": "fint",
            "chartBottomMargin": "20"
        },
        "value": "-6"
    },
    "events": {
        "initialized": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 thermometer gauge border :

Attribute Name Description

showGaugeBorder

It is used to specify whether the gauge border will be shown or hidden. Setting this attribute to 0 will hide the gauge border, setting it to 1 (default) will show the border.

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 between 0 (transparent) and 100 (opaque), e.g. 50.

Setting the Thermometer Radius and Height Manually

By default, the gauge automatically calculates the best thermometer radius and height based on the data you provide. You can, however, explicitly set the thermometer radius and height.

A thermometer gauge with the thermometer radius and height set manually looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": "Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "decimals": "1", "showhovereffect": "1", "gaugeFillColor": "#008ee4", "thmBulbRadius": "35", "thmHeight": "150", "thmOriginX": "100", "theme": "fint", "chartBottomMargin": "20" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": "Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "decimals": "1",
        "showhovereffect": "1",
        "gaugeFillColor": "#008ee4",
        "thmBulbRadius": "35",
        "thmHeight": "150",
        "thmOriginX": "100",
        "theme": "fint",
        "chartBottomMargin": "20"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-3',
    width: '240',
    height: '330',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": "Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "decimals": "1",
            "showhovereffect": "1",
            "gaugeFillColor": "#008ee4",
            //Thermometer height and bulb radious configuration
            "thmBulbRadius": "35",
            "thmHeight": "150",
            "thmOriginX": "100",
            "theme": "fint",
            "chartBottomMargin": "20"
        },
        "value": "-6"
    },
    "events": {
        "initialized": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 manually set the thermometer radius and height:

Attribute Name Description

thmBulbRadius

It is used to specify the thermometer bulb radius, in pixels, e.g 35.

thmHeight

It is used to specify the height of the scale for the thermometer, in pixels, e.g 180.

Showing/Hiding the Temperature Value

By default, the current temperature value is shown below the thermometer gauge. However, you can choose to hide this value.

A thermometer gauge rendered with the temperature value hidden looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "decimals": "1", "showhovereffect": "1", "gaugeFillColor": "#008ee4", "showValue": "0", "thmOriginX": "100", "theme": "fint", "chartBottomMargin": "20" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "decimals": "1",
        "showhovereffect": "1",
        "gaugeFillColor": "#008ee4",
        "showValue": "0",
        "thmOriginX": "100",
        "theme": "fint",
        "chartBottomMargin": "20"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-4',
    width: '240',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "decimals": "1",
            "showhovereffect": "1",
            "gaugeFillColor": "#008ee4",
            //Hide the value
            "showValue": "0",
            "thmOriginX": "100",
            "theme": "fint",
            "chartBottomMargin": "20"
        },
        "value": "-6"
    },
    "events": {
        "rendered": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 gauge value:

Attribute Name Description

showValue

It is used to specify whether the temperature value will be shown with the gauge. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show it.

Showing/Hiding Tick Marks and Tick Values

A thermometer gauge with the tick marks and tick values hidden looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "decimals": "1", "showhovereffect": "1", "gaugeFillColor": "#008ee4", "thmOriginX": "100", "theme": "fint", "chartBottomMargin": "20", "showTickMarks": "0", "showTickValues": "0" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "decimals": "1",
        "showhovereffect": "1",
        "gaugeFillColor": "#008ee4",
        "thmOriginX": "100",
        "theme": "fint",
        "chartBottomMargin": "20",
        "showTickMarks": "0",
        "showTickValues": "0"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-5',
    width: '240',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "decimals": "1",
            "showhovereffect": "1",
            "gaugeFillColor": "#008ee4",
            "thmOriginX": "100",
            "theme": "fint",
            "chartBottomMargin": "20",

            //Configuring Tick Properties
            "showTickMarks": "0",
            "showTickValues": "0",


        },
        "value": "-6"
    },
    "events": {
        "rendered": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 the tick marks and values:

Attribute Name Description

showTickMarks

It is used to specify whether the tick marks will be shown on the gauge scale. Setting this attribute to 0 will hide the tick marks, setting it to 1 (default) will show them.

showTickValues

It is used to specify whether the tick values will be shown on the gauge scale. Setting this attribute to 0 will hide the tick values, setting it to 1 (default) will show them.

Configuring Tick Marks and Tick Values

A thermometer gauge rendered with customized tick marks and tick values looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "decimals": "1", "showhovereffect": "1", "gaugeFillColor": "#008ee4", "thmOriginX": "100", "theme": "fint", "chartBottomMargin": "20", "adjustTM": "1", "ticksOnRight": "0", "tickMarkDistance": "5", "tickValueDistance": "2", "majorTMNumber": "9", "majorTMHeight": "12", "minorTMNumber": "4", "minorTMHeight": "7", "tickValueStep": "2" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "decimals": "1",
        "showhovereffect": "1",
        "gaugeFillColor": "#008ee4",
        "thmOriginX": "100",
        "theme": "fint",
        "chartBottomMargin": "20",
        "adjustTM": "1",
        "ticksOnRight": "0",
        "tickMarkDistance": "5",
        "tickValueDistance": "2",
        "majorTMNumber": "9",
        "majorTMHeight": "12",
        "minorTMNumber": "4",
        "minorTMHeight": "7",
        "tickValueStep": "2"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-6',
    width: '240',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "decimals": "1",
            "showhovereffect": "1",
            "gaugeFillColor": "#008ee4",
            "thmOriginX": "100",
            "theme": "fint",
            "chartBottomMargin": "20",


            //Tick Marks auto adjustment
            "adjustTM": "1",

            //Configuring Tick Positions
            "ticksOnRight": "0",
            "tickMarkDistance": "5",
            "tickValueDistance": "2",

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

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

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

        },
        "value": "-6"
    },
    "events": {
        "rendered": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 tick marks and tick values:

Attribute Name Description

ticksOnRight

It is used to specify whether the tick marks and values will be rendered to the left or the right of the gauge. Setting this attribute to 0 renders the tick marks and values on the left, setting it to 1 (default) renders them on the right.

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.

Customizing Tick Marks

A thermometer gauge configured for the tick marks cosmetic properties looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "0", "numberSuffix": "°C", "decimals": "1", "showhovereffect": "1", "gaugeFillColor": "#008ee4", "thmOriginX": "100", "theme": "fint", "chartBottomMargin": "20", "majorTMNumber": "6", "majorTMHeight": "12", "minorTMNumber": "4", "minorTMHeight": "7", "majorTMColor": "#666666", "majorTMAlpha": "100", "majorTMThickness": "2", "minorTMColor": "#666666", "minorTMAlpha": "50", "minorTMThickness": "2" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "0",
        "numberSuffix": "°C",
        "decimals": "1",
        "showhovereffect": "1",
        "gaugeFillColor": "#008ee4",
        "thmOriginX": "100",
        "theme": "fint",
        "chartBottomMargin": "20",
        "majorTMNumber": "6",
        "majorTMHeight": "12",
        "minorTMNumber": "4",
        "minorTMHeight": "7",
        "majorTMColor": "#666666",
        "majorTMAlpha": "100",
        "majorTMThickness": "2",
        "minorTMColor": "#666666",
        "minorTMAlpha": "50",
        "minorTMThickness": "2"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-7',
    width: '240',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "0",
            "numberSuffix": "°C",
            "decimals": "1",
            "showhovereffect": "1",
            "gaugeFillColor": "#008ee4",
            "thmOriginX": "100",
            "theme": "fint",
            "chartBottomMargin": "20",
            "majorTMNumber": "6",
            "majorTMHeight": "12",
            "minorTMNumber": "4",
            "minorTMHeight": "7",

            //Major Tick Marks Cosmetics
            "majorTMColor": "#666666",
            "majorTMAlpha": "100",
            "majorTMThickness": "2",

            //Minor Tick Marks Cosmetics
            "minorTMColor": "#666666",
            "minorTMAlpha": "50",
            "minorTMThickness": "2",
        },
        "value": "-6"
    },
    "events": {
        "initialized": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 tick marks’ cosmetic properties:

Attribute Name Description

majorTMColor

It is used to specify hex code of the color using which the major tick marks will be rendered, 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 hex code of the color using which the minor tick marks will be rendered, 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 for the Thermometer Gauge

A thermometer gauge configured to enable hover effects looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature Monitor", "subcaption": " Central cold store", "lowerLimit": "-10", "upperLimit": "00", "numberSuffix": "°C", "decimals": "1", "thmFillColor": "#008ee4", "thmOriginX": "100", "showhovereffect": "1", "theme": "fint" }, "value": "-6" }
{
    "chart": {
        "caption": "Temperature Monitor",
        "subcaption": " Central cold store",
        "lowerLimit": "-10",
        "upperLimit": "00",
        "numberSuffix": "°C",
        "decimals": "1",
        "thmFillColor": "#008ee4",
        "thmOriginX": "100",
        "showhovereffect": "1",
        "theme": "fint"
    },
    "value": "-6"
}
<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: 'thermometer',
    renderAt: 'chart-container',
    id: 'myThm-8',
    width: '240',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature Monitor",
            "subcaption": " Central cold store",
            "lowerLimit": "-10",
            "upperLimit": "00",
            "numberSuffix": "°C",
            "decimals": "1",
            "thmFillColor": "#008ee4",
            "thmOriginX": "100",

            //Add hover effect
            "showhovereffect": "1",
            "theme": "fint"
        },
        "value": "-6"
    },
    "events": {
        "initialized": function(evt, arg) {
            evt.sender.dataUpdate = setInterval(function() {
                var value,
                    prevTemp = evt.sender.getData(),
                    mainTemp = (Math.random() * 10) * (-1),
                    diff = Math.abs(prevTemp - mainTemp);

                diff = diff > 1 ? (Math.random() * 1) : diff;
                if (mainTemp > prevTemp) {
                    value = prevTemp + diff;
                } else {
                    value = prevTemp - diff;
                }
                evt.sender.feedData("&value=" + value);
            }, 3000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.dataUpdate);
        }
    }
}
);
    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 thermometer gauge:

Attribute Name Description

showHoverEffect

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

Top