Trend points are elements that can be used to show a target value on the gauge, for example, the target customer satisfaction score, optimum server utilization, etc.
In this section, you will be shown how you can:
Add trend-points in a linear gauge
Add trend-zones in a linear gauge
Adding Trend-points in a Linear Gauge
Adding a Simple Trend-point
A linear gauge rendered with two trend-points showing the optimum zone of operation for a web server looks like this:
Given below is a brief description of the attributes used to add and customize the trend-points for a linear gauge:
| Attribute Name | Description |
|---|---|
startValue |
It is used to specify the starting value for the trend-point, e.g 102. |
color |
It is used to specify the hex code for the color that will be used to render the trend-line, e.g. #CCCCCC. |
dashed |
It is used to specify if the line at the trend-point will be rendered as a dashed line. Setting this attribute to 1 will render a dashed trend-line, setting it to 0 (default) will render a whole line. |
dashLen |
It is used to specify the length of each dash, in pixels, if the trend point will be rendered as a dashed line. |
dashGap |
It is used to specify the gap between each dash, in pixels, if the trend point will be rendered as a dashed line. |
thickness |
It is used to specify the thickness of the trend-line, in pixels, e.g. 5. |
These attributes belong to the points object, which in turn belongs to the trendPoints object.
The data structure needed to add a trend-point to the linear gauge is given below:
Adding a Trend-point with a Marker
A linear gauge rendered with two trend-points with markers looks like this:
Given below is a brief description of the attributes used to add and customize a trend-point with a marker:
| Attribute Name | Description |
|---|---|
useMarker |
It is used to specify whether a triangular marker should be rendered with the trend-point. Setting this attribute to 1 will render the marker, setting it to 0 (default) will not. |
markerColor |
It is used to specify the hex code of the color that will be used to render the marker, e.g. #AAA333. |
markerBorderColor |
It is used to specify the hex code of the color that will be used to render the border of the marker, e.g. #444444. |
markerRadius |
It is used to specify the radius of the marker, in pixels, e.g. 5. |
The data structure needed to add a trend-point with a marker is given below:
Trend-zones
Trend-zones are used to represent a range of values, instead of a single value, like the trend-point.
A linear gauge rendered with a trend-zone looks like this:
Given below is a brief description of the attributes used to add a trend-zone to the linear gauge:
| Attribute Name | Description |
|---|---|
startValue |
It is used to specify the starting value for the trend-zone. For example, if you want plot a trend-zone from value 102 to 109, the start value will be 102. |
endValue |
It is used to specify the ending value for the trend-zone. For example, if you want plot a trend-zone from value 102 to 109, the end value will be 109. |
displayValue |
It is used to specify the text for the label that will be displayed for the trend-zone. For example, Recommended Range. If you do not specify a value for this attribute, the gauge displays the start value of the trend-zone. |
alpha |
It is used to specify the transparency for the trend zone. This attribute takes values between 0 and 100, e.g. 50. |
The data structure needed to add a trend-zone to the linear gauge looks like this:
There! You have now seen how you can add trend-points and trend-zones to the linear gauge.