Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

FusionCharts Suite XT allows you to configure several functional and cosmetic properties for tick marks and tick values.

In this section, you will be shown how to:

  • Show/hide tick marks and tick values

  • Configure tick values

  • Configure the position of tick marks and values

  • Configure the number of major and minor tick marks

  • Configure tick mark cosmetics

  • Configure tick mark and tick value padding

Showing/Hiding Tick Marks and Tick Values

A linear gauge configured to show/hide tick marks and tick values looks like this:

FusionCharts will load here..

Look at the check boxes rendered below the gauge. If you select the Show Tick Mark? check box, the tick marks will be shown; if you clear it, they will be hidden. Similarly, you can select/clear the Show Tick Value? check box to show/hide tick values.

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

Attribute Name Description

showTickMarks

It is used to specify whether the tick marks will be shown or hidden on the gauge scale. 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 the tick values will be shown or hidden on the gauge scale. Setting this attribute to 0 will hide the tick values, setting it to 1 (default) will show them.

The data structure needed to show/hide tick marks and tick values is given below:

{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}

Configuring Tick Values

When you have a large number of tick marks on the gauge scale, showing all tick values can make the gauge appear clumsy. To avoid this, you can opt to show every nth tick value on the gauge scale. You can also configure whether decimal values will be rendered as tick values and the number of digits that appear after the decimal point.

A linear gauge configured to render decimal tick values corresponding to every alternate tick mark looks like this:

FusionCharts will load here..

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

Attribute Name Description

tickValueStep

If you need to show only every n-th tick value, this attribute is used to specify that value.

tickValueDecimals

It is used to specify the number of digits that will be rendered after the decimal point, e.g. 2.

forceTickValueDecimals

It is used to specify whether decimals will be forced on tick values. Setting this attribute to 1 will force decimals on tick values, setting it to 0 (default) will not force them.

The data structure needed to configure tick values is given below:

{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "majorTMNumber": "10", "tickValueStep": "2", "tickValueDecimals": "1", "forceTickValueDecimals": "1", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "majorTMNumber": "10",
        "tickValueStep": "2",
        "tickValueDecimals": "1",
        "forceTickValueDecimals": "1",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}

Configuring the Position of Tick Marks and Tick Values

By default, the tick marks are placed outside the gauge, below the gauge scale. The tick values are also rendered outside the gauge. You can, however, configure the position of tick marks and tick values based on your requirements.

A linear gauge configured to place tick marks and tick values inside the gauge, above the gauge scale, looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to configure the positions of tick marks and tick values:

Attribute Name Description

ticksBelowGauge

It is used to specify whether the tick marks will be rendered above or below the gauge. Setting this attribute to 0 will render the tick marks above the gauge, setting it to 1 (default) will place them below the gauge.

placeTicksInside

It is used to specify whether the tick marks will be placed inside the gauge or outside it. Setting this attribute to 1 will place the tick marks inside the gauge, setting it to 0 (default) will place them outside.

placeValuesInside

It is used to specify whether the tick values will be placed inside the gauge or outside it. Setting this attribute to 1 will place the tick values inside the gauge, setting it to 0 (default) will place them outside.

The data structure needed to configure the tick marks and values position is given below:

{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "ticksBelowGauge": "0", "placeTicksInside": "0", "placeValuesInside": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "ticksBelowGauge": "0",
        "placeTicksInside": "0",
        "placeValuesInside": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}

Configuring the Number of Major and Minor Tick Marks

By default, the gauge automatically decides the number of major and minor tick marks to be rendered based on the data you provide. However, you can explicitly specify the number of tick marks to be rendered.

A linear gauge with the number of major and minor tick marks explicitly set to 9 and 5, respectively, looks like this

FusionCharts will load here..

Given below is a brief description of the attributes used to configure the number of tick marks:

Attribute Name Description

majorTMNumber

It is used to specify the number of major tick marks to be rendered.

minorTMNumber

It is used to specify the number of minor tick marks to be rendered.

adjustTM

It is used to specify whether the number of major tick marks should be automatically adjusted to ensure better distribution of the chart scale. Setting this attribute to 0 disables automatic adjustment of tick marks, setting it to 1 (default) enables it.

The data structure needed to configure the number of major and minor tick marks is given below:

{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "majorTMNumber": "9", "minorTMNumber": "5", "adjustTM": "1", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "majorTMNumber": "9",
        "minorTMNumber": "5",
        "adjustTM": "1",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}

Configuring Cosmetics for Tick Marks

A linear gauge configured for the cosmetic properties of major and minor tick marks looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to configure the tick marks’ cosmetics:

Attribute Name Description

majorTMColor

It is used to specify the hex code of the color using which the major tick marks will be rendered on the gauge, e.g. #333333.

majorTMAlpha

It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100.

majorTMHeight

It is used to specify the height of the major tick marks, e.g. 15.

majorTMThickness

It is used to specify the thickness of the major tick marks, e.g. 2.

minorTMColor

It is used to specify the hex code of the color using which the minor tick marks will be rendered on the gauge, e.g. #666666.

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. 100.

minorTMHeight

It is used to specify the height of the minor tick marks, e.g. 12.

minorTMThickness

It is used to specify the thickness of the minor tick marks, e.g. 1.

The data structure needed to configure the cosmetic properties for major and minor tick marks is given below:

{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "minorTMNumber": "4", "majorTMColor": "#163143", "majorTMAlpha": "50", "majorTMHeight": "7", "majorTMThickness": "2", "minorTMColor": "#163143", "minorTMAlpha": "30", "minorTMHeight": "4", "minorTMThickness": "1", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "minorTMNumber": "4",
        "majorTMColor": "#163143",
        "majorTMAlpha": "50",
        "majorTMHeight": "7",
        "majorTMThickness": "2",
        "minorTMColor": "#163143",
        "minorTMAlpha": "30",
        "minorTMHeight": "4",
        "minorTMThickness": "1",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}

Configuring the Tick Mark and Tick Value Padding

By default, the gauge automatically decides the padding distance for tick marks and tick values. However, you can explicitly specify the padding distance.

A linear gauge configured for the tick mark and tick value padding looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to configure the tick mark and tick value padding:

Attribute Name Description

tickMarkDistance

It used to specify the distance, in pixels, between the gauge scale and the tick marks.

tickValueDistance

It is used to specify the distance, in pixels, between the tick marks and their corresponding tick values.

The data structure needed to configure the padding is given below:

{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "20", "valueFontSize": "11", "valueFontBold": "0", "tickMarkDistance": "5", "tickValueDistance": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "20",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "tickMarkDistance": "5",
        "tickValueDistance": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    }
}

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

Top