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
The cylinder gauge rendered in the example earlier was filled using the default fill color. However, you can set a different fill color .
A cylinder gauge with the fill color set to green (hex code: #1aaf5d) looks like this:
Given below is the attribute used to define custom colors for cylinder fill:
| Attribute Name | Description |
|---|---|
cylFillColor |
It is used to specify the fill color for the cylinder in hex code, eg. #1aaf5d. |
The data structure used to create the above sample is as follows:
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:
Given below is the list of 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 |
The data structure needed to customize the origin, radius, and height for the cylinder gauge is given below:
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:
Given below is the list of attributes used to show/hide chart’s 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. |
The data structure used to customize chart value display is as follows:
Configuring Tick Marks and Tick Values
Hiding Ticks
A cylinder gauge rendered with all tick marks and tick values hidden looks like this:
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 hide them. |
showTickValues |
It is used to specify whether to show/hide the tick values. Setting this attribute to 0 will hide the tick values, setting it to 1 (default) will hide them. |
The data structure used to customize tick marks and tick value display is as follows:
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:
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. |
The data structure used to customize the tick position is as follows:
Customizing the Number of Ticks
A cylinder gauge rendered with the number of tick marks explicitly specified looks this:
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. |
The data structure used to configure the number of ticks is as follows:
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:
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. |
The data structure used for auto adjustment of tick marks is as follows:
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 tick mark looks like this:
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. |
The data structure used for configuring the tick value step is as follows:
Configuring Tick Mark Cosmetics
A cylinder gauge rendered with the appearance of the tick marks customized looks like this:
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. |
The data structure used for configuring tick mark cosmetics is as follows:
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:
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. |
The data structure used for configuring the hover effect is as follows: