Loading
Configuring Dials
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:
{
"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 |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the dial border, e.g. #cca3def. |
|
It is used to specify the thickness, in pixels, of the dial border, e.g. 10. |
|
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:
{
"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 |
|---|---|
|
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:
{
"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:
{
"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 |
|---|---|
|
It is used to specify the radius for the dial, in pixels. |
|
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:
{
"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 |
|---|---|
|
It is used to specify the width, in pixels, of the bottom of the dial (the part connected to the pivot), e.g. 10 |
|
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:
{
"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 |
|---|---|
|
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 |
|
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 |
|
It specifies the transparency for the dial when the mouse pointer is hovered over it, e.g. 50 |
|
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. |
|
It specifies the transparency for the border of the dial when the mouse pointer is hovered over it, e.g. 30 |
|
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:
{
"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 |
|---|---|
|
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:
{
"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:
{
"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:
{
"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 |
|---|---|
|
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 |
|
It is used to specify the x-position of the value text-field, e.g. 260. This attribute belongs to the |
|
It is used to specify the y-position of the value text-field, e.g. 220. This attribute belongs to the |
|
It is used to specify the font-family to be used to render the values on the gauge, e.g. Arial. |
|
It is used to specify the hex code of the color that will be used to render the value, e.g. #CCCCCC. |
|
It is used to specify the font size for the value. This attribute takes values between 0 and 72, e.g. 50. |
|
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. |
|
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. |
|
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 |
|
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. |
|
It is used to specify the transparency of the value. |
|
It is used to specify the transparency of the font used for the value. |
|
It is used to specify the transparency for the value background, e.g. 50 |
|
It is used to specify the transparency for the value border, e,g. 60. |
|
It is used to specify the thickness, in pixels, for the value border. |
|
It is used to specify the radius, in pixels, for the value border. |
|
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. |
|
It is used to specify the length, in pixels, of each dash if the value border is rendered using dashed lines. |
|
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 |
|---|---|
|
It is used to specify a unique identification for a dial on the gauge, e.g. Dial 1. This attribute belongs to the |
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. |