Configuring Linear Gauge Cosmetics
FusionCharts Suite XT allows you to configure the functional and cosmetic properties of the linear gauge to improve its visual representation.
In this section, you will be shown how you can:
Configuring Pointer Properties
A linear gauge configured for the cosmetic properties of the pointer looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"captionPadding": "0",
"numberSuffix": "%",
"valueFontSize": "11",
"valueFontBold": "0",
"chartBottomMargin": "20",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"borderColor": "#333333",
"borderThickness": "2",
"borderAlpha": "60",
"bgColor": "#0075c2",
"bgAlpha": "75",
"radius": "6",
"sides": "4",
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
width: '400',
height: '150',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"captionPadding": "0",
"numberSuffix": "%",
"valueFontSize": "11",
"valueFontBold": "0",
"chartBottomMargin": "20",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
"pointer": [{
"borderColor": "#333333",
"borderThickness": "2",
"borderAlpha": "60",
"bgColor": "#0075c2",
"bgAlpha": "75",
"radius": "6",
"sides": "4",
"value": "75"
}]
}
}
}
);
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 pointer cosmetic properties:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code for the color that will be applied to the pointer border, e.g. #1aaf5d. |
|
It is used to specify the thickness, in pixels, for the pointer border, e.g. 5 |
|
It is used to specify the hex code for the color that will applied to the background of the pointer, e.g. #E3234A |
|
It is used to specify the transparency for the background of the pointer. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
|
It is used to specify the radius, in pixels, of the pointer. |
|
It is used to specify the number of sides for the pointer; this determines the shape of the pointer, e.g a 4-sided pointer looks like a diamond. |
These attributes belong to the pointer object, which in turn belongs to the pointers object.
Adding Tool-text and a Link to the Pointer
A linear gauge with the pointer having a tool-text and pointing to an external link looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"captionPadding": "0",
"numberSuffix": "%",
"valueAbovePointer": "0",
"valueFontSize": "11",
"valueFontBold": "0",
"chartBottomMargin": "20",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"toolText": "Customer satisfaction $value%",
"link": "http://www.fusioncharts.com",
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
width: '400',
height: '150',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"captionPadding": "0",
"numberSuffix": "%",
"valueAbovePointer": "0",
"valueFontSize": "11",
"valueFontBold": "0",
"chartBottomMargin": "20",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
"pointer": [{
//Adding custom tooltext
"toolText": "Customer satisfaction $value%",
//Adding external url
"link": "http://www.fusioncharts.com",
"value": "75"
}]
}
}
}
);
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 add a tool-text and an external link for the pointer:
| Attribute Name | Description |
|---|---|
|
It is used to specify the tooltip that will be rendered when the mouse pointer is hovered over the pointer. |
|
It is used to specify the URL to which you will be navigated if you click the pointer. The link to the external URL is defined using the FusionCharts link format. |
These attributes belong to the pointer object, which in turn belongs to the pointers object.
Adding Multiple Pointers
A linear gauge rendered with two pointers, showing the server CPU utilization for a transaction server and a web server looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "Transaction Server & Web Server",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "0",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"value": "75",
"bgColor": "#0044DD",
"bgAlpha": "80",
"tooltext": "Transaction Server: $value%"
},
{
"value": "92",
"bgColor": "#0077CC",
"bgAlpha": "80",
"tooltext": "Web Server: $value%"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "Transaction Server & Web Server",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "0",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
//Multiple pointers defined here
"pointer": [{
"value": "75",
"bgColor": "#0044DD",
"bgAlpha": "80",
"tooltext": "Transaction Server: $value%"
}, {
"value": "92",
"bgColor": "#0077CC",
"bgAlpha": "80",
"tooltext": "Web Server: $value%"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>To add multiple pointers, you only need to create multiple instances of the pointer object, which belongs to the pointers object.
Configuring the Pointer Value
A linear gauge rendered with the pointer value configured looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"captionPadding": "10",
"valueAbovePointer": "0",
"valueFontSize": "13",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
width: '400',
height: '150',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"captionPadding": "10",
"valueAbovePointer": "0",
"valueFontSize": "13",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High"
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
},
events: {
'beforeRender': function(event, args) {
var radiobuttons = document.createElement('div');
radiobuttons.setAttribute('id', 'radio-container');
radiobuttons.innerHTML = '<input type="checkbox" id="showCB" name="padding" value="1" checked >Show Value</input><br><input type="checkbox" id="positionCB" name="padding" value="2">Place Value Above Pointer</input>';
radiobuttons.style.cssText = 'margin-top:10px; width:400px;';
args.container.parentNode.insertBefore(radiobuttons, args.container.nextSibling);
var showVal = document.getElementById('showCB'),
placeVal = document.getElementById('positionCB'),
cpuGauge = event.sender;
// Function to show hide value
function showValue() {
//Using showValue attribute to show hide pointer value
if (showVal.checked) {
cpuGauge.setChartAttribute('showValue', 1);
//placeVal.disabled = false;
} else {
cpuGauge.setChartAttribute('showValue', 0);
//placeVal.disabled = true;
}
}
//Function to change value pointer
function setPosition() {
//Using valueAbovePointer attribute to toggle position of pointer value
(placeVal.checked) ? cpuGauge.setChartAttribute('valueAbovePointer', 1) :
cpuGauge.setChartAttribute('valueAbovePointer', 0);
}
showVal.addEventListener && showVal.addEventListener("click", showValue);
placeVal.addEventListener && placeVal.addEventListener("click", setPosition);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The gauge shown above is rendered with two check boxes below it: Show Value and Place Value Above Pointer. If you select the Show Value check box, the value of the pointer is shown; if you clear it, the value is hidden. If you select the Place Value Above Pointer check box, the value is placed above the pointer; if you clear it, the value is shown below.
Given below is a brief description of the attributes used to configure the pointer value:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the pointer’s value will be shown or hidden. Setting this attribute to |
|
It is used to specify whether the value will be shown above or below the pointer. Setting this attribute to |
These attributes belong to the pointer object, which in turn belongs to the pointers object.
Configuring the Pointer Position
You can configure the linear gauge to show the pointer along the top edge or the bottom edge of the gauge.
A linear gauge that allows you to configure the pointer position looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"captionPadding": "10",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"bgColor": "#333333",
"bgAlpha": "80",
"showValue": "0",
"value": "75",
"tooltext": "Garden Groove Harbour $value%"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '150',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"captionPadding": "10",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}]
},
"pointers": {
"pointer": [{
"bgColor": "#333333",
"bgAlpha": "80",
"showValue": "0",
"value": "75",
"tooltext": "Garden Groove Harbour $value%"
}]
}
},
events: {
'beforeRender': function(evt, args) {
// creating div for controllers
var controllers = document.createElement('div'),
gaugeRef = evt.sender;
controllers.setAttribute('id', 'controllers');
// Create radio buttons inside div
controllers.innerHTML = '<input type="radio" name="btnGrp" id="onTopBtn" value="top" checked >Pointer on Top</input><input type="radio" name="btnGrp" id="atBottomBtn" value="bottom" >Pointer at bottom</input>';
args.container.parentNode.insertBefore(controllers, args.container.nextSibling);
var canvasBtn = document.getElementById('canvasBtn'),
chartBtn = document.getElementById('chartBtn'),
//Set the attribute based on which radio is selected
changeAlignment = function(evt, obj) {
(document.getElementById('onTopBtn').checked) ?
gaugeRef.setChartAttribute('pointerOnTop', 1) :
gaugeRef.setChartAttribute('pointerOnTop', 0);
};
//Listen to radio button events
if (onTopBtn.addEventListener && atBottomBtn.addEventListener) {
onTopBtn.addEventListener("click", changeAlignment);
atBottomBtn.addEventListener("click", changeAlignment);
}
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The gauge shown above is rendered with two check boxes below it: Pointer on Top and Pointer at Bottom. If you select the Pointer on Top check box, the pointer is shown along the top edge of the gauge; if you select the Pointer at Bottom check box, the pointer is shown along the bottom edge of the gauge.
Given below is a brief description of the attribute used to configure the pointer position:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the pointer will be shown along the top or the bottom edge of the gauge. Setting this attribute to |
This attribute belongs to the chart object.
Configuring the Gauge Gradient Mix
A linear gauge configured using the gauge gradient mix looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
}
}
);
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 gauge gradient mix:
| Attribute Name | Description |
|---|---|
|
It is used to specify the gradient fill formula for the linear gauge scale, e.g. {light-10},{light-70},{dark-10} |
|
It is used to specify the ratio in which the fill mix will be applied to the gauge, e.g. 40,20,40. |
Configuring Gauge Borders
A linear gauge configured for border cosmetic properties looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"showGaugeBorder": "1",
"gaugeBorderColor": "{light-50}",
"gaugeBorderThickness": "4",
"gaugeBorderAlpha": "100"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
//Showing gauge border
"showGaugeBorder": "1",
//Used a gradient fill mix to color border
//range using 30% lighter color than its fill color
//A hex value can also be used e.g '#666666'
"gaugeBorderColor": "{light-50}",
//Changing Thickness
"gaugeBorderThickness": "4",
//Changing Alpha
"gaugeBorderAlpha": "100"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
}
}
);
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 gauge borders:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge border will be shown or hidden. Setting this attribute to |
|
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. You can either specify a hex code here or a single token from the gradient fill mix like {dark-20} or {light-30}. The chart will then calculate the border color for each color range individually (based on the color code for each color range). |
|
It is used to specify the thickness, in pixels, for the gauge border, e.g. 5. |
|
It is used to specify the transparency for the gauge border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
Hiding Gauge Labels
A linear gauge configured to hide gauge labels looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"showGaugeLabels": "1",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '170',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"showGaugeLabels": "1",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
},
events: {
'beforeRender': function(event, args) {
// creating div for controllers
var controllers = document.createElement('div'),
gaugeRef = event.sender;
controllers.setAttribute('id', 'controllers');
// Create radio buttons inside div
controllers.innerHTML = '<input type="checkbox" id="showLbl" name="padding" value="1" checked >Show Labels?</input>';
args.container.parentNode.insertBefore(controllers, args.container.nextSibling);
var showLabelCB = document.getElementById('showLbl'),
showLabels = function(evt, obj) {
//Using showGaugeLabels attribute to show hide gauge labels
if (evt.currentTarget.checked) {
gaugeRef.setChartAttribute('showGaugeLabels', 1);
} else {
gaugeRef.setChartAttribute('showGaugeLabels', 0);
}
};
//Set event listener for check boxes
showLabelCB.addEventListener && showLabelCB.addEventListener("click", showLabels);
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Look at the Show Labels? check box rendered below the above linear gauge. If you select this check box, you can see the label for each color range on the gauge scale. If you clear the check box, the labels are hidden.
Given below is a brief description of the attribute used to hide gauge labels:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge (color range scale) labels will be shown or not. Setting this attribute to |
An alternate way to not show gauge labels is by not initializing the label attribute for the color object.
Configuring Hover Effects for the Gauge
You can use hover effects to improve the visual representation of your gauge; you can configure the pointer cosmetics to change when the mouse pointer is hovered over it.
A linear gauge configured for hover effects looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"showHoverAnimation": "1",
"pointerBgHoverColor": "#0075c2",
"pointerBgHoverAlpha": "100",
"showBorderOnHover": "1",
"pointerBorderHoverThickness": "2",
"pointerBorderHoverColor": "#333333",
"pointerBorderHoverAlpha": "100",
"pointerHoverRadius": "11",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<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: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge-9',
width: '400',
height: '190',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
//Configuring hover effects on pointer
"showHoverAnimation": "1",
"pointerBgHoverColor": "#0075c2",
"pointerBgHoverAlpha": "100",
"showBorderOnHover": "1",
"pointerBorderHoverThickness": "2",
"pointerBorderHoverColor": "#333333",
"pointerBorderHoverAlpha": "100",
"pointerHoverRadius": "11",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "35",
"label": "Low",
}, {
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
}, {
"minValue": "70",
"maxValue": "100",
"label": "High",
}]
},
"pointers": {
"pointer": [{
"value": "75"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Hover your mouse pointer above the gauge pointer and observe how the cosmetics of the pointer change.
Given below is a brief description of the attributes used to configure hover effects for the gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the pointer when the mouse pointer is hovered over it, e.g. #333333. |
|
It is used to specify the transparency of the pointer when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70. |
|
It is used to specify whether the pointer border will be shown when the mouse pointer is hovered over it. Setting this attribute to |
|
It is used to specify the thickness, in pixels, of the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the |
|
It is used to specify the hex code of the color that will be used to render the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the |
|
It is used to specify the transparency of the pointer border when the mouse pointer is hovered over it. It takes values between 0 (transparent) and 100 (opaque). This attribute works only if you have set the |
|
It is used to specify the radius, in pixels, of the pointer when the mouse pointer is hovered over it. |