Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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

In this section you will be shown how you can:

Configuring the Gauge Border

A bulb gauge rendered with customized gauge border properties looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "showGaugeBorder": "1", "gaugeBorderColor": "#666666", "gaugeBorderThickness": "3", "gaugeBorderAlpha": "100", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "#666666",
        "gaugeBorderThickness": "3",
        "gaugeBorderAlpha": "100",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}
<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: 'bulb',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '300',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature status of deep freezers",
            "upperlimit": "-5",
            "lowerlimit": "-60",
            "captionPadding": "30",
            "showshadow": "0",
            "showvalue": "1",
            "useColorNameAsValue": "1",
            "placeValuesInside": "1",
            "valueFontSize": "16",

            /* Border configuration */
            "showGaugeBorder": "1",
            "gaugeBorderColor": "#666666",
            "gaugeBorderThickness": "3",
            "gaugeBorderAlpha": "100",

            //Theme
            "theme": "fint"


        },
        "colorrange": {
            "color": [{
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            }, {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5"
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.chartInterval = setInterval(function() {
                var num = (Math.floor(Math.random() * 55) * -1) - 5;
                FusionCharts("myChart").feedData("&value=" + num);
            }, 10000);
        },
        "disposed": function(evt, sender) {
            clearInterval(evt.sender.chartInterval);
        }
    }
}
);
    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

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.

Using Gradient Fill Mix for the Gauge Border

The gaugeBorderColor attribute is used to apply a single solid color to the gauge border, where the border color can be different from the fill color for the gauge. Using a gradient fill mix, you can render the border in a color that is darker or lighter than the fill color used for the gauge.

The gradient fill mix renders the border in a color that is darker/lighter than the initial color in which the gauge was rendered.

A bulb gauge rendered using a gradient fill mix for the border looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "showGaugeBorder": "1", "gaugeBorderThickness": "3", "gaugeBorderAlpha": "100", "gaugeBorderColor": "{dark-30}", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "showGaugeBorder": "1",
        "gaugeBorderThickness": "3",
        "gaugeBorderAlpha": "100",
        "gaugeBorderColor": "{dark-30}",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}
<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: 'bulb',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '300',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature status of deep freezers",
            "upperlimit": "-5",
            "lowerlimit": "-60",
            "captionPadding": "30",
            "showshadow": "0",
            "showvalue": "1",
            "useColorNameAsValue": "1",
            "placeValuesInside": "1",
            "valueFontSize": "16",

            //Border configuration
            "showGaugeBorder": "1",
            "gaugeBorderThickness": "3",
            "gaugeBorderAlpha": "100",
            /* Darker border color of initial fill */
            "gaugeBorderColor": "{dark-30}",


            //Theme
            "theme": "fint"


        },
        "colorrange": {
            "color": [{
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            }, {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

In the above chart, the gauge border is rendered in a color darker than the initial fill color. To do this, we have used one token of the gradient fill mix to render the bulb border using a color that is 30% darker than the fill color.

Configuring the Origin and the Radius of the Bulb Gauge

By default, the gauge automatically determines its origin and radius based on the data you provide. However, FusionCharts Suite XT also allows you to explicitly specify the origin and radius of the gauge.

A bulb gauge rendered with the origin and radius configured manually looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "gaugeOriginX": "150", "gaugeOriginY": "150", "gaugeRadius": "105", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "gaugeOriginX": "150",
        "gaugeOriginY": "150",
        "gaugeRadius": "105",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}
<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: 'bulb',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '300',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature status of deep freezers",
            "upperlimit": "-5",
            "lowerlimit": "-60",
            "captionPadding": "30",
            "showshadow": "0",
            "showvalue": "1",
            "useColorNameAsValue": "1",
            "placeValuesInside": "1",
            "valueFontSize": "16",
            //Gauge origin
            "gaugeOriginX": "150",
            "gaugeOriginY": "150",
            //Gauge radius
            "gaugeRadius": "105",

            //Theme
            "theme": "fint"


        },
        "colorrange": {
            "color": [{
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            }, {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5"
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.chartInterval = setInterval(function() {
                var num = (Math.floor(Math.random() * 55) * -1) - 5;
                FusionCharts("myChart").feedData("&value=" + num);
            }, 10000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.chartInterval);
        }
    }
}
);
    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 configure the origin and radius of the bulb gauge:

Attribute Name Description

gaugeOriginX

It is used to specify the x-origin value for the gauge, e.g. 150.

gaugeOriginY

It is used to specify the y-origin value for the gauge, e.g. 170.

gaugeRadius

It is used to specify the radius, in pixels, for the gauge, e.g. 105.

Rendering the Bulb Gauge in 2D

By default, the bulb gauge is rendered with a 3D look and feel. However, you can opt to render the bulb gauge in 2D.

A bulb gauge rendered in 2D looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "is3D": "0", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "is3D": "0",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}
<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: 'bulb',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '300',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature status of deep freezers",
            "upperlimit": "-5",
            "lowerlimit": "-60",
            "captionPadding": "30",
            "showshadow": "0",
            "showvalue": "1",
            "useColorNameAsValue": "1",
            "placeValuesInside": "1",
            "valueFontSize": "16",

            //2D look n feel
            "is3D": "0",

            //Theme
            "theme": "fint"


        },
        "colorrange": {
            "color": [{
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            }, {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5"
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.chartInterval = setInterval(function() {
                var num = (Math.floor(Math.random() * 55) * -1) - 5;
                FusionCharts("myChart").feedData("&value=" + num);
            }, 10000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.chartInterval);
        }
    }
}
);
    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 render a bulb gauge in 2D:

Attribute Name Description

is3D

It is used to specify whether the bulb gauge will be rendered in 2D or 3D. Setting this attribute to 0 renders the gauge in 2D, setting it to 1 (default) renders it in 3D.

Placing the Gauge Value Inside the Gauge

By default, the gauge value is rendered outside the gauge. FusionCharts Suite XT allows you to render the value inside the gauge.

A bulb gauge configured to render the gauge value inside the gauge looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "numberSuffix": "°C", "showshadow": "0", "showvalue": "1", "valueFontSize": "16", "placeValuesInside": "1", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "numberSuffix": "°C",
        "showshadow": "0",
        "showvalue": "1",
        "valueFontSize": "16",
        "placeValuesInside": "1",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}
<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: 'bulb',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '300',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature status of deep freezers",
            "upperlimit": "-5",
            "lowerlimit": "-60",
            "captionPadding": "30",
            "numberSuffix": "°C",
            "showshadow": "0",
            "showvalue": "1",

            "valueFontSize": "16",

            //Placing value inside the gauge
            "placeValuesInside": "1",

            //Theme
            "theme": "fint"


        },
        "colorrange": {
            "color": [{
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            }, {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5"
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.chartInterval = setInterval(function() {
                var num = (Math.floor(Math.random() * 55) * -1) - 5;
                FusionCharts("myChart").feedData("&value=" + num);
            }, 10000);
        },
        "disposed": function(evtObj, argObj) {
            clearInterval(evtObj.sender.chartInterval);
        }
    }
}
);
    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 render the gauge value inside:

Attribute Name Description

placeValuesInside

It is used to specify whether the gauge value will be rendered inside the gauge or outside it. Setting this attribute to 1 will place the gauge values inside the gauge, setting it to 0 (default) will place them outside.

Rendering the Range Name as the Gauge Label

By default, the current numerical value of the gauge is rendered on the gauge. Instead, you can opt to show the range name on the gauge.

A bulb gauge configured to show the range name instead of the numerical as the gauge label looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "placeValuesInside": "1", "valueFontSize": "16", "useColorNameAsValue": "1", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "useColorNameAsValue": "1",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}
<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: 'bulb',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '300',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature status of deep freezers",
            "upperlimit": "-5",
            "lowerlimit": "-60",
            "captionPadding": "30",
            "showshadow": "0",
            "showvalue": "1",
            "placeValuesInside": "1",
            "valueFontSize": "16",

            //Use color name as value
            "useColorNameAsValue": "1",

            //Theme
            "theme": "fint"


        },
        "colorrange": {
            "color": [{
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            }, {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5"
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.chartInterval = setInterval(function() {
                var num = (Math.floor(Math.random() * 55) * -1) - 5;
                FusionCharts("myChart").feedData("&value=" + num);
            }, 10000);
        },
        "disposed": function(evt, arg) {
            clearInterval(evt.sender.chartInterval);
        }
    }
}
);
    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 render the range name:

Attribute Name Description

useColorNameAsValue

It is used to specify whether the range name will be rendered on the gauge instead of the numerical value. Setting this attribute to 1 will show the color range name as the value, setting it to 0 (default) will show the numerical value.

Configuring the Hover Effect

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

A bulb gauge configured for hover effects looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "showHoverEffect": "1", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "showHoverEffect": "1",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}
<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: 'bulb',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '300',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Temperature status of deep freezers",
            "upperlimit": "-5",
            "lowerlimit": "-60",
            "captionPadding": "30",
            "showshadow": "0",
            "showvalue": "1",
            "useColorNameAsValue": "1",
            "placeValuesInside": "1",
            "valueFontSize": "16",

            //Configure hover effect
            "showHoverEffect": "1",

            "theme": "fint"
        },
        "colorrange": {
            "color": [{
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            }, {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            }, {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }]
        },
        "value": "-5"
    },
    "events": {
        "rendered": function(evtObj, argObj) {
            evtObj.sender.chartInterval = setInterval(function() {
                var num = (Math.floor(Math.random() * 55) * -1) - 5;
                FusionCharts("myChart").feedData("&value=" + num);
            }, 10000);
        },
        "disposed": function(evt, sender) {
            clearInterval(evt.sender.chartInterval);
        }
    }
}
);
    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 bulb gauge:

Attribute Name Description

showHoverEffect

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

Top