Loading
Configuring Gauge
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:
Given below is a brief description of the attributes used to customize the gauge border:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge border will be shown or hidden. Setting this attribute to |
|
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. |
|
It is used to specify the thickness, in pixels, for the gauge border, e.g. 5. |
|
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"
}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:
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"
}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:
Given below is a brief description of the attributes used to manually configure the origin and radius of the bulb gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify the x-origin value for the gauge, e.g. 150. |
|
It is used to specify the y-origin value for the gauge, e.g. 170. |
|
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"
}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:
Given below is a brief description of the attribute used to render a bulb gauge in 2D:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the bulb gauge will be rendered in 2D or 3D. Setting this attribute to |
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"
}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:
Given below is a brief description of the attribute used to render the gauge value inside:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge value will be rendered inside the gauge or outside it. Setting this attribute to |
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"
}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:
Given below is a brief description of the attribute used to render the range name:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the range name will be rendered on the gauge instead of the numerical value. Setting this attribute to |
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"
}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:
Given below is a brief description of the attribute used to enable the hover effect for the bulb gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the hover effect will be enabled for the bulb gauge. Setting this attribute to |
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"
}There! You have now seen how you can configure the various functional and cosmetic properties of the bulb gauge.