Configuring Gauge

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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:

FusionCharts should load here..

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.