Configuring Tick Marks in Linear Gauge
FusionCharts Suite XT allows you to configure several functional and cosmetic properties for tick marks and tick values.
In this section, you will be shown how to:
Showing/Hiding Tick Marks and Tick Values
A linear gauge configured to show/hide tick marks and tick values looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge-1',
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"
}]
}
},
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;width: 400px;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>Look at the check boxes rendered below the gauge. If you select the Show Tick Mark? check box, the tick marks will be shown; if you clear it, they will be hidden. Similarly, you can select/clear the Show Tick Value? check box to show/hide tick values.
Given below is a brief description of the attributes used to show/hide tick marks and tick values:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the tick marks will be shown or hidden on the gauge scale. Setting this attribute to |
|
It is used to specify whether the tick values will be shown or hidden on the gauge scale. Setting this attribute to |
Configuring Tick Values
When you have a large number of tick marks on the gauge scale, showing all tick values can make the gauge appear clumsy. To avoid this, you can opt to show every nth tick value on the gauge scale. You can also configure whether decimal values will be rendered as tick values and the number of digits that appear after the decimal point.
A linear gauge configured to render decimal tick values corresponding to every alternate tick mark looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"majorTMNumber": "10",
"tickValueStep": "2",
"tickValueDecimals": "1",
"forceTickValueDecimals": "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-2',
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",
"majorTMNumber": "10",
//To show every nth major tick mark's value being shown
"tickValueStep": "2",
//set the decimals for the tick values
"tickValueDecimals": "1",
//Forcing to display decimals
"forceTickValueDecimals": "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"
}]
}
}
}
);
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 tick values:
| Attribute Name | Description |
|---|---|
|
If you need to show only every n-th tick value, this attribute is used to specify that value. |
|
It is used to specify the number of digits that will be rendered after the decimal point, e.g. 2. |
|
It is used to specify whether decimals will be forced on tick values. Setting this attribute to |
Configuring the Position of Tick Marks and Tick Values
By default, the tick marks are placed outside the gauge, below the gauge scale. The tick values are also rendered outside the gauge. You can, however, configure the position of tick marks and tick values based on your requirements.
A linear gauge configured to place tick marks and tick values inside the gauge, above the gauge scale, looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"ticksBelowGauge": "0",
"placeTicksInside": "0",
"placeValuesInside": "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',
id: 'cpu-linear-gauge-3',
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",
//Placing the tick above/below the gauge
"ticksBelowGauge": "0",
//Placing the ticks outside of the gauge
"placeTicksInside": "0",
//Placing the tick values outside of the gauge
"placeValuesInside": "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 positions of tick marks and tick values:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the tick marks will be rendered above or below the gauge. Setting this attribute to |
|
It is used to specify whether the tick marks will be placed inside the gauge or outside it. Setting this attribute to |
|
It is used to specify whether the tick values will be placed inside the gauge or outside it. Setting this attribute to |
Configuring the Number of Major and Minor Tick Marks
By default, the gauge automatically decides the number of major and minor tick marks to be rendered based on the data you provide. However, you can explicitly specify the number of tick marks to be rendered.
A linear gauge with the number of major and minor tick marks explicitly set to 9 and 5, respectively, looks like this
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"majorTMNumber": "9",
"minorTMNumber": "5",
"adjustTM": "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-4',
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",
//To set the number of major tickmarks
"majorTMNumber": "9",
//To set the number of minor tick marks
//in between major tick marks
"minorTMNumber": "5",
//To adjust the tickmark and values automatically
//to a best feasible value
"adjustTM": "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 = '<label><input type="checkbox" id="tMarkCB" checked />Adjust Tickmark? </label>';
// 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 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 (evt.currentTarget.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 a brief description of the attributes used to configure the number of tick marks:
| Attribute Name | Description |
|---|---|
|
It is used to specify the number of major tick marks to be rendered. |
|
It is used to specify the number of minor tick marks to be rendered. |
|
It is used to specify whether the number of major tick marks should be automatically adjusted to ensure better distribution of the chart scale. Setting this attribute to |
Configuring Cosmetics for Tick Marks
A linear gauge configured for the cosmetic properties of major and minor tick marks looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"minorTMNumber": "4",
"majorTMColor": "#163143",
"majorTMAlpha": "50",
"majorTMHeight": "7",
"majorTMThickness": "2",
"minorTMColor": "#163143",
"minorTMAlpha": "30",
"minorTMHeight": "4",
"minorTMThickness": "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-5',
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",
//Tick mark cosmetics
"minorTMNumber": "4",
"majorTMColor": "#163143",
"majorTMAlpha": "50",
"majorTMHeight": "7",
"majorTMThickness": "2",
"minorTMColor": "#163143",
"minorTMAlpha": "30",
"minorTMHeight": "4",
"minorTMThickness": "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"
}]
}
}
}
);
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 tick marks’ cosmetics:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the color using which the major tick marks will be rendered on the gauge, e.g. #333333. |
|
It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
|
It is used to specify the height of the major tick marks, e.g. 15. |
|
It is used to specify the thickness of the major tick marks, e.g. 2. |
|
It is used to specify the hex code of the color using which the minor tick marks will be rendered on the gauge, e.g. #666666. |
|
It is used to specify the transparency of the minor tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100. |
|
It is used to specify the height of the minor tick marks, e.g. 12. |
|
It is used to specify the thickness of the minor tick marks, e.g. 1. |
Configuring the Tick Mark and Tick Value Padding
By default, the gauge automatically decides the padding distance for tick marks and tick values. However, you can explicitly specify the padding distance.
A linear gauge configured for the tick mark and tick value padding looks like this:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"tickMarkDistance": "5",
"tickValueDistance": "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',
id: 'cpu-linear-gauge-6',
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",
//Setting the tick mark distance from gauge
"tickMarkDistance": "5",
//Setting the tick value distance from tick mark
"tickValueDistance": "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 tick mark and tick value padding:
| Attribute Name | Description |
|---|---|
|
It used to specify the distance, in pixels, between the gauge scale and the tick marks. |
|
It is used to specify the distance, in pixels, between the tick marks and their corresponding tick values. |