Adding Trend Points in Angular Gauge
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:
Adding a Simple Trend Point
An angular gauge rendered with a trend-point showing last year’s average customer satisfaction score looks like this:
{
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Last year vs Current year",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
},
"trendpoints": {
"point": [
{
"startValue": "62",
"displayValue": "Last Year",
"color": "#0075c2",
"thickness": "2",
"radius": "180",
"innerRadius": "82",
"alpha": "100"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Last year vs Current year",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "67"
}]
},
"trendpoints": {
"point": [{
"startValue": "62",
"displayValue": "Last Year",
"color": "#0075c2",
"thickness": "2",
"radius": "180",
"innerRadius": "82",
"alpha": "100"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to add and customize a simple trend point to the gauge:
| Attribute Name | Description |
|---|---|
|
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. |
|
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. |
|
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. |
|
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. |
|
It is used to specify the thickness of the trend point, in pixels, e.g. 5. |
|
It is used to specify the radius of the trendpoint, in pixels, e.g. 3. |
|
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. |
|
It is used to specify the length of each dash, in pixels, if the trend point will be rendered as a dashed line. |
|
It is used to specify the gap between each dash, in pixels, if the trend point will be rendered as a dashed line. |
|
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.
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:
{
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Last year vs Current year",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
},
"trendpoints": {
"point": [
{
"startValue": "62",
"useMarker": "1",
"markerColor": "#F1f1f1",
"markerBorderColor": "#666666",
"markerRadius": "10",
"markerTooltext": "Previous year's average was 62",
"displayValue": "Last Year",
"color": "#0075c2",
"thickness": "2",
"alpha": "100"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Last year vs Current year",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "67"
}]
},
"trendpoints": {
"point": [{
"startValue": "62",
"useMarker": "1",
"markerColor": "#F1f1f1",
"markerBorderColor": "#666666",
"markerRadius": "10",
"markerTooltext": "Previous year's average was 62",
"displayValue": "Last Year",
"color": "#0075c2",
"thickness": "2",
"alpha": "100"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to show and customize a trend marker:
| Attribute Name | Description |
|---|---|
|
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. |
|
It is used to specify the hex code of the color that will be used to render the marker, e.g. #f1f1f1 |
|
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. |
|
It is used to specify the radius of the marker, in pixels. |
|
It is used to specify the tool-tip text that will be rendered when the mouse pointer is hovered over the marker. |
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:
{
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Actual vs target",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"trendValueDistance": "2",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
},
"trendpoints": {
"point": [
{
"startValue": "80",
"endValue": "100",
"radius": "180",
"innerRadius": "5",
"displayValue": "Target",
"color": "#0075c2",
"showBorder": "1",
"borderColor": "#000000",
"alpha": "40"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Actual vs target",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"trendValueDistance": "2",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "67"
}]
},
"trendpoints": {
"point": [{
"startValue": "80",
"endValue": "100",
"radius": "180",
"innerRadius": "5",
"displayValue": "Target",
"color": "#0075c2",
"showBorder": "1",
"borderColor": "#000000",
"alpha": "40"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to create a trend arc:
| Attribute Name | Description |
|---|---|
|
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. |
|
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. |
Customizing a Trend Arc
An angular gauge rendered with trend arc customized for its functional and cosmetic properties looks like this:
{
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Actual vs Target",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"trendValueDistance": "2",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [
{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
},
{
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
},
{
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}
]
},
"dials": {
"dial": [
{
"value": "67"
}
]
},
"trendpoints": {
"point": [
{
"startValue": "80",
"endValue": "100",
"radius": "180",
"innerRadius": "5",
"displayValue": "Target",
"color": "#0075c2",
"alpha": "40"
}
]
}
}<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Average Customer Satisfaction Score",
"subcaption": "Actual vs Target",
"lowerLimit": "0",
"upperLimit": "100",
"showValue": "1",
"trendValueDistance": "2",
"valueBelowPivot": "1",
"gaugeFillMix": "{dark-40},{light-40},{dark-20}",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "50",
"code": "#e44a00"
}, {
"minValue": "50",
"maxValue": "75",
"code": "#f8bd19"
}, {
"minValue": "75",
"maxValue": "100",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": "67"
}]
},
"trendpoints": {
"point": [{
"startValue": "80",
"endValue": "100",
"radius": "180",
"innerRadius": "5",
"displayValue": "Target",
"color": "#0075c2",
"alpha": "40"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is a brief description of the attributes used to customize a trend arc:
| Attribute Name | Description |
|---|---|
|
It is used to specify the radius of the trend arc, in pixels, e.g. 180. |
|
It is used to specify the radius of the inner side of the arc, e.g. 5. |
|
It is used to specify the hex code of the color that will be used to render the trend arc, e.g. #0075c2. |
|
It is used to specify the transparency of the trend arc, e.g. 100. |
|
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. |
|
It is used to specify the hex code of the color that will be used to render the trend arc border, e.g. #000000. |