Configuring Gauge

FusionCharts Suite XT offers you several options to configure and customize the cylinder gauge to suit your requirements.

In this section, using a simple example, you will be shown how to:

  • Set the cylinder fill color

  • Customize the cylinder origin, radius, and height

  • Show or hide the chart value

  • Configure tick marks and tick values

  • Apply hover effects to the gauge

Setting Cylinder Fill Color

The cylinder gauge rendered in the example earlier was filled using the default fill color. However, you can set a different fill color .

A cylinder gauge with the fill color set to green (hex code: #1aaf5d) looks like this:

FusionCharts should load here..

Given below is the attribute used to define custom colors for cylinder fill:

Attribute Name Description
cylFillColor It is used to specify the fill color for the cylinder in hex code, eg. #1aaf5d.

The data structure used to create the above sample is as follows:

...

Customizing Cylinder Origin, Radius, and Height

By default, the chart automatically calculates the best-fit coordinates and size for the cylinder. However, you can also customize the origin, radius, and height of the cylinder gauge, if your requirement differs from the default measures.

A cylinder gauge rendered using user-defined origin, radius, and height looks like this:

FusionCharts should load here..

Given below is the list of attributes used to customize the cylinder origin, radius, and height:

Attribute Name Description
cylOriginX It is used to specify the origin x-coordinate of the cylinder. e.g 30
cylOriginY It is used to specify the origin y-coordinate of the cylinder. e.g. 260
cylRadius It is used to specify the radius of the cylinder. e.g. 40
cylHeight It is used to specify the height of the cylinder. e.g. 150

The data structure needed to customize the origin, radius, and height for the cylinder gauge is given below:

...

Configuring Chart Value Display

By default, the chart data value indicated by the cylinder gauge is shown below the gauge. You can also choose to hide this value.

A cylinder gauge rendered with the chart value hidden looks like this:

FusionCharts should load here..

Given below is the list of attributes used to show/hide chart’s value:

Attribute Name Description
showValue It specifies whether to show/hide the chart value. Setting this attribute to 1 (default) will show the chart value below the gauge, setting it to 0 will hide the chart value.

The data structure used to customize chart value display is as follows:

...

Configuring Tick Marks and Tick Values

Hiding Ticks

A cylinder gauge rendered with all tick marks and tick values hidden looks like this:

FusionCharts should load here..

The cylinder gauge shown here is designed in a way that the user decides whether or not to render the tick marks and tick values. Selecting the check boxes below the chart will show the tick marks and values; clearing them hides tick marks and values again.

Given below is the list of attributes used to show/hide tick marks and values:

Attribute Name Description
showTickMarks It is used to specify whether to show/hide the tick marks. Setting this attribute to 0 will hide the tick marks, setting it to 1 (default) will hide them.
showTickValues It is used to specify whether to show/hide the tick values. Setting this attribute to 0 will hide the tick values, setting it to 1 (default) will hide them.

The data structure used to customize tick marks and tick value display is as follows:

...

Positioning Ticks

By default, the tick marks and tick values are rendered to the right of the gauge.

A cylinder gauge rendered with the tick marks and values positioned to the left looks like this:

FusionCharts should load here..

Given below is the list of attributes used to customize the tick position:

Attribute Name Description
ticksOnRight It is used to specify whether to render the tick marks on the left or the right side of gauge. Setting this attribute to 0 will render the tick marks on the left side of the gauge scale, setting it to 1 (default) will render them on the right.

The data structure used to customize the tick position is as follows:

...

Customizing the Number of Ticks

A cylinder gauge rendered with the number of tick marks explicitly specified looks this:

FusionCharts should load here..

Given below is the list of attributes used to customize the number of tick marks::

Attribute Name Description
majorTMNumber It is used to specify the number of major tick marks.
minorTMNumber It is used to specify the number of minor tick marks. Minor tick marks refer to the tick marks between two major tick marks.

The data structure used to configure the number of ticks is as follows:

...

Auto Adjustment of Ticks

The cylinder gauge can automatically adjust the number of major ticks to a best feasible value.

A cylinder gauge rendered with the automatic adjustment of tick marks disabled looks like this:

FusionCharts should load here..

Given below is the list of attributes used to enable/disable the auto adjustment of tick marks:

Attribute Name Description
adjustTM It is used to specify whether to adjust the major tick mark number so as to best distribute the specified chart scale. Setting this attribute to 0 disables the automatic adjustment of tick marks, setting it to 1 (default) will enable it.

The data structure used for auto adjustment of tick marks is as follows:

...

Configuring Tick Value Step

You can opt to show only every nth tick value on the gauge, instead of showing all the tick values.

A cylinder gauge configured to show tick values for only every second tick mark looks like this:

FusionCharts should load here..

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

Attribute Name Description
tickValueStep If we need to show every n-th tick value only, we can specify that value here. The upper and lower limit of the scale is always displayed.

The data structure used for configuring the tick value step is as follows:

...

Configuring Tick Mark Cosmetics

A cylinder gauge rendered with the appearance of the tick marks customized looks like this:

FusionCharts should load here..

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

Attribute Name Description
majorTMColor It is used to specify the hex code of the color that will be used to render the major tick marks. e.g. #1aaf5d
majorTMAalpha It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 40.
majorTMHeight It is used to specify the height of the major tick marks, in pixels.
majorTMThickness It is used to specify the thickness of the major tick marks, in pixels.
minorTMColor It is used to specify the hex code of the color that will be used to render the minor tick marks. e.g. #1aaf5d
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. 70.
minorTMHeight It is used to specify the height of the minor tick marks, in pixels.
minorTMThickness It is used to specify the thickness of the minor tick marks, in pixels.
tickmarkDistance It is used to specify the distance between the gauge and the tick marks, in pixels.

The data structure used for configuring tick mark cosmetics is as follows:

...

Applying Hover Effects

We can set hover/touch effects for the cylinder gauge to boost visualization; it allows you to give a prominent visual feedback from the point of focus.

A cylinder gauge rendered with the hover effects applied looks like this:

FusionCharts should load here..

Given below is the list of attributes used to configure hover effects for a cylinder gauge:

Attribute Name Description
cylFillHoverColor It is used to specify the hex code for the color that will be used to fill the cylinder when the mouse pointer is hovered over it. e.g #0099fd.
cylFillHoverAlpha It is used to specify the transparency of the cylinder when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70.

The data structure used for configuring the hover effect is as follows:

...