Loading
Configuring Gauge Cosmetics
FusionCharts Suite XT allows you to configure the functional and cosmetic properties of the linear gauge to improve its visual representation.
In this section, you will be shown how you can:
-
Configure pointer properties
-
Add tool text and link to a pointer
-
Add multiple pointers
-
Configure the pointer value
-
Configure the pointer position
-
Configure the gauge gradient mix
-
Configure the gauge borders
-
Hide gauge labels
-
Configure gauge labels
-
Configure hover effects for the gauge
Configuring Pointer Properties
A linear gauge configured for the cosmetic properties of the pointer looks like this:
Given below is a brief description of the attributes used to configure the pointer cosmetic properties:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code for the color that will be applied to the pointer border, e.g. #1aaf5d. |
|
It is used to specify the thickness, in pixels, for the pointer border, e.g. 5 |
|
It is used to specify the hex code for the color that will applied to the background of the pointer, e.g. #E3234A |
|
It is used to specify the transparency for the background of the pointer. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50. |
|
It is used to specify the radius, in pixels, of the pointer. |
|
It is used to specify the number of sides for the pointer; this determines the shape of the pointer, e.g a 4-sided pointer looks like a diamond. |
These attributes belong to the pointer object, which in turn belongs to the pointers object.
The data structure needed to configure the cosmetic properties of the pointer is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"captionPadding": "0",
"numberSuffix": "%",
"valueFontSize": "11",
"valueFontBold": "0",
"chartBottomMargin": "20",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"borderColor": "#333333",
"borderThickness": "2",
"borderAlpha": "60",
"bgColor": "#0075c2",
"bgAlpha": "75",
"radius": "6",
"sides": "4",
"value": "75"
}
]
}
}Adding Tool-text and a Link to the Pointer
A linear gauge with the pointer having a tool-text and pointing to an external link looks like this:
Given below is a brief description of the attributes used to add a tool-text and an external link for the pointer:
| Attribute Name | Description |
|---|---|
|
It is used to specify the tooltip that will be rendered when the mouse pointer is hovered over the pointer. |
|
It is used to specify the URL to which you will be navigated if you click the pointer. The link to the external URL is defined using the FusionCharts link format. |
These attributes belong to the pointer object, which in turn belongs to the pointers object.
The data structure needed to add tool-text and link the pointer to an external URL is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"captionPadding": "0",
"numberSuffix": "%",
"valueAbovePointer": "0",
"valueFontSize": "11",
"valueFontBold": "0",
"chartBottomMargin": "20",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"toolText": "Customer satisfaction $value%",
"link": "http://www.fusioncharts.com",
"value": "75"
}
]
}
}Adding Multiple Pointers
A linear gauge rendered with two pointers, showing the server CPU utilization for a transaction server and a web server looks like this:
To add multiple pointers, you only need to create multiple instances of the pointer object, which belongs to the pointers object.
The data structure needed to add multiple pointers for a linear gauge is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaption": "Transaction Server & Web Server",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"valueAbovePointer": "0",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"value": "75",
"bgColor": "#0044DD",
"bgAlpha": "80",
"tooltext": "Transaction Server: $value%"
},
{
"value": "92",
"bgColor": "#0077CC",
"bgAlpha": "80",
"tooltext": "Web Server: $value%"
}
]
}
}Configuring the Pointer Value
A linear gauge rendered with the pointer value configured looks like this:
The gauge shown above is rendered with two check boxes below it: Show Value and Place Value Above Pointer. If you select the Show Value check box, the value of the pointer is shown; if you clear it, the value is hidden. If you select the Place Value Above Pointer check box, the value is placed above the pointer; if you clear it, the value is shown below.
Given below is a brief description of the attributes used to configure the pointer value:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the pointer’s value will be shown or hidden. Setting this attribute to |
|
It is used to specify whether the value will be shown above or below the pointer. Setting this attribute to |
These attributes belong to the pointer object, which in turn belongs to the pointers object.
The data structure needed to configure the pointer value is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"captionPadding": "10",
"valueAbovePointer": "0",
"valueFontSize": "13",
"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 the Pointer Position
You can configure the linear gauge to show the pointer along the top edge or the bottom edge of the gauge.
A linear gauge that allows you to configure the pointer position looks like this:
The gauge shown above is rendered with two check boxes below it: Pointer on Top and Pointer at Bottom. If you select the Pointer on Top check box, the pointer is shown along the top edge of the gauge; if you select the Pointer at Bottom check box, the pointer is shown along the bottom edge of the gauge.
Given below is a brief description of the attribute used to configure the pointer position:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the pointer will be shown along the top or the bottom edge of the gauge. Setting this attribute to |
This attribute belongs to the chart object.
The data structure needed to configure the pointer position is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"subcaptionFontBold": "0",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"captionPadding": "10",
"gaugeFillMix": "{light-10},{light-70},{dark-10}",
"gaugeFillRatio": "40,20,40"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low",
"code": "#6baa01"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate",
"code": "#f8bd19"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High",
"code": "#e44a00"
}
]
},
"pointers": {
"pointer": [
{
"bgColor": "#333333",
"bgAlpha": "80",
"showValue": "0",
"value": "75",
"tooltext": "Garden Groove Harbour $value%"
}
]
}
}Configuring the Gauge Gradient Mix
A linear gauge configured using the gauge gradient mix looks like this:
Given below is a brief description of the attributes used to configure the gauge gradient mix:
| Attribute Name | Description |
|---|---|
|
It is used to specify the gradient fill formula for the linear gauge scale, e.g. {light-10},{light-70},{dark-10} |
|
It is used to specify the ratio in which the fill mix will be applied to the gauge, e.g. 40,20,40. |
The data structure needed to configure the gradient mix for the gauge 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"
}
]
}
}Configuring Gauge Borders
A linear gauge configured for border cosmetic properties looks like this:
Given below is a brief description of the attributes used to configure gauge borders:
| 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. You can either specify a hex code here or a single token from the gradient fill mix like {dark-20} or {light-30}. The chart will then calculate the border color for each color range individually (based on the color code for each color range). |
|
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 configure the cosmetic properties for gauge borders is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"showGaugeBorder": "1",
"gaugeBorderColor": "{light-50}",
"gaugeBorderThickness": "4",
"gaugeBorderAlpha": "100"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "35",
"label": "Low"
},
{
"minValue": "35",
"maxValue": "70",
"label": "Moderate"
},
{
"minValue": "70",
"maxValue": "100",
"label": "High"
}
]
},
"pointers": {
"pointer": [
{
"value": "75"
}
]
}
}Hiding Gauge Labels
A linear gauge configured to hide gauge labels looks like this:
Look at the Show Labels? check box rendered below the above linear gauge. If you select this check box, you can see the label for each color range on the gauge scale. If you clear the check box, the labels are hidden.
Given below is a brief description of the attribute used to hide gauge labels:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the gauge (color range scale) labels will be shown or not. Setting this attribute to |
The data structure needed to show/hide gauge labels is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "20",
"valueFontSize": "11",
"valueFontBold": "0",
"showGaugeLabels": "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"
}
]
}
}An alternate way to not show gauge labels is by not initializing the label attribute for the color object.
Configuring Hover Effects for the Gauge
You can use hover effects to improve the visual representation of your gauge; you can configure the pointer cosmetics to change when the mouse pointer is hovered over it.
A linear gauge configured for hover effects looks like this:
Hover your mouse pointer above the gauge pointer and observe how the cosmetics of the pointer change.
Given below is a brief description of the attributes used to configure hover effects for the gauge:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the pointer when the mouse pointer is hovered over it, e.g. #333333. |
|
It is used to specify the transparency of the pointer when the mouse pointer is hovered over it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 70. |
|
It is used to specify whether the pointer border will be shown when the mouse pointer is hovered over it. Setting this attribute to |
|
It is used to specify the thickness, in pixels, of the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the |
|
It is used to specify the hex code of the color that will be used to render the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the |
|
It is used to specify the transparency of the pointer border when the mouse pointer is hovered over it. It takes values between 0 (transparent) and 100 (opaque). This attribute works only if you have set the |
|
It is used to specify the radius, in pixels, of the pointer when the mouse pointer is hovered over it. |
The data structure needed to configure hover effects for the linear gauge is given below:
{
"chart": {
"theme": "fint",
"caption": "Server CPU Utilization",
"lowerLimit": "0",
"upperLimit": "100",
"numberSuffix": "%",
"chartBottomMargin": "40",
"valueFontSize": "11",
"valueFontBold": "0",
"showHoverAnimation": "1",
"pointerBgHoverColor": "#0075c2",
"pointerBgHoverAlpha": "100",
"showBorderOnHover": "1",
"pointerBorderHoverThickness": "2",
"pointerBorderHoverColor": "#333333",
"pointerBorderHoverAlpha": "100",
"pointerHoverRadius": "11",
"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 cosmetic properties for gauge elements.