Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

  • Configure pointer properties

  • Add tool text and link to a pointer

  • Add multiple pointers

  • Configure the pointer value

  • Configure the pointer position

  • Configure the gauge gradient mix

  • Configure the gauge borders

  • Hide gauge labels

  • Configure gauge labels

  • Configure hover effects for the gauge

Configuring Pointer Properties

A linear gauge configured for the cosmetic properties of the pointer looks like this:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

borderColor

It is used to specify the hex code for the color that will be applied to the pointer border, e.g. #1aaf5d.

borderThickness

It is used to specify the thickness, in pixels, for the pointer border, e.g. 5

bgColor

It is used to specify the hex code for the color that will applied to the background of the pointer, e.g. #E3234A

bgAlpha

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.

radius

It is used to specify the radius, in pixels, of the pointer.

sides

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.

A linear gauge with the pointer having a tool-text and pointing to an external link looks like this:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

toolText

It is used to specify the tooltip that will be rendered when the mouse pointer is hovered over the pointer.

link

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:

FusionCharts will load here..
{ "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%" } ] } }
{
    "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:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

showValue

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

valueAbovePointer

It is used to specify whether the value will be shown above or below the pointer. Setting this attribute to 1 will place the value above the pointer, setting it to 0 (default) will place the value below it.

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:

FusionCharts will load here..
{ "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%" } ] } }
{
    "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

pointerOnTop

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 0 will show the pointer at the bottom of the gauge, setting it to 1 (default) will show the pointer at the top.

This attribute belongs to the chart object.

Configuring the Gauge Gradient Mix

A linear gauge configured using the gauge gradient mix looks like this:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

gaugeFillMix

It is used to specify the gradient fill formula for the linear gauge scale, e.g. {light-10},{light-70},{dark-10}

gaugeFillRatio

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:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

showGaugeBorder

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

gaugeBorderColor

It is used to specify the hex code of the color that will be used to render the entire border of the gauge, e.g. #111111. 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).

gaugeBorderThicknes

It is used to specify the thickness, in pixels, for the gauge border, e.g. 5.

gaugeBorderAlpha

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

Hiding Gauge Labels

A linear gauge configured to hide gauge labels looks like this:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

showGaugeLabels

It is used to specify whether the gauge (color range scale) labels will be shown or not. Setting this attribute to 0 will hide gauge labels, setting it to 1 (default) will show them.

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:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

pointerBgHoverColor

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.

pointerBgHoverAlpha

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.

showBorderOnHover

It is used to specify whether the pointer border will be shown when the mouse pointer is hovered over it. Setting this attribute to 1 will show the pointer border, setting it to 0 (default) will hide it.

pointerBorderHoverThickness

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 showBorderOnHover attribute to 1.

pointerBorderHoverColor

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 showBorderOnHover attribute to 1.

pointerBorderHoverAlpha

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 showBorderOnHover attribute to 1.

pointerHoverRadius

It is used to specify the radius, in pixels, of the pointer when the mouse pointer is hovered over it.

Top