Configuring Gauge Cosmetics

FusionCharts Suite XT allows you to configure the functional and cosmetic properties of the linear gauge to improve its visual representation.

In this section, you will be shown how you can:

  • Configure pointer properties

  • Add tool text and link to a pointer

  • Add multiple pointers

  • Configure the pointer value

  • Configure the pointer position

  • Configure the gauge gradient mix

  • Configure the gauge borders

  • Hide gauge labels

  • Configure gauge labels

  • Configure hover effects for the gauge

Configuring Pointer Properties

A linear gauge configured for the cosmetic properties of the pointer looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the pointer cosmetic properties:

Attribute Name Description
borderColor It is used to specify the hex code for the color that will be applied to the pointer border, e.g. #1aaf5d.
borderThickness It is used to specify the thickness, in pixels, for the pointer border, e.g. 5
bgColor It is used to specify the hex code for the color that will applied to the background of the pointer, e.g. #E3234A
bgAlpha It is used to specify the transparency for the background of the pointer. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50.
radius It is used to specify the radius, in pixels, of the pointer.
sides It is used to specify the number of sides for the pointer; this determines the shape of the pointer, e.g a 4-sided pointer looks like a diamond.

These attributes belong to the pointer object, which in turn belongs to the pointers object.

The data structure needed to configure the cosmetic properties of the pointer is given below:

...

Adding Tool-text and a Link to the Pointer

A linear gauge with the pointer having a tool-text and pointing to an external link looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to add a tool-text and an external link for the pointer:

Attribute Name Description
toolText It is used to specify the tool-text that will be rendered when the mouse pointer is hovered over the pointer.
link It is used to specify the URL to which you will be navigated if you click the pointer. The link to the external URL is defined using the FusionCharts link format.

These attributes belong to the pointer object, which in turn belongs to the pointers object.

The data structure needed to add tool-text and link the pointer to an external URL is given below:

...

Adding Multiple Pointers

A linear gauge rendered with two pointers, showing the server CPU utilization for the transaction server and the web server at Harry’s SuperMart, looks like this:

FusionCharts should load here..

To add multiple pointers, you only need to create multiple instances of the pointer object, which belongs to the pointers object.

The data structure needed to add multiple pointers for a linear gauge is given below:

...

Configuring the Pointer Value

A linear gauge rendered with the pointer value configured looks like this:

FusionCharts should load here..

The gauge shown above is rendered with two check boxes below it: Show Value and Place Value Above Pointer. If you select the Show Value check box, the value of the pointer is shown; if you deselect it, the value is hidden. If you select the Place Value Above Pointer check box, the value is placed above the pointer; if you deselect it, the value is shown below.

Given below is a brief description of the attributes used to configure the pointer value:

Attribute Name Description
showValue It is used to specify whether the pointer’s value will be shown or hidden. Setting this attribute to 0 will hide the pointer value, setting it to 1 (default) will show it.
valueAbovePointer It is used to specify whether the value will be shown above or below the pointer. Setting this attribute to 1 will place the value above the pointer, setting it to 0 (default) will place the value below it.

These attributes belong to the pointer object, which in turn belongs to the pointers object.

The data structure needed to configure the pointer value is given below:

...

Configuring the Pointer Position

You can configure the pointer to show on top of scale or bottom as shown below:

FusionCharts should load here..

Given below is the list of attributes used to configure pointer value:

Attribute Name Description
pointerOnTop It is used to specify whether the pointer will be shown at the top of the gauge scale or at the bottom. Setting this attribute to 0 will show the pointer at the bottom of the gauge, setting it to 1 (default) will show the pointer at the top.

This attribute belongs to the chart object.

The data structure of the above sample is as follows:

...

Configuring the Gauge Gradient Mix

A linear gauge configured using the gauge gradient mix looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the gauge gradient mix:

Attribute Name Description
gaugeFillMix It is used to specify the gradient fill formula for the linear gauge scale, e.g. {light-10},{light-70},{dark-10}
gaugeFillRatio It is used to specify the ratio in which the fill mix will be applied to the gauge, e.g. 40,20,40.

The data structure needed to configure the gradient mix for the gauge looks like this:

...

Configuring Gauge Borders

A linear gauge configured for border cosmetic properties looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure gauge borders:

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. You can either specify a hex code here or a single token from the gradient fill mix like {dark-20} or {light-30}. The chart will then calculate the border color for each color range individually (based on the color code for each color range).
gaugeBorderThicknes 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 configure the cosmetic properties for gauge borders is given below:

...

Hiding Gauge Labels

A linear gauge configured to hide gauge labels looks like this:

FusionCharts should load here..

Look at the Show Labels? check box rendered below the above linear gauge. If you select this check box, you can see the label for each color range on the gauge scale. If you deselect the check box, the labels are hidden.

Given below is a brief description of the attribute used to hide gauge labels:

Attribute Name Description
showGaugeLabels It is used to specify whether the gauge (color range scale) labels will be shown or not. Setting this attribute to 0 will hide gauge labels, setting it to 1 (default) will show them.

The data structure needed to show/hide gauge labels is given below:

...

An alternate way to not show gauge labels is by not initializing the label attribute for the color object.

Configuring Hover Effects for the Gauge

Starting FusionCharts Suite XT v3.4, you can use hover effects to improve the visual representation of your gauge; you can configure the pointer cosmetics to change when the mouse pointer is hovered over it.

A linear gauge configured for hover effects looks like this:

FusionCharts should load here..

Hover your mouse pointer above the gauge pointer and observe how the cosmetics of the pointer change.

Given below is a brief description of the attributes used to configure hover effects for the gauge:

Attribute Name Description
pointerBgHoverColor It is used to specify the hex code of the color that will be used to render the pointer when the mouse pointer is hovered over it, e.g. #333333.
pointerBgHoverAlpha It is used to specify the transparency of the pointer when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70.
showBorderOnHover It is used to specify whether the pointer border will be shown when the mouse pointer is hovered over it. Setting this attribute to 1 will show the pointer border, setting it to 0 (default) will hide it.
pointerBorderHoverThickness It is used to specify the thickness, in pixels, of the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the showBorderOnHover attribute to 1.
pointerBorderHoverColor It is used to specify the hex code of the color that will be used to render the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the showBorderOnHover attribute to 1.
pointerBorderHoverAlpha It is used to specify the transparency of the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the showBorderOnHover attribute to 1.
pointerHoverRadius It is used to specify the radius, in pixels, of the pointer when the mouse pointer is hovered over it.

The data structure needed to configure hover effects for the linear gauge is given below:

...

There! You have now seen how you can configure the cosmetic properties for gauge elements.