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 |
|---|---|
borderColor |
It is used to specify the hex code for the color that will be applied to the pointer border, e.g. #1aaf5d. |
borderThickness |
It is used to specify the thickness, in pixels, for the pointer border, e.g. 5 |
bgColor |
It is used to specify the hex code for the color that will applied to the background of the pointer, e.g. #E3234A |
bgAlpha |
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. |
radius |
It is used to specify the radius, in pixels, of the pointer. |
sides |
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:
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 |
|---|---|
toolText |
It is used to specify the tool-text that will be rendered when the mouse pointer is hovered over the pointer. |
link |
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:
Adding Multiple Pointers
A linear gauge rendered with two pointers, showing the server CPU utilization for the transaction server and the web server at Harry’s SuperMart, 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:
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 deselect it, the value is hidden. If you select the Place Value Above Pointer check box, the value is placed above the pointer; if you deselect it, the value is shown below.
Given below is a brief description of the attributes used to configure the pointer value:
| Attribute Name | Description |
|---|---|
showValue |
It is used to specify whether the pointer’s value will be shown or hidden. Setting this attribute to 0 will hide the pointer value, setting it to 1 (default) will show it. |
valueAbovePointer |
It is used to specify whether the value will be shown above or below the pointer. Setting this attribute to 1 will place the value above the pointer, setting it to 0 (default) will place the value below it. |
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:
Configuring the Pointer Position
You can configure the pointer to show on top of scale or bottom as shown below:
Given below is the list of attributes used to configure pointer value:
| Attribute Name | Description |
|---|---|
pointerOnTop |
It is used to specify whether the pointer will be shown at the top of the gauge scale or at the bottom. Setting this attribute to 0 will show the pointer at the bottom of the gauge, setting it to 1 (default) will show the pointer at the top. |
This attribute belongs to the chart object.
The data structure of the above sample is as follows:
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 |
|---|---|
gaugeFillMix |
It is used to specify the gradient fill formula for the linear gauge scale, e.g. {light-10},{light-70},{dark-10} |
gaugeFillRatio |
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 looks like this:
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 |
|---|---|
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. 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). |
gaugeBorderThicknes |
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 configure the cosmetic properties for gauge borders is given below:
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 deselect the check box, the labels are hidden.
Given below is a brief description of the attribute used to hide gauge labels:
| Attribute Name | Description |
|---|---|
showGaugeLabels |
It is used to specify whether the gauge (color range scale) labels will be shown or not. Setting this attribute to 0 will hide gauge labels, setting it to 1 (default) will show them. |
The data structure needed to show/hide gauge labels is given below:
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
Starting FusionCharts Suite XT v3.4, 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 |
|---|---|
pointerBgHoverColor |
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. |
pointerBgHoverAlpha |
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. |
showBorderOnHover |
It is used to specify whether the pointer border will be shown when the mouse pointer is hovered over it. Setting this attribute to 1 will show the pointer border, setting it to 0 (default) will hide it. |
pointerBorderHoverThickness |
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 showBorderOnHover attribute to 1. |
pointerBorderHoverColor |
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 showBorderOnHover attribute to 1. |
pointerBorderHoverAlpha |
It is used to specify the transparency of the pointer border when the mouse pointer is hovered over it. This attribute works only if you have set the showBorderOnHover attribute to 1. |
pointerHoverRadius |
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:
There! You have now seen how you can configure the cosmetic properties for gauge elements.