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

By default, the cylinder gauge is filled using the default fill color. However, you can set a different fill color for the gauge.

A cylinder gauge with the fill color set to green looks like this:

FusionCharts will 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 hex code of the fill color for the cylinder, eg. `#1aaf5d`.

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

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "cylFillColor": "#1aaf5d"
    },
    "value": "75"
}

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 will load here..

Given below is a brief description of the 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:

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "cyloriginx": "30",
        "cyloriginy": "260",
        "cylradius": "40",
        "cylheight": "150"
    },
    "value": "75"
}

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 will load here..

Given below is a brief description of the attribute used to show/hide the chart 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:

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "0",
        "chartBottomMargin": "25"
    },
    "value": "75"
}

Configuring Tick Marks and Tick Values

Hiding Ticks

A cylinder gauge configured to hide all tick marks and tick values looks like this:

FusionCharts will 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 show them.
`showTickValues`	It is used to specify whether to show/hide the tick values. Setting this attribute to `1` will show the tick values, setting it to `0` (default) will hide them.

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

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "ticksOnRight": "1"
    },
    "value": "75"
}

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 will 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:

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "ticksOnRight": "0"
    },
    "value": "75"
}

Customizing the Number of Ticks

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

FusionCharts will 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:

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMNumber": "9",
        "minorTMNumber": "1",
        "adjustTM": "0"
    },
    "value": "75"
}

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 will 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:

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMNumber": "8",
        "minorTMNumber": "2",
        "adjustTM": "0"
    },
    "value": "75"
}

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 major tick mark looks like this:

FusionCharts will 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:

JSON
XML

{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "majorTMNumber": "13", "minorTMNumber": "1", "adjustTM": "0", "tickValueStep": "2" }, "value": "75" }

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMNumber": "13",
        "minorTMNumber": "1",
        "adjustTM": "0",
        "tickValueStep": "2"
    },
    "value": "75"
}

Configuring Tick Mark Cosmetics

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

FusionCharts will 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:

JSON
XML

{ "chart": { "theme": "fint", "caption": "Diesel Level in Generator", "subcaption": "Bakersfield Central", "lowerLimit": "0", "upperLimit": "120", "lowerLimitDisplay": "Empty", "upperLimitDisplay": "Full", "numberSuffix": " ltrs", "showValue": "1", "chartBottomMargin": "25", "majorTMColor": "#1aaf5d", "majorTMAalpha": "100", "majorTMHeight": "10", "majorTMThickness": "2", "minorTMColor": "#1aaf5d", "minorTMAlpha": "100", "minorTMHeight": "7", "minorTMThickness": "1", "tickmarkDistance": "5" }, "value": "75" }

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "majorTMColor": "#1aaf5d",
        "majorTMAalpha": "100",
        "majorTMHeight": "10",
        "majorTMThickness": "2",
        "minorTMColor": "#1aaf5d",
        "minorTMAlpha": "100",
        "minorTMHeight": "7",
        "minorTMThickness": "1",
        "tickmarkDistance": "5"
    },
    "value": "75"
}

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 will 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:

JSON
XML

{
    "chart": {
        "theme": "fint",
        "caption": "Diesel Level in Generator",
        "subcaption": "Bakersfield Central",
        "lowerLimit": "0",
        "upperLimit": "120",
        "lowerLimitDisplay": "Empty",
        "upperLimitDisplay": "Full",
        "numberSuffix": " ltrs",
        "showValue": "1",
        "chartBottomMargin": "25",
        "cylFillHoverColor": "#0099fd",
        "cylFillHoverAlpha": "85"
    },
    "value": "75"
}