Adding Trend Points

Trend points are elements that you use to show a target value on the gauge. For example, while plotting the average customer satisfaction score for the current year, you might also want to show the average score for the last year for comparison. This average score for the last year can be shown as a trend point on the gauge.

In this section, you will be shown how you can:

  • Add a simple trend point

  • Show trend markers

  • Create trend arcs

  • Customize trend arcs

Adding a Simple Trend Point

An angular gauge rendered with a trend-point showing last year’s average customer satisfaction score looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to add and customize a simple trend point to the gauge:

Attribute Name Description
startValue It is used to specify the starting value for the trend point. For example, if you plot a trend arc from value 102 to 109, the starting value will be 102.
displayValue It is used to display a label for the trend point. If you do not specify a label, then the data value that the trend point indicates is displayed.
valueInside It is used to specify whether the trend point value will be rendered inside the gauge or outside it. Setting this attribute to 1 will place the value inside the gauge, setting it to 0 (default) will place it outside it.
color It is used to specify the hex code of the color that will be used to render the trend point and its associated text, e.g. #CCCCCC.
thickness It is used to specify the thickness of the trend point, in pixels, e.g. 5.
radius It is used to specify the radius of the trendpoint, in pixels, e.g. 3.
dashed If you're showing the trend point as line, this attribute is used to specify whether you want to render the trend point as a dashed line. Setting this attribute to 1 will render the trend line as a dashed line, setting it to 0 (default) will render it as 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.
trendValueDistance It is used to specify the distance, in pixels, between a trend line and its corresponding value.

These attributes belong to the point object, which in turn belongs to the trendpoints object.

The data structure needed to render a simple trend point on the gauge is given below:

...

Showing Trend Markers

For each trend point, you can also show a triangular marker and customize it.

An angular gauge rendered with a marker for the trend point looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to show and customize a trend marker:

Attribute Name Description
useMarker It is used to specify whether a marker will be rendered for each trend point on the gauge. Setting this attribute to 1 will render a marker, setting it to 0 (default) will not render a marker.
markerColor It is used to specify the hex code of the color that will be used to render the marker, e.g. #f1f1f1
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. #666666.
markerRadius It is used to specify the radius of the marker, in pixels.
markerTooltext It is used to specify the tool-tip text that will be rendered when the mouse pointer is hovered over the marker.

The data structure needed to render and configure trend markers for an angular gauge is given below:

...

Creating a Trend Arc

You can also create trend-arcs to represent a range of values, instead of a single value.

An angular gauge rendered with a trend arc looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to create a trend arc:

Attribute Name Description
startValue It is used to specify the starting value for the trend arc. For example, if you want to plot a trend arc from point 102 to 109, the starting value will be 102.
endValue It is used to specify the ending value for the trend arc. For example, if you want to plot a trend arc from point 102 to 109, the ending value will be 109.

The data structure needed to render a trend arc is given below:

...

Customizing a Trend Arc

An angular gauge rendered with trend arc customized for its functional and cosmetic properties looks like this:

FusionCharts should load here..

Given below is a brief description of the attributes used to customize a trend arc:

Attribute Name Description
radius It is used to specify the radius of the trend arc, in pixels, e.g. 180.
innerRadius It is used to specify the radius of the inner side of the arc, e.g. 5.
color It is used to specify the hex code of the color that will be used to render the trend arc, e.g. #0075c2.
alpha It is used to specify the transparency of the trend arc, e.g. 100.
showBorder It is used to specify whether a border will be shown around the trend arc. Setting this attribute to 0 will hide the border around the arc, setting it to 1 (default) will show the border.
borderColor It is used to specify the hex code of the color that will be used to render the trend arc border, e.g. #000000.

The data structure needed to customize a trend arc is given below:

...

There! You have now seen how you can add and customize trend points, trend markers, and trend arcs on an angular gauge.