FusionCharts Suite XT allows you to configure various cosmetic and functional properties of LED gauges.
In this section, you will be shown how you can:
Configure the LED gauge background color
Use a single color fill for the LED background
Show/hide the gauge border
Customize gauge border properties
Configure the LED bar size and gap
Set the chart value display
Configure tick marks and values
Configure hover effects
Configuring the LED Gauge Background Color
A LED gauge with the background color configured looks like this:
Given below is a brief description of the attribute used to configure the background color:
| Attribute Name | Description |
|---|---|
gaugeFillColor |
It is used to specify the hex code for the color that will applied to the gauge background, e.g. #666666. |
The data structure needed to configure the gauge background is given below:
Using a Single Color for the LED Fill and Background
When you divide the LED scale into color ranges, the LED bars in each zone take up the fill color of that color range. You can, however, render the LED background using a single fill color - the color of the range to which the current value belongs.
A LED gauge rendered with a single color for the LED fill and background looks like this:
Given below is a brief description of the attributes used to apply a single color for the LED fill and the LED background::
| Attribute Name | Description |
|---|---|
useSameFillColor |
It is used to specify whether a single fill color - the color of the range to which the current value belongs - will be applied to the activated LED bars. Setting this attribute to 1 will apply the same fill color, setting it to 0 (default) will apply the color specific to that range. |
useSameFillBgColor |
It is used to specify whether a single color - the color of the range to which the current value belongs - will be applied to the entire LED background. Setting this attribute to 1 will apply the same fill color, setting it to 0 (default) will apply the color specific to that range. |
The data structure needed to apply the same color for the LED fill and the LED background is given below:
Showing/Hiding the Gauge Border
A LED gauge rendered with the border hidden looks like this:
Given below is a brief description of the attribute used to show/hide the LED gauge border:
| Attribute Name | Description |
|---|---|
showGaugeBorder |
It is used to specify whether the border for the LED gauge will be shown. Setting this attribute to 0 hides the gauge border, setting it to 1 (default) shows it. |
The data structure needed to hide the gauge border is given below:
Customizing Gauge Border Properties
A LED gauge rendered with a customized border looks like this:
Given below is a brief description of the attributes used to customize the gauge border:
| Attribute Name | Description |
|---|---|
gaugeBorderColor |
It is used to specify the hex code of the color that will be used to render the entire border of the gauge, e.g. #111111. |
gaugeBorderThickness |
It is used to specify the thickness, in pixels, for the gauge border, e.g. 7. |
gaugeBorderAlpha |
It is used to specify the transparency for the gauge border. This attribute takes values 0 (transparent) and 100 (opaque), e.g. 40. |
The data structure needed to customize the gauge border is given below:
Configuring the LED Bar Size and Gap
By default, the gauge determines the bar size and the gap automatically, based on the data provided by you. However, you can explicitly specify the bar size and gap.
A LED gauge configured for the LED bar size and gap looks like this:
Given below is a brief description of the attributes used to configure the LED bar size and gap:
| Attribute Name | Description |
|---|---|
ledSize |
It is used to specify the size, in pixels, of the LED bar, e.g. 5. |
ledGap |
It is used to specify LED bar gap,e.g. 3. |
The data structure needed to configure the LED bar size and gap is given below:
To make the LEDs appear continuous, you can set ledGap to 0.
Showing/Hiding Chart Value
A LED gauge rendered with the chart value hidden looks like this:
Given below is a brief description of the attribute used to show/hide the chart value:
| Attribute Name | Description |
|---|---|
showValue |
It is used to specify whether the current data value, or the chart value, should be shown. Setting this attribute to 0 hides the chart value, setting it to 1 (default) shows it. |
The data structure needed to hide the chart value is given below:
Given below the attribute to show / hide LED gauge value:
| Attribute Name | Description |
|---|---|
showValue |
Boolean that sets the visibility for chart value, default value 1, e.g., 0 |
Configuring Tick Marks and Values
A LED gauge with the tick marks and values hidden looks like this:
Given below is a brief description of the attributes used to show/hide tick marks and tick values:
| Attribute Name | Description |
|---|---|
showTickMarks |
It is used to specify whether tick marks will be shown for the LED gauge. Setting this attribute to 0 hides the tick marks, setting it to 1 (default) shows them. |
showTickValues |
It is used to specify whether tick values will be shown for the LED gauge. Setting this attribute to 0 hides the tick values, setting it to 1 (default) shows them. |
The data structure needed to hide tick marks and tick values is given below:
By default, the tick marks and values are placed below the gauge in the horizontal LED gauge and to the right in the vertical LED gauge. However, you can explicitly configure the position of tick marks and tick values as required.
You can also configure the number of tick marks, set the tick marks and tick values distance, and skip the tick values.
A LED gauge with the tick marks and tick values configured looks like this:
Given below is a brief description of the attributes used to configure tick marks and tick values:
| Attribute Name | Description |
|---|---|
ticksBelowGauge |
It is used to specify whether the tick marks and values will be rendered below or above the gauge. Setting this attribute to 0 renders the tick marks and values above the gauge, setting it to 1 (default) renders them below the gauge. This attribute is applicable only to the horizontal LED gauge. |
ticksOnRight |
It is used to specify whether the tick marks and values will be rendered to the left or the right. Setting this attribute to 0 renders the tick marks and values on the left, setting it to 1 (default) renders them on the right. This attribute is applicable only to the vertical LED gauge. |
tickMarkDistance |
It is used to specify the distance, in pixels, between the tick marks and the gauge scale, e.g. 10. |
tickValueDistance |
It is used to specify the distance, in pixels, between the tick marks and the tick values, e.g. 5. |
adjustTM |
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 0 disables automatic adjustment of tick marks, setting it to 1 (default) enables it. |
majorTMNumber |
It is used to specify the number of major tick marks to be rendered, e.g. 12. |
majorTMHeight |
It is used to specify the height of major tick marks, e.g., 5 |
minorTMNumber |
It is used to specify the number of minor tick marks to be rendered, e.g. 4. |
minorTMHeight |
It is used to specify the height of minor tick marks, e.g., 7. |
tickValueStep |
If you need to show only every n-th tick value , this attribute is used to specify that value. |
The data structure needed to configure the tick marks and tick values is given below:
FusionCharts Suite XT also allows you to configure the cosmetics of major and minor tick marks.
A LED gauge rendered with customized major and minor tick marks looks like this:
Given below is a brief description of the attributes used to configure the major and minor tick marks:
| Attribute Name | Description |
|---|---|
majorTMColor |
It is used to specify hex code of the color using which the major tick marks will be rendered, e.g. #666666. |
majorTMAlpha |
It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
majorTMThickness |
It is used to specify the thickness of the major tick marks, e.g. 5. |
minorTMColor |
It is used to specify hex code of the color using which the minor tick marks will be rendered, e.g. #AAAAAA. |
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. 50. |
minorTMThickness |
It is used to specify the thickness of the minor tick marks, e.g. 5. |
The data structure needed to customize the tick marks and tick values is given below:
Configuring the Hover Effect
FusionCharts Suite XT allows you to display hover effects for the gauge.
An LED gauge configured for hover effects looks like this:
Given below is a brief description of the attribute used to enable the hover effect for the LED gauge:
| Attribute Name | Description |
|---|---|
showHoverEffect |
It is used to specify whether the hover effect will be enabled for the LED gauge. Setting this attribute to 1 enables the hover effect, setting it to 0 (default) disables it. |
The data structure needed to enable hover effects for the LED gauge is given below:
There! You have now seen how you can configure the cosmetic properties for the horizontal/vertical LED gauge.