FusionCharts Suite XT allows you to customize several functional and cosmetic properties for the bulb gauge.
In this section you will be shown how you can:
Configure the gauge border
Use the gradient fill mix for the gauge border
Render the bulb gauge in 2D
Place the gauge value inside the gauge
Show range name instead of numerical value
Configure hover effects
Configuring the Gauge Border
A bulb gauge rendered with customized gauge border properties looks like this:
Given below is a brief description of the attributes used to customize the gauge border:
| Attribute Name | Description |
|---|---|
showGaugeBorder |
It is used to specify whether the gauge border will be shown or hidden. Setting this attribute to 0 will hide the gauge border, setting it to 1 (default) will show the border. |
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. 5. |
gaugeBorderAlpha |
It is used to specify the transparency for the gauge border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
The data structure needed to customize the gauge borders is given below:
Using Gradient Fill Mix for the Gauge Border
The gaugeBorderColor attribute is used to apply a single solid color to the gauge border, where the border color can be different from the fill color for the gauge. Using a gradient fill mix, you can render the border in a color that is darker or lighter than the fill color used for the gauge.
The gradient fill mix renders the border in a color that is darker/lighter than the initial color in which the gauge was rendered.
A bulb gauge rendered using a gradient fill mix for the border looks like this:
In the above chart, the gauge border is rendered in a color darker than the initial fill color. To do this, we have used one token of the gradient fill mix to render the bulb border using a color that is 30% darker than the fill color.
The data structure needed to configure a gradient fill mix for the bulb gauge border is given below:
Configuring the Origin and the Radius of the Bulb Gauge
By default, the gauge automatically determines its origin and radius based on the data you provide. However, FusionCharts Suite XT also allows you to explicitly specify the origin and radius of the gauge.
A bulb gauge rendered with the origin and radius configured manually looks like this:
Given below is a brief description of the attributes used to manually configure the origin and radius of the bulb gauge:
| Attribute Name | Description |
|---|---|
gaugeOriginX |
It is used to specify the x-origin value for the gauge, e.g. 150. |
gaugeOriginY |
It is used to specify the y-origin value for the gauge, e.g. 170. |
gaugeRadius |
It is used to specify the radius, in pixels, for the gauge, e.g. 105. |
The data structure needed to manually configure the gauge origin and radius is given below:
Rendering the Bulb Gauge in 2D
By default, the bulb gauge is rendered with a 3D look and feel. However, you can opt to render the bulb gauge in 2D.
A bulb gauge rendered in 2D looks like this:
Given below is a brief description of the attribute used to render a bulb gauge in 2D:
| Attribute Name | Description |
|---|---|
is3D |
It is used to specify whether the bulb gauge will be rendered in 2D or 3D. Setting this attribute to 0 renders the gauge in 2D, setting it to 1 (default) renders it in 3D. |
The data structure needed to render a bulb gauge in 2D is given below:
Placing the Gauge Value Inside the Gauge
By default, the gauge value is rendered outside the gauge. FusionCharts Suite XT allows you to render the value inside the gauge.
A bulb gauge configured to render the gauge value inside the gauge looks like this:
Given below is a brief description of the attribute used to render the gauge value inside:
| Attribute Name | Description |
|---|---|
placeValuesInside |
It is used to specify whether the gauge value will be rendered inside the gauge or outside it. Setting this attribute to 1 will place the gauge values inside the gauge, setting it to 0 (default) will place them outside. |
The data structure needed to place the gauge value inside the gauge is given below:
Rendering the Range Name as the Gauge Label
By default, the current numerical value of the gauge is rendered on the gauge. Instead, you can opt to show the range name on the gauge.
A bulb gauge configured to show the range name instead of the numerical as the gauge label looks like this:
Given below is a brief description of the attribute used to render the range name:
| Attribute Name | Description |
|---|---|
useColorNameAsValue |
It is used to specify whether the range name will be rendered on the gauge instead of the numerical value. Setting this attribute to 1 will show the color range name as the value, setting it to 0 (default) will show the numerical value. |
The data structure needed to render the color range name instead of the numerical value is given below:
Configuring the Hover Effect
FusionCharts Suite XT allows you to display hover effects for the gauge.
A bulb 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 various functional and cosmetic properties of the bulb gauge.