Configuring Dials

FusionCharts Suite XT allows you to configure dials in angular gauges for several cosmetic and functional properties.

In this section, with respect to dials, we will see how to:

  • Configure the border and background

  • Configure the radius and rear extension

  • Configure the base width and top width

  • Configure the hover effect

  • Add custom tool text

  • Add multiple dials on the chart

  • Customize dial values

  • Update dials using their ID

Configuring the Border and Background of the Dial

Configuring Border

An angular chart with the border of the dial configured looks like this:

FusionCharts should load here..

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

Attribute Name Description
borderColor It is used to specify the hex code of the color that will be used to render the dial border, e.g. #cca3def.
borderThickness It is used to specify the thickness, in pixels, of the dial border, e.g. 10.
borderAlpha It is used to specify the transparency of the border alpha for the dial. The possible range of values is 0 to 100. Setting it to 0 will make the border completely transparent and 100 will make it completely opaque. Additionally you can configure the dial to show/hide border through this attribute.

The data structure needed to render a customized border around the dial is given below:

...

Configuring Background

An angular gauge rendered with the background of the dial filled with a single color looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to fill the dial background with a single color:

Attribute Name Description
bgColor It is used to specify the hex code of the color that will be used to fill the background for the dial. This attribute can take as value a single color (e.g. #CCCCCC) to render a solid-fill background or a comma-separated list of colors (e.g. #666666, #FFFFFF, #000000) to render a gradient-fill background.

The data structure needed to configure a solid-fill background for the dial is given below:

...

An angular gauge rendered with a gradient-fill background configured for the dial looks like this:

FusionCharts should load here..

The data structure needed to configure a gradient-fill background for the dial is given below:

...

Configuring the Radius and Rear Extension

By default, the radius of the dial is configured by the gauge automatically. However, you can opt to explicitly specify the radius for the dial as well as the rear extension (extension on the opposite side) to achieve a more realistic look for the gauge.

An angular gauge configured for the radius and rear extension of the dial looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the radius and rear extension of the dial:

Attribute Name Description
radius It is used to specify the radius for the dial, in pixels.
rearExtension It is used to specify the distance, in pixels, by which the dial will extend beyond the pivot, in the opposite direction.

The data structure needed to configure the radius and rear extension for the dial is given below:

...

Configuring the Base Width and the Top Width

Increasing the base and top width of a dial will increase the thickness of the base and the top, thus allowing you to have different dial shapes that suit your design requirements.

An angular gauge with the base and top width configured for the dial looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the base and top width for the dial:

Attribute Name Description
baseWidth It is used to specify the width, in pixels, of the bottom of the dial (the part connected to the pivot), e.g. 10
topWidth It is used to specify the width, in pixels, of the top of the dial, e.g. 5

The data structure needed to configure the base and top width of a dial is given below:

...

Configuring Hover Effects

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

An angular gauge with the dial configured for the hover effect looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure the hover effect for the dial:

Attribute Name Description
showHoverEffect It is used to specify whether the hover effect will be configured for the gauge elements. Setting this attribute to 1 enables the hover effects, setting it to 0 (default) disables them. This attribute belongs to the chart object and hence is global.
bgHoverColor It specifies the hex code for the color that will be used to render the dial when the mouse pointer is hovered over it, e.g. #444444
bgHoverAlpha It specifies the transparency for the dial when the mouse pointer is hovered over it, e.g. 50
borderHoverColor It specifies the hex code for the color that will be used to render the border of the dial when the mouse pointer is hovered over it, e.g. #333333.
borderHoverAlpha It specifies the transparency for the border of the dial when the mouse pointer is hovered over it, e.g. 30
borderHoverThickness It specifies the thickness for the border of the dial when the mouse pointer is hovered over it, e.g. 5

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

...

Adding Custom Tool-text for the Dial

An angular gauge rendered with the tool-tip text configured for the dial looks like this:

FusionCharts should load here..

Given below is a brief description of the attribute used to configure the tool-text for the dial:

Attribute Name Description
tooltext It is used to specify the text that will be rendered as the tool-tip when the mouse pointer is hovered over the dial.

The data structure needed to configure the tool-text for the dial is given below:

...

The method for adding a tool-text used in the above gauge will work when the gauge does not receive real-time updates. In case of real-time updates, the data value will change at specific intervals of time and, therefore, the tool-tip text should be updated accordingly.

This can be achieved using macros.

An angular gauge configured to update the tool-tip text for the dial in real-time looks like this:

FusionCharts should load here..

The data structure needed to configure a real-time update of the tool-tip text for the dial is given below:

...

The above sample replaces the hard-coded value with the macro $value. Now, whenever someone will roll-over the dial, the current value of the dial will be displayed along with the text set in the tooltext attribute of dial element.

For the complete understanding of the tooltip macros or a detail list of available macros please refer to this document.

Adding Multiple Dials on the Gauge

You can add any number of dials to an angular gauge, with each dial configured to have its own value and individual properties.

An angular gauge rendered with two dials looks like this:

FusionCharts should load here..

To create multiple dials, you only have to create multiple dial objects; as many the number of dials you want, as many the number of the dial objects you create. The attributes to configure the functional and cosmetic properties for each dial will be initialized separately in each object instance.

The data structure needed to render multiple dials in an angular gauge is given below:

...

Customizing Dial Values

Along with configuring the appearance of the dial, you can also show/hide dial values and configure their placement.

An angular gauge rendered with two dials, with dial values customized, looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to configure dial values:

Attribute Name Description
showValue It is used to specify whether the value of the dial will be shown or hidden. Setting this attribute to 0 will hide the value, setting it to 1 (default) will show it. This attribute belongs to the dial object, which in turn belongs to the dials object.
valueX It is used to specify the x-position of the value text-field, e.g. 260. This attribute belongs to the dial object, which in turn belongs to the dials object.
valueY It is used to specify the y-position of the value text-field, e.g. 220. This attribute belongs to the dial object, which in turn belongs to the dials object.
valueFont It is used to specify the font-family to be used to render the values on the gauge, e.g. Arial.
valueFontColor It is used to specify the hex code of the color that will be used to render the value, e.g. #CCCCCC.
valueFontSize It is used to specify the font size for the value. This attribute takes values between 0 and 72, e.g. 50.
valueFontBold It is used to specify whether bold formatting should be applied to the value. Setting this attribute to 1 enables bold formatting, setting it to 0 (default) disables it.
valueFontItalic It is used to specify whether the value should be italicized. Setting this attribute to 1 enables the value to be italicized, setting it to 0 (default) disables it.
valueBgColor It is used to specify the hex code for the color that will be used to render the background of the value., e.g. #555555
valueBorderColor It is used to specify the hex code for the color that will be used to render a border around the value text, e.g. #444444.
valueAlpha It is used to specify the transparency of the value.
valueFontAlpha It is used to specify the transparency of the font used for the value.
valueBgAlpha It is used to specify the transparency for the value background, e.g. 50
valueBorderAlpha It is used to specify the transparency for the value border, e,g. 60.
valueBorderThickness It is used to specify the thickness, in pixels, for the value border.
valueBorderRadius It is used to specify the radius, in pixels, for the value border.
valueBorderDashed It is used to specify whether the border around the value will be rendered using dashed lines. Setting this attribute to 1 will render the border using dashed lines, setting it to 0 (default) will render it in whole lines.
valueBorderDashGap It is used to specify the length, in pixels, of each dash if the value border is rendered using dashed lines.
valueBorderDashLen It is used to specify the gap between each dash, in pixels, if the value border is rendered using dashed lines.

The data structure needed to customize dial values is given below:

...

Updating Dials using ID

When angular gauges with multiple dials are used in real-time applications, it becomes very important that the each dial is updated with the correct value. To help identify each dial correctly, a unique ID is configured for each dial on the gauge.

Given below is a brief description of the attribute used to configure an ID for teach dial:

Attribute Name Description
id It is used to specify a unique identification for a dial on the gauge, e.g. Dial 1. This attribute belongs to the dial object, which in turn belongs to the dials object.

To learn how to create real-time angular gauges please refer to Creating Real-time Gauges section.

There! You have now seen how you can configure the functional and cosmetic properties of dials and their values.