Loading
Configuring Tick Marks
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:
-
Show/hide tick marks and tick values
-
Configure tick values
-
Configure the position of tick marks and values
-
Configure the number of major and minor tick marks
-
Configure tick mark cosmetics
-
Configure tick mark and tick value padding
Showing/Hiding Tick Marks and Tick Values
A linear gauge configured to show/hide tick marks and tick values looks like this:
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 |
The data structure needed to show/hide tick marks and tick values is given below:
{
"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"
}
]
}
}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:
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 |
The data structure needed to configure tick values is given below:
{
"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"
}
]
}
}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:
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 |
The data structure needed to configure the tick marks and values position is given below:
{
"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"
}
]
}
}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
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 |
The data structure needed to configure the number of major and minor tick marks is given below:
{
"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"
}
]
}
}Configuring Cosmetics for Tick Marks
A linear gauge configured for the cosmetic properties of major and minor tick marks looks like this:
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. |
The data structure needed to configure the cosmetic properties for major and minor tick marks is given below:
{
"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"
}
]
}
}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:
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. |
The data structure needed to configure the padding is given below:
{
"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"
}
]
}
}There! You have now seen how you can configure the functional and cosmetic properties of tick marks and tick values.