Loading
Configuring Gauge
FusionCharts Suite XT allows you to configure various cosmetic and functional properties of LED gauges.
In this section, you will be shown how you can:
-
Configure the LED gauge background color
-
Use a single color fill for the LED background
-
Show/hide the gauge border
-
Customize gauge border properties
-
Configure the LED bar size and gap
-
Show/hide the chart value
-
Show/hide tick marks and tick values
-
Configure tick marks and tick values
-
Configure hover effects
Configuring the LED Gauge Background Color
A LED gauge with the background color configured looks like this:
Given below is a brief description of the attribute used to configure the background color:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code for the color that will applied to the gauge background, e.g. #666666. |
The data structure needed to configure the gauge background is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"showhovereffect": "1",
"tickMarkDistance": "10",
"gaugeFillColor": "#444444",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}Using a Single Color for the LED Fill and Background
When you divide the LED scale into color ranges, the LED bars in each zone take up the fill color of that color range. You can, however, render the LED background using a single fill color - the color of the range to which the current value belongs.
A LED gauge rendered with a single color for the LED fill and background looks like this:
Given below is a brief description of the attributes used to apply a single color for the LED fill and the LED background::
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a single fill color - the color of the range to which the current value belongs - will be applied to the activated LED bars. Setting this attribute to |
|
It is used to specify whether a single color - the color of the range to which the current value belongs - will be applied to the entire LED background. Setting this attribute to |
The data structure needed to apply the same color for the LED fill and the LED background is given below:
{
"chart": {
"caption": "Battery Charge Remaining",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"origW": "300",
"origH": "200",
"ledGap": "0",
"showhovereffect": "1",
"useSameFillColor": "1",
"useSameFillBgColor": "1",
"chartBottomMargin": "20",
"theme": "fint"
},
"annotations": {
"showbelow": "1",
"groups": [
{
"id": "indicator",
"items": [
{
"id": "bgRectAngle",
"type": "rectangle",
"radius": "5",
"fillColor": "#333333",
"x": "$gaugeEndX - 10",
"tox": "$gaugeEndX + 12",
"y": "$gaugeCenterY-20",
"toy": "$gaugeCenterY + 20"
}
]
}
]
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "50"
}Showing/Hiding the Gauge Border
A LED gauge rendered with the border hidden looks like this:
Given below is a brief description of the attribute used to show/hide the LED gauge border:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the border for the LED gauge will be shown. Setting this attribute to 0 hides the gauge border, setting it to 1 (default) shows it. |
The data structure needed to hide the gauge border is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"showhovereffect": "1",
"tickMarkDistance": "10",
"showGaugeBorder": "0",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}Customizing Gauge Border Properties
A LED gauge rendered with a customized border 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 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 0 (transparent) and 100 (opaque), e.g. 40. |
The data structure needed to customize the gauge border is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"showhovereffect": "1",
"tickMarkDistance": "10",
"showGaugeBorder": "1",
"gaugeBorderColor": "#AAAAAA",
"gaugeBorderThickness": "7",
"gaugeBorderAlpha": "70",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}Configuring the LED Bar Size and Gap
By default, the gauge determines the bar size and the gap automatically, based on the data provided by you. However, you can explicitly specify the bar size and gap.
A LED gauge configured for the LED bar size and gap looks like this:
Given below is a brief description of the attributes used to configure the LED bar size and gap:
| Attribute Name | Description |
|---|---|
|
It is used to specify the size, in pixels, of the LED bar, e.g. 5. |
|
It is used to specify the gap, in pixels, between consecutive LED bars,e.g. 3. |
The data structure needed to configure the LED bar size and gap is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"showhovereffect": "1",
"ledSize": "5",
"ledGap": "1",
"ChartBottomMargin": "20",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45"
},
{
"minValue": "45",
"maxValue": "75"
},
{
"minValue": "75",
"maxValue": "100"
}
]
},
"value": "92"
}To make the LEDs appear continuous, you can set ledGap to 0.
Showing/Hiding Chart Value
An LED gauge rendered with the chart value hidden looks like this:
Given below is a brief description of the attribute used to show/hide the chart value:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the current data value, or the chart value, should be shown. Setting this attribute to |
The data structure needed to hide the chart value is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "14",
"showhovereffect": "1",
"showValue": "0",
"ledSize": "4",
"chartBottomMargin": "20",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45"
},
{
"minValue": "45",
"maxValue": "75"
},
{
"minValue": "75",
"maxValue": "100"
}
]
},
"value": "92"
}Showing/Hiding Tick Marks and Tick Values
An LED gauge with the tick marks and tick values hidden looks like this:
Given below is a brief description of the attributes used to show/hide tick marks and tick values:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether tick marks will be shown for the LED gauge. Setting this attribute to |
|
It is used to specify whether tick values will be shown for the LED gauge. Setting this attribute to |
The data structure needed to hide tick marks and tick values is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"showTickMarks": "0",
"showTickValues": "0",
"chartBottomMargin": "20",
"ledSize": "4",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}Configuring Tick Marks and Tick Values
By default, the tick marks and values are placed below the gauge in the horizontal LED gauge and to the right in the vertical LED gauge. However, you can explicitly configure the position of tick marks and tick values as required.
You can also configure the number of tick marks, set the tick marks and tick values distance, and skip the tick values.
A LED gauge with the tick marks and tick values configured looks like this:
Given below is a brief description of the attributes used to configure tick marks and tick values:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the tick marks and values will be rendered below or above the gauge. Setting this attribute to |
|
It is used to specify whether the tick marks and values will be rendered to the left or the right. Setting this attribute to |
|
It is used to specify the distance, in pixels, between the tick marks and the gauge scale, e.g. 10. |
|
It is used to specify the distance, in pixels, between the tick marks and the tick values, e.g. 5. |
|
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 |
|
It is used to specify the number of major tick marks to be rendered, e.g. 12. |
|
It is used to specify the height of major tick marks, e.g., 5 |
|
It is used to specify the number of minor tick marks to be rendered, e.g. 4. |
|
It is used to specify the height of minor tick marks, e.g., 7. |
|
If you need to show only every n-th tick value , this attribute is used to specify that value. |
The data structure needed to configure the tick marks and tick values is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"adjustTM": "0",
"ticksBelowGauge": "0",
"tickMarkDistance": "5",
"tickValueDistance": "2",
"majorTMNumber": "9",
"majorTMHeight": "12",
"minorTMNumber": "4",
"minorTMHeight": "7",
"tickValueStep": "2",
"chartBottomMargin": "20",
"ledSize": "4",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}FusionCharts Suite XT also allows you to configure the cosmetics of major and minor tick marks.
A LED gauge rendered with customized major and minor tick marks looks like this:
Given below is a brief description of the attributes used to configure the major and minor tick marks:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the major tick marks, e.g. #666666. |
|
It is used to specify the transparency of the major tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
|
It is used to specify the thickness, in pixels, of the major tick marks, e.g. 5. |
|
It is used to specify the hex code of the color that will be used to render the minor tick marks, e.g. #AAAAAA. |
|
It is used to specify the transparency of the minor tick marks. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
|
It is used to specify the thickness, in pixels, of the minor tick marks, e.g. 5. |
The data structure needed to customize the tick marks and tick values is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"majorTMNumber": "5",
"minorTMNumber": "5",
"tickMarkDistance": "5",
"majorTMColor": "#0000CC",
"majorTMAlpha": "60",
"majorTMThickness": "2",
"minorTMColor": "#0000CC",
"minorTMAlpha": "30",
"minorTMThickness": "2",
"chartBottomMargin": "20",
"ledSize": "4",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}Configuring Hover Effects
FusionCharts Suite XT allows you to display hover effects for the gauge.
An LED 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 LED gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the hover effect will be enabled for the LED gauge. Setting this attribute to |
The data structure needed to enable hover effects for the LED gauge is given below:
{
"chart": {
"caption": "Fuel Level Indicator",
"lowerLimit": "0",
"upperLimit": "100",
"lowerLimitDisplay": "Empty",
"upperLimitDisplay": "Full",
"numberSuffix": "%",
"valueFontSize": "12",
"showhovereffect": "1",
"theme": "fint",
"ledSize": "4"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "45",
"code": "#e44a00"
},
{
"minValue": "45",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"value": "92"
}There! You have now seen how you can configure the functional and cosmetic properties for the horizontal/vertical LED gauge.