Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

FusionCharts Suite XT offers you several options to configure and customize the cylinder gauge to suit your requirements.

In this section, using a simple example, you will be shown how to:

  • Set the cylinder fill color

  • Customize the cylinder origin, radius, and height

  • Show or hide the chart value

  • Configure tick marks and tick values

  • Apply hover effects to the gauge

Setting Cylinder Fill Color

By default, the cylinder gauge is filled using the default fill color. However, you can set a different fill color for the gauge.

A cylinder gauge with the fill color set to green looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "cylFillColor": "#1aaf5d" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "cylFillColor": "#1aaf5d"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-1',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            //Changing the Cylinder fill color
            "cylFillColor": "#1aaf5d"
        },
        "value": "75"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the attribute used to define custom colors for cylinder fill:

Attribute Name Description

cylFillColor

It is used to specify the hex code of the fill color for the cylinder, eg. #1aaf5d.

Customizing Cylinder Origin, Radius, and Height

By default, the chart automatically calculates the best-fit coordinates and size for the cylinder. However, you can also customize the origin, radius, and height of the cylinder gauge, if your requirement differs from the default measures.

A cylinder gauge rendered using user-defined origin, radius, and height looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "captionAlignment": "left", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "cyloriginx": "50", "cyloriginy": "260", "cylradius": "40", "cylheight": "150" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "captionAlignment": "left",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "cyloriginx": "50",
        "cyloriginy": "260",
        "cylradius": "40",
        "cylheight": "150"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-2',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "captionAlignment": "left",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            //Customizing the origin x position
            "cyloriginx": "50",
            //Customizing the origin y position
            "cyloriginy": "260",
            //Setting the radius of the Cylinder
            "cylradius": "40",
            //Setting the height of the Cylinder
            "cylheight": "150"
        },
        "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 customize the cylinder origin, radius, and height:

Attribute Name Description

cylOriginX

It is used to specify the origin x-coordinate of the cylinder. e.g 30

cylOriginY

It is used to specify the origin y-coordinate of the cylinder. e.g. 260

cylRadius

It is used to specify the radius of the cylinder. e.g. 40

cylHeight

It is used to specify the height of the cylinder. e.g. 150

Configuring Chart Value Display

By default, the chart data value indicated by the cylinder gauge is shown below the gauge. You can also choose to hide this value.

A cylinder gauge rendered with the chart value hidden looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "0", "chartBottomMargin": "25" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "0",
        "chartBottomMargin": "25"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-3',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "0",
            "chartBottomMargin": "25"
        },
        "value": "75"
    },
    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="checkbox" id="showVal">Show Value ?</input>';

            // set css style for controllers div
            controllers.style.cssText = 'position:inherit;text-align: center;';

            // set css styles for "label" elements in controllers div
            var labels = controllers.getElementsByTagName('label');
            for (var i = 0; i < labels.length; i++) {
                labels[i].style.cssText = 'padding: 0 5px;';
            }

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            var showValueCB = document.getElementById('showVal'),
                //Function to show/hide value
                showValue = function(evt, obj) {
                    //Using showValue attribute to show hide gauge value
                    if (showVal.checked) {
                        gaugeRef.setChartAttribute('showValue', 1);
                    } else {
                        gaugeRef.setChartAttribute('showValue', 0);
                    }
                };

            //Set event listener for check box
            showValueCB.addEventListener && showValueCB.addEventListener("click", showValue);
        }
    }
}
);
    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 show/hide the chart value:

Attribute Name Description

showValue

It specifies whether to show/hide the chart value. Setting this attribute to 1 (default) will show the chart value below the gauge, setting it to 0 will hide the chart value.

Configuring Tick Marks and Tick Values

Hiding Ticks

A cylinder gauge configured to hide all tick marks and tick values looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "ticksOnRight": "1" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "ticksOnRight": "1"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-4',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            "ticksOnRight": "1"
        },
        "value": "75"
    },
    events: {

        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                gaugeRef = event.sender;

            controllers.setAttribute('id', 'controllers');

            // Create checkbox inside div
            controllers.innerHTML = '<input type="checkbox" id="tmCB" checked >Show Tick Mark?</input><br><input type="checkbox" id="tvCB" checked >Show Tick Value?</input>';

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "margin-top: 10px;text-align: center;";

            var tickmarkCB = document.getElementById('tmCB'),
                tickvalueCB = document.getElementById('tvCB'),

                //Function to show/hide tick mark
                showTickMark = function(evt, obj) {
                    //Using showTickMarks attribute to show/hide ticks
                    (evt.currentTarget.checked) ? gaugeRef.setChartAttribute('showTickMarks', 1) :
                        gaugeRef.setChartAttribute('showTickMarks', 0);

                },

                //Function to show/hide tick value
                showTickValue = function(evt, obj) {
                    //Using showTickValues attribute to show/hide tick value
                    (evt.currentTarget.checked) ? gaugeRef.setChartAttribute('showTickValues', 1) :
                        gaugeRef.setChartAttribute('showTickValues', 0);
                }

            //Set event listener for check boxes
            tickmarkCB.addEventListener && tickmarkCB.addEventListener("click", showTickMark);
            tickvalueCB.addEventListener && tickvalueCB.addEventListener("click", showTickValue);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

The cylinder gauge shown here is designed in a way that the user decides whether or not to render the tick marks and tick values. Selecting the check boxes below the chart will show the tick marks and values; clearing them hides tick marks and values again.

Given below is the list of attributes used to show/hide tick marks and values:

Attribute Name Description

showTickMarks

It is used to specify whether to show/hide the tick marks. Setting this attribute to 0 will hide the tick marks, setting it to 1 (default) will show them.

showTickValues

It is used to specify whether to show/hide the tick values. Setting this attribute to 1 will show the tick values, setting it to 0 (default) will hide them.

Positioning Ticks

By default, the tick marks and tick values are rendered to the right of the gauge.

A cylinder gauge rendered with the tick marks and values positioned to the left looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "ticksOnRight": "0" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "ticksOnRight": "0"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-5',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            "ticksOnRight": "0"
        },
        "value": "75"
    },
    events: {
        'beforeRender': function(event, args) {
            // creating div for controllers
            var controllers = document.createElement('div'),
                gaugeRef = event.sender;

            controllers.setAttribute('id', 'controllers');

            // Create checkbox inside div
            controllers.innerHTML = '<input type="radio" name="btnGrp" id="rightRB">Ticks on Right</input><input type="radio" name="btnGrp" id="leftRB" checked>Ticks on Left</input>';

            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "margin-top: 10px;text-align: center;";

            var rightRBtn = document.getElementById('rightRB'),
                leftRBtn = document.getElementById('leftRB'),

                //Function to set the ticksOnRight attribute value based on which radio is selected
                changePosition = function(evt, obj) {
                    (document.getElementById('rightRB').checked) ?
                        gaugeRef.setChartAttribute('ticksOnRight', 1) :
                        gaugeRef.setChartAttribute('ticksOnRight', 0);
                }

            //Set event listener for check boxes and radio buttons
            rightRBtn.addEventListener && rightRBtn.addEventListener("click", changePosition);
            leftRBtn.addEventListener && leftRBtn.addEventListener("click", changePosition);
        }
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to customize the tick position:

Attribute Name Description

ticksOnRight

It is used to specify whether to render the tick marks on the left or the right side of gauge. Setting this attribute to 0 will render the tick marks on the left side of the gauge scale, setting it to 1 (default) will render them on the right.

Customizing the Number of Ticks

A cylinder gauge rendered with the number of tick marks explicitly specified looks this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "majorTMNumber": "9", "minorTMNumber": "1", "adjustTM": "0" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMNumber": "9",
        "minorTMNumber": "1",
        "adjustTM": "0"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-6',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            //To set the number of major tickmarks
            "majorTMNumber": "9",
            //To set the number of minor tick marks
            //in between major tick marks
            "minorTMNumber": "1",
            //To adjust the tickmark and values automatically
            //to a best feasible value
            "adjustTM": "0"
        },
        "value": "75"

    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to customize the number of tick marks::

Attribute Name Description

majorTMNumber

It is used to specify the number of major tick marks.

minorTMNumber

It is used to specify the number of minor tick marks. Minor tick marks refer to the tick marks between two major tick marks.

Auto Adjustment of Ticks

The cylinder gauge can automatically adjust the number of major ticks to a best feasible value.

A cylinder gauge rendered with the automatic adjustment of tick marks disabled looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "majorTMNumber": "8", "minorTMNumber": "2", "adjustTM": "0" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMNumber": "8",
        "minorTMNumber": "2",
        "adjustTM": "0"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-7',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            "majorTMNumber": "8",
            "minorTMNumber": "2",
            //To adjust the tickmark and values automatically
            //to a best feasible value
            "adjustTM": "0"
        },
        "value": "75"

    },
    events: {
        'beforeRender': function(event, args) {

            // creating div for controllers
            var controllers = document.createElement('div'),
                gaugeRef = event.sender;

            controllers.setAttribute('id', 'controllers');

            // Create checkbox inside div
            controllers.innerHTML = '<input type="checkbox" id="tMarkCB">Adjust Tickmark ?</input>';
            args.container.parentNode.insertBefore(controllers, args.container.nextSibling);

            // setting css styles for controllers div
            controllers.style.cssText = "margin-top: 10px;text-align: center;";

            var adjustTickCB = document.getElementById('tMarkCB'),

                //Function to show/hide labels
                adjustTicks = function(evt, obj) {
                    //Using adjustTM attribute to adjust the
                    //number of major ticks to a best feasible value
                    if (adjustTickCB.checked) {
                        gaugeRef.setChartAttribute('adjustTM', 1);
                    } else {
                        gaugeRef.setChartAttribute('adjustTM', 0);
                    }
                }
                //Set event listener for check boxes
            adjustTickCB.addEventListener && adjustTickCB.addEventListener("click", adjustTicks);
        }

    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to enable/disable the auto adjustment of tick marks:

Attribute Name Description

adjustTM

It is used to specify whether to adjust the major tick mark number so as to best distribute the specified chart scale. Setting this attribute to 0 disables the automatic adjustment of tick marks, setting it to 1 (default) will enable it.

Configuring Tick Value Step

You can opt to show only every nth tick value on the gauge, instead of showing all the tick values.

A cylinder gauge configured to show tick values for only every second major tick mark looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "majorTMNumber": "13", "minorTMNumber": "1", "adjustTM": "0", "tickValueStep": "2" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMNumber": "13",
        "minorTMNumber": "1",
        "adjustTM": "0",
        "tickValueStep": "2"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-8',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            "majorTMNumber": "13",
            "minorTMNumber": "1",
            "adjustTM": "0",
            //To show every 2nd major tick mark's value
            "tickValueStep": "2"
        },
        "value": "75"

    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to configure the tick value step:

Attribute Name Description

tickValueStep

If we need to show every n-th tick value only, we can specify that value here. The upper and lower limit of the scale is always displayed.

Configuring Tick Mark Cosmetics

A cylinder gauge rendered with the appearance of the tick marks customized looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "majorTMColor": "#1aaf5d", "majorTMAalpha": "100", "majorTMHeight": "10", "majorTMThickness": "2", "minorTMColor": "#1aaf5d", "minorTMAlpha": "100", "minorTMHeight": "7", "minorTMThickness": "1", "tickmarkDistance": "5" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMColor": "#1aaf5d",
        "majorTMAalpha": "100",
        "majorTMHeight": "10",
        "majorTMThickness": "2",
        "minorTMColor": "#1aaf5d",
        "minorTMAlpha": "100",
        "minorTMHeight": "7",
        "minorTMThickness": "1",
        "tickmarkDistance": "5"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-9',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            //Tick mark cosmetics
            "majorTMColor": "#1aaf5d",
            "majorTMAalpha": "100",
            "majorTMHeight": "10",
            "majorTMThickness": "2",
            "minorTMColor": "#1aaf5d",
            "minorTMAlpha": "100",
            "minorTMHeight": "7",
            "minorTMThickness": "1",
            "tickmarkDistance": "5"
        },
        "value": "75"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to configure tick value step:

Attribute Name Description

majorTMColor

It is used to specify the hex code of the color that will be used to render the major tick marks. e.g. #1aaf5d

majorTMAalpha

It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40.

majorTMHeight

It is used to specify the height of the major tick marks, in pixels.

majorTMThickness

It is used to specify the thickness of the major tick marks, in pixels.

minorTMColor

It is used to specify the hex code of the color that will be used to render the minor tick marks. e.g. #1aaf5d

minorTMAlpha

It is used to specify the transparency of the minor tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70.

minorTMHeight

It is used to specify the height of the minor tick marks, in pixels.

minorTMThickness

It is used to specify the thickness of the minor tick marks, in pixels.

tickmarkDistance

It is used to specify the distance between the gauge and the tick marks, in pixels.

Applying Hover Effects

We can set hover/touch effects for the cylinder gauge to boost visualization; it allows you to give a prominent visual feedback from the point of focus.

A cylinder gauge rendered with the hover effects applied looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "cylFillHoverColor": "#0099fd", "cylFillHoverAlpha": "85" }, "value": "75" }
{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "cylFillHoverColor": "#0099fd",
        "cylFillHoverAlpha": "85"
    },
    "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: 'cylinder',
    dataFormat: 'json',
    id: 'fuelMeter-10',
    renderAt: 'chart-container',
    width: '250',
    height: '350',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Diesel Level in Generator",
            "subcaption": "Bakersfield Central",
            "lowerLimit": "0",
            "upperLimit": "120",
            "lowerLimitDisplay": "Empty",
            "upperLimitDisplay": "Full",
            "numberSuffix": " ltrs",
            "showValue": "1",
            "chartBottomMargin": "25",
            //Customizing cylinder fill color on hover/touch
            "cylFillHoverColor": "#0099fd",
            //Customizing cylinder transparency on hover/touch
            "cylFillHoverAlpha": "85"
        },
        "value": "75"
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is the list of attributes used to configure hover effects for a cylinder gauge:

Attribute Name Description

cylFillHoverColor

It is used to specify the hex code for the color that will be used to fill the cylinder when the mouse pointer is hovered over it. e.g #0099fd.

cylFillHoverAlpha

It is used to specify the transparency of the cylinder when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70.

Top