Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

FusionCharts Suite XT allows you to customize several functional and cosmetic properties for the bulb gauge.

In this section you will be shown how you can:

  • Configure the gauge border

  • Use the gradient fill mix for the gauge border

  • Render the bulb gauge in 2D

  • Place the gauge value inside the gauge

  • Show range name instead of numerical value

  • Configure hover effects

Configuring the Gauge Border

A bulb gauge rendered with customized gauge border properties looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize the gauge border:

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.

gaugeBorderThickness

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 customize the gauge borders is given below:

{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "showGaugeBorder": "1", "gaugeBorderColor": "#666666", "gaugeBorderThickness": "3", "gaugeBorderAlpha": "100", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "showGaugeBorder": "1",
        "gaugeBorderColor": "#666666",
        "gaugeBorderThickness": "3",
        "gaugeBorderAlpha": "100",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

Using Gradient Fill Mix for the Gauge Border

The gaugeBorderColor attribute is used to apply a single solid color to the gauge border, where the border color can be different from the fill color for the gauge. Using a gradient fill mix, you can render the border in a color that is darker or lighter than the fill color used for the gauge.

The gradient fill mix renders the border in a color that is darker/lighter than the initial color in which the gauge was rendered.

A bulb gauge rendered using a gradient fill mix for the border looks like this:

FusionCharts will load here..

In the above chart, the gauge border is rendered in a color darker than the initial fill color. To do this, we have used one token of the gradient fill mix to render the bulb border using a color that is 30% darker than the fill color.

The data structure needed to configure a gradient fill mix for the bulb gauge border is given below:

{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "showGaugeBorder": "1", "gaugeBorderThickness": "3", "gaugeBorderAlpha": "100", "gaugeBorderColor": "{dark-30}", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "showGaugeBorder": "1",
        "gaugeBorderThickness": "3",
        "gaugeBorderAlpha": "100",
        "gaugeBorderColor": "{dark-30}",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

Configuring the Origin and the Radius of the Bulb Gauge

By default, the gauge automatically determines its origin and radius based on the data you provide. However, FusionCharts Suite XT also allows you to explicitly specify the origin and radius of the gauge.

A bulb gauge rendered with the origin and radius configured manually looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to manually configure the origin and radius of the bulb gauge:

Attribute Name Description

gaugeOriginX

It is used to specify the x-origin value for the gauge, e.g. 150.

gaugeOriginY

It is used to specify the y-origin value for the gauge, e.g. 170.

gaugeRadius

It is used to specify the radius, in pixels, for the gauge, e.g. 105.

The data structure needed to manually configure the gauge origin and radius is given below:

{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "gaugeOriginX": "150", "gaugeOriginY": "150", "gaugeRadius": "105", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "gaugeOriginX": "150",
        "gaugeOriginY": "150",
        "gaugeRadius": "105",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

Rendering the Bulb Gauge in 2D

By default, the bulb gauge is rendered with a 3D look and feel. However, you can opt to render the bulb gauge in 2D.

A bulb gauge rendered in 2D looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to render a bulb gauge in 2D:

Attribute Name Description

is3D

It is used to specify whether the bulb gauge will be rendered in 2D or 3D. Setting this attribute to 0 renders the gauge in 2D, setting it to 1 (default) renders it in 3D.

The data structure needed to render a bulb gauge in 2D is given below:

{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "is3D": "0", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "is3D": "0",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

Placing the Gauge Value Inside the Gauge

By default, the gauge value is rendered outside the gauge. FusionCharts Suite XT allows you to render the value inside the gauge.

A bulb gauge configured to render the gauge value inside the gauge looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to render the gauge value inside:

Attribute Name Description

placeValuesInside

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

The data structure needed to place the gauge value inside the gauge is given below:

{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "numberSuffix": "°C", "showshadow": "0", "showvalue": "1", "valueFontSize": "16", "placeValuesInside": "1", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "numberSuffix": "°C",
        "showshadow": "0",
        "showvalue": "1",
        "valueFontSize": "16",
        "placeValuesInside": "1",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

Rendering the Range Name as the Gauge Label

By default, the current numerical value of the gauge is rendered on the gauge. Instead, you can opt to show the range name on the gauge.

A bulb gauge configured to show the range name instead of the numerical as the gauge label looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to render the range name:

Attribute Name Description

useColorNameAsValue

It is used to specify whether the range name will be rendered on the gauge instead of the numerical value. Setting this attribute to 1 will show the color range name as the value, setting it to 0 (default) will show the numerical value.

The data structure needed to render the color range name instead of the numerical value is given below:

{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "placeValuesInside": "1", "valueFontSize": "16", "useColorNameAsValue": "1", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "useColorNameAsValue": "1",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

Configuring the Hover Effect

FusionCharts Suite XT allows you to display hover effects for the gauge.

A bulb gauge configured for hover effects looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to enable the hover effect for the bulb gauge:

Attribute Name Description

showHoverEffect

It is used to specify whether the hover effect will be enabled for the bulb gauge. Setting this attribute to 1 enables the hover effect, setting it to 0 (default) disables it.

The data structure needed to enable hover effects for the bulb gauge is given below:

{ "chart": { "caption": "Temperature status of deep freezers", "upperlimit": "-5", "lowerlimit": "-60", "captionPadding": "30", "showshadow": "0", "showvalue": "1", "useColorNameAsValue": "1", "placeValuesInside": "1", "valueFontSize": "16", "showHoverEffect": "1", "theme": "fint" }, "colorrange": { "color": [ { "minvalue": "-60", "maxvalue": "-35", "label": "Mission control,{br}we have a situation!", "code": "#ff0000" }, { "minvalue": "-35", "maxvalue": "-25", "label": "Something is just not right!", "code": "#ff9900" }, { "minvalue": "-25", "maxvalue": "-5", "label": "All well ahoy!", "code": "#00ff00" } ] }, "value": "-5" }
{
    "chart": {
        "caption": "Temperature status of deep freezers",
        "upperlimit": "-5",
        "lowerlimit": "-60",
        "captionPadding": "30",
        "showshadow": "0",
        "showvalue": "1",
        "useColorNameAsValue": "1",
        "placeValuesInside": "1",
        "valueFontSize": "16",
        "showHoverEffect": "1",
        "theme": "fint"
    },
    "colorrange": {
        "color": [
            {
                "minvalue": "-60",
                "maxvalue": "-35",
                "label": "Mission control,{br}we have a situation!",
                "code": "#ff0000"
            },
            {
                "minvalue": "-35",
                "maxvalue": "-25",
                "label": "Something is just  not right!",
                "code": "#ff9900"
            },
            {
                "minvalue": "-25",
                "maxvalue": "-5",
                "label": "All well ahoy!",
                "code": "#00ff00"
            }
        ]
    },
    "value": "-5"
}

There! You have now seen how you can configure the various functional and cosmetic properties of the bulb gauge.

Top