Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

FusionCharts Suite XT allows you to configure dials in angular gauges for several cosmetic and functional properties.

In this section, with respect to dials, we will see how to:

  • Configure the border and background

  • Configure the radius and rear extension

  • Configure the base width and top width

  • Configure the hover effect

  • Add custom tool text

  • Add multiple dials on the chart

  • Customize dial values

  • Update dials using their ID

Configuring the Border and Background of the Dial

Configuring Border

An angular chart with the border of the dial configured looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "bgColor": "#777777", "borderColor": "#111111", "borderThickness": "1", "borderAlpha": "100" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "bgColor": "#777777",
                "borderColor": "#111111",
                "borderThickness": "1",
                "borderAlpha": "100"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "bgColor": "#777777",
                "borderColor": "#111111",
                "borderThickness": "1",
                "borderAlpha": "100"
            }]
        }
    }
}
);
    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 borders of a dial:

Attribute Name Description

borderColor

It is used to specify the hex code of the color that will be used to render the dial border, e.g. #cca3def.

borderThickness

It is used to specify the thickness, in pixels, of the dial border, e.g. 10.

borderAlpha

It is used to specify the transparency of the border alpha for the dial. The possible range of values is 0 to 100. Setting it to 0 will make the border completely transparent and 100 will make it completely opaque. Additionally you can configure the dial to show/hide border through this attribute.

Configuring Background

An angular gauge rendered with the background of the dial filled with a single color looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "bgColor": "#999999", "borderAlpha": "0" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "bgColor": "#999999",
                "borderAlpha": "0"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "bgColor": "#999999",
                "borderAlpha": "0"
            }]
        }
    }
}
);
    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 fill the dial background with a single color:

Attribute Name Description

bgColor

It is used to specify the hex code of the color that will be used to fill the background for the dial. This attribute can take as value a single color (e.g. #CCCCCC) to render a solid-fill background or a comma-separated list of colors (e.g. #666666, #FFFFFF, #000000) to render a gradient-fill background.

An angular gauge rendered with a gradient-fill background configured for the dial looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showValue": "1", "valueBelowPivot": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "bgColor": "#666666,#FFFFFF,#666666", "borderAlpha": "0" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showValue": "1",
        "valueBelowPivot": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "bgColor": "#666666,#FFFFFF,#666666",
                "borderAlpha": "0"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showValue": "1",
            "valueBelowPivot": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "bgColor": "#666666,#FFFFFF,#666666",
                "borderAlpha": "0"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Configuring the Radius and Rear Extension

By default, the radius of the dial is configured by the gauge automatically. However, you can opt to explicitly specify the radius for the dial as well as the rear extension (extension on the opposite side) to achieve a more realistic look for the gauge.

An angular gauge configured for the radius and rear extension of the dial looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "radius": "140", "rearExtension": "15" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "radius": "140",
                "rearExtension": "15"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "radius": "140",
                "rearExtension": "15"
            }]
        }
    }
}
);
    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 radius and rear extension of the dial:

Attribute Name Description

radius

It is used to specify the radius for the dial, in pixels.

rearExtension

It is used to specify the distance, in pixels, by which the dial will extend beyond the pivot, in the opposite direction.

Configuring the Base Width and the Top Width

Increasing the base and top width of a dial will increase the thickness of the base and the top, thus allowing you to have different dial shapes that suit your design requirements.

An angular gauge with the base and top width configured for the dial looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "baseWidth": "15", "topWidth": "3", "rearExtension": "10" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "baseWidth": "15",
                "topWidth": "3",
                "rearExtension": "10"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "baseWidth": "15",
                "topWidth": "3",
                "rearExtension": "10"
            }]
        }
    }
}
);
    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 base and top width for the dial:

Attribute Name Description

baseWidth

It is used to specify the width, in pixels, of the bottom of the dial (the part connected to the pivot), e.g. 10

topWidth

It is used to specify the width, in pixels, of the top of the dial, e.g. 5

Configuring Hover Effects

You can use hover effects to improve the visual representation of your gauge. Using hover effects, you can change the cosmetics of your dial when the mouse pointer is hovered over it.

An angular gauge with the dial configured for the hover effect looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showHoverEffect": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "bgHoverColor": "#cccccc", "bgHoverAlpha": "80", "BorderHoverColor": "#999999", "BorderHoverAlpha": "80", "BorderHoverThickness": "2", "topWidth": "2", "rearExtension": "15" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showHoverEffect": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "bgHoverColor": "#cccccc",
                "bgHoverAlpha": "80",
                "BorderHoverColor": "#999999",
                "BorderHoverAlpha": "80",
                "BorderHoverThickness": "2",
                "topWidth": "2",
                "rearExtension": "15"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showHoverEffect": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "bgHoverColor": "#cccccc",
                "bgHoverAlpha": "80",
                "BorderHoverColor": "#999999",
                "BorderHoverAlpha": "80",
                "BorderHoverThickness": "2",
                "topWidth": "2",
                "rearExtension": "15"
            }]
        }
    }
}
);
    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 hover effect for the dial:

Attribute Name Description

showHoverEffect

It is used to specify whether the hover effect will be configured for the gauge elements. Setting this attribute to 1 enables the hover effects, setting it to 0 (default) disables them. This attribute belongs to the chart object and hence is global.

bgHoverColor

It specifies the hex code for the color that will be used to render the dial when the mouse pointer is hovered over it, e.g. #444444

bgHoverAlpha

It specifies the transparency for the dial when the mouse pointer is hovered over it, e.g. 50

borderHoverColor

It specifies the hex code for the color that will be used to render the border of the dial when the mouse pointer is hovered over it, e.g. #333333.

borderHoverAlpha

It specifies the transparency for the border of the dial when the mouse pointer is hovered over it, e.g. 30

borderHoverThickness

It specifies the thickness for the border of the dial when the mouse pointer is hovered over it, e.g. 5

Adding Custom Tool-text for the Dial

An angular gauge rendered with the tool-tip text configured for the dial looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showHoverEffect": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "tooltext": "Current customer satisfaction score is 67", "rearExtension": "15" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showHoverEffect": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "tooltext": "Current customer satisfaction score is 67",
                "rearExtension": "15"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showHoverEffect": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "tooltext": "Current customer satisfaction score is 67",
                "rearExtension": "15"
            }]
        }
    }
}
);
    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 tool-text for the dial:

Attribute Name Description

tooltext

It is used to specify the text that will be rendered as the tool-tip when the mouse pointer is hovered over the dial.

The method for adding a tool-text used in the above gauge will work when the gauge does not receive real-time updates. In case of real-time updates, the data value will change at specific intervals of time and, therefore, the tool-tip text should be updated accordingly.

This can be achieved using macros.

An angular gauge configured to update the tool-tip text for the dial in real-time looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Customer Satisfaction Score", "subcaption": "Last week", "lowerLimit": "0", "upperLimit": "100", "showHoverEffect": "1", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "tooltext": "Current customer satisfaction score is $value", "rearExtension": "15" } ] } }
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Last week",
        "lowerLimit": "0",
        "upperLimit": "100",
        "showHoverEffect": "1",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "tooltext": "Current customer satisfaction score is $value",
                "rearExtension": "15"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Score",
            "subcaption": "Last week",
            "lowerLimit": "0",
            "upperLimit": "100",
            "showHoverEffect": "1",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "tooltext": "Current customer satisfaction score is $value",
                "rearExtension": "15"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The above sample replaces the hard-coded value with the macro $value. Now, whenever someone will roll-over the dial, the current value of the dial will be displayed along with the text set in the tooltext attribute of dial element.

For the complete understanding of the tooltip macros or a detail list of available macros please refer to this document.

Adding Multiple Dials on the Gauge

You can add any number of dials to an angular gauge, with each dial configured to have its own value and individual properties.

An angular gauge rendered with two dials looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last year vs Current year", "lowerLimit": "0", "upperLimit": "100", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "showValue": "1", "valueX": "200", "valueY": "180", "bgAlpha": "10", "tooltext": "Last year's average : $value", "rearExtension": "15" }, { "value": "78", "showValue": "1", "valueX": "250", "valueY": "220", "tooltext": "Current year's average : $value", "rearExtension": "15" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last year vs Current year",
        "lowerLimit": "0",
        "upperLimit": "100",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "showValue": "1",
                "valueX": "200",
                "valueY": "180",
                "bgAlpha": "10",
                "tooltext": "Last year's average : $value",
                "rearExtension": "15"
            },
            {
                "value": "78",
                "showValue": "1",
                "valueX": "250",
                "valueY": "220",
                "tooltext": "Current year's average : $value",
                "rearExtension": "15"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last year vs Current year",
            "lowerLimit": "0",
            "upperLimit": "100",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "showValue": "1",
                "valueX": "200",
                "valueY": "180",
                "bgAlpha": "10",
                "tooltext": "Last year's average : $value",
                "rearExtension": "15"
            }, {
                "value": "78",
                "showValue": "1",
                "valueX": "250",
                "valueY": "220",
                "tooltext": "Current year's average : $value",
                "rearExtension": "15"
            }]
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

To create multiple dials, you only have to create multiple dial objects; as many the number of dials you want, as many the number of the dial objects you create. The attributes to configure the functional and cosmetic properties for each dial will be initialized separately in each object instance.

Customizing Dial Values

Along with configuring the appearance of the dial, you can also show/hide dial values and configure their placement.

An angular gauge rendered with two dials, with dial values customized, looks like this:

FusionCharts will load here..
{ "chart": { "caption": "Average Customer Satisfaction Score", "subcaption": "Last year vs Current year", "lowerLimit": "0", "upperLimit": "100", "valueFontSize": "16", "valueFontBold": "1", "valueBgColor": "#cccccc", "valueBorderColor": "#999999", "valueAlpha": "80", "valueBorderThickness": "2", "valueBorderRadius": "2", "valueBorderDashed": "1", "valueBorderDashGap": "2", "valueBorderDashLen": "5", "gaugeFillMix": "{dark-40},{light-40},{dark-20}", "theme": "fint" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "50", "code": "#e44a00" }, { "minValue": "50", "maxValue": "75", "code": "#f8bd19" }, { "minValue": "75", "maxValue": "100", "code": "#6baa01" } ] }, "dials": { "dial": [ { "value": "67", "showValue": "1", "valueX": "190", "valueY": "180", "tooltext": "Last year's average : $value", "rearExtension": "15" }, { "value": "78", "showValue": "1", "valueX": "260", "valueY": "220", "tooltext": "Current year's average : $value", "rearExtension": "15" } ] } }
{
    "chart": {
        "caption": "Average Customer Satisfaction Score",
        "subcaption": "Last year vs Current year",
        "lowerLimit": "0",
        "upperLimit": "100",
        "valueFontSize": "16",
        "valueFontBold": "1",
        "valueBgColor": "#cccccc",
        "valueBorderColor": "#999999",
        "valueAlpha": "80",
        "valueBorderThickness": "2",
        "valueBorderRadius": "2",
        "valueBorderDashed": "1",
        "valueBorderDashGap": "2",
        "valueBorderDashLen": "5",
        "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
        "theme": "fint"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            },
            {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            },
            {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "67",
                "showValue": "1",
                "valueX": "190",
                "valueY": "180",
                "tooltext": "Last year's average : $value",
                "rearExtension": "15"
            },
            {
                "value": "78",
                "showValue": "1",
                "valueX": "260",
                "valueY": "220",
                "tooltext": "Current year's average : $value",
                "rearExtension": "15"
            }
        ]
    }
}
<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: 'angulargauge',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Average Customer Satisfaction Score",
            "subcaption": "Last year vs Current year",
            "lowerLimit": "0",
            "upperLimit": "100",
            "valueFontSize": "16",
            "valueFontBold": "1",
            "valueBgColor": "#cccccc",
            "valueBorderColor": "#999999",
            "valueAlpha": "80",
            "valueBorderThickness": "2",
            "valueBorderRadius": "2",
            "valueBorderDashed": "1",
            "valueBorderDashGap": "2",
            "valueBorderDashLen": "5",
            "gaugeFillMix": "{dark-40},{light-40},{dark-20}",
            "theme": "fint"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "50",
                "code": "#e44a00"
            }, {
                "minValue": "50",
                "maxValue": "75",
                "code": "#f8bd19"
            }, {
                "minValue": "75",
                "maxValue": "100",
                "code": "#6baa01"
            }]
        },
        "dials": {
            "dial": [{
                "value": "67",
                "showValue": "1",
                "valueX": "190",
                "valueY": "180",
                "tooltext": "Last year's average : $value",
                "rearExtension": "15"
            }, {
                "value": "78",
                "showValue": "1",
                "valueX": "260",
                "valueY": "220",
                "tooltext": "Current year's average : $value",
                "rearExtension": "15"
            }]
        }
    }
}
);
    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 dial values:

Attribute Name Description

showValue

It is used to specify whether the value of the dial will be shown or hidden. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show it. This attribute belongs to the dial object, which in turn belongs to the dials object.

valueX

It is used to specify the x-position of the value text-field, e.g. 260. This attribute belongs to the dial object, which in turn belongs to the dials object.

valueY

It is used to specify the y-position of the value text-field, e.g. 220. This attribute belongs to the dial object, which in turn belongs to the dials object.

valueFont

It is used to specify the font-family to be used to render the values on the gauge, e.g. Arial.

valueFontColor

It is used to specify the hex code of the color that will be used to render the value, e.g. #CCCCCC.

valueFontSize

It is used to specify the font size for the value. This attribute takes values between 0 and 72, e.g. 50.

valueFontBold

It is used to specify whether bold formatting should be applied to the value. Setting this attribute to 1 enables bold formatting, setting it to 0 (default) disables it.

valueFontItalic

It is used to specify whether the value should be italicized. Setting this attribute to 1 enables the value to be italicized, setting it to 0 (default) disables it.

valueBgColor

It is used to specify the hex code for the color that will be used to render the background of the value., e.g. #555555

valueBorderColor

It is used to specify the hex code for the color that will be used to render a border around the value text, e.g. #444444.

valueAlpha

It is used to specify the transparency of the value.

valueFontAlpha

It is used to specify the transparency of the font used for the value.

valueBgAlpha

It is used to specify the transparency for the value background, e.g. 50

valueBorderAlpha

It is used to specify the transparency for the value border, e,g. 60.

valueBorderThickness

It is used to specify the thickness, in pixels, for the value border.

valueBorderRadius

It is used to specify the radius, in pixels, for the value border.

valueBorderDashed

It is used to specify whether the border around the value will be rendered using dashed lines. Setting this attribute to 1 will render the border using dashed lines, setting it to 0 (default) will render it in whole lines.

valueBorderDashGap

It is used to specify the length, in pixels, of each dash if the value border is rendered using dashed lines.

valueBorderDashLen

It is used to specify the gap between each dash, in pixels, if the value border is rendered using dashed lines.

Updating Dials using ID

When angular gauges with multiple dials are used in real-time applications, it becomes very important that the each dial is updated with the correct value. To help identify each dial correctly, a unique ID is configured for each dial on the gauge.

Given below is a brief description of the attribute used to configure an ID for teach dial:

Attribute Name Description

id

It is used to specify a unique identification for a dial on the gauge, e.g. Dial 1. This attribute belongs to the dial object, which in turn belongs to the dials object.

To learn how to create real-time angular gauges please refer to [Creating Real-time Angular Gauge

FusionCharts](/archive/3.11.0/gauge-and-widgets-guide/angular-gauge/creating-real-time-gauges.html) section.

Top