Loading
Configuring Cylinder Gauge
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:
{
"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 |
|---|---|
|
It is used to specify the hex code of the fill color for the cylinder, eg. |
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:
{
"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 |
|---|---|
|
It is used to specify the origin x-coordinate of the cylinder. e.g 30 |
|
It is used to specify the origin y-coordinate of the cylinder. e.g. 260 |
|
It is used to specify the radius of the cylinder. e.g. 40 |
|
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:
<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 |
|---|---|
|
It specifies whether to show/hide the chart value. Setting this attribute to |
Configuring Tick Marks and Tick Values
Hiding Ticks
A cylinder gauge configured to hide all tick marks and tick values looks like this:
{
"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 |
|---|---|
|
It is used to specify whether to show/hide the tick marks. Setting this attribute to |
|
It is used to specify whether to show/hide the tick values. Setting this attribute to |
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:
{
"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 |
|---|---|
|
It is used to specify whether to render the tick marks on the left or the right side of gauge. Setting this attribute to |
Customizing the Number of Ticks
A cylinder gauge rendered with the number of tick marks explicitly specified looks this:
{
"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 |
|---|---|
|
It is used to specify the number of major tick marks. |
|
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:
{
"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 |
|---|---|
|
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 |
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:
{
"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 |
|---|---|
|
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:
{
"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 |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the major tick marks. e.g. |
|
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. |
|
It is used to specify the height of the major tick marks, in pixels. |
|
It is used to specify the thickness of the major tick marks, in pixels. |
|
It is used to specify the hex code of the color that will be used to render the minor tick marks. e.g. |
|
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. |
|
It is used to specify the height of the minor tick marks, in pixels. |
|
It is used to specify the thickness of the minor tick marks, in pixels. |
|
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:
{
"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 |
|---|---|
|
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. |
|
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. |