Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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:

FusionCharts will load here..
{ "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" } ] } }
{
    "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

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.

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 will load here..
{ "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" } ] } }
{
    "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

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.

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 will load here..
{ "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" } ] } }
{
    "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

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.

Customizing a Trend Arc

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

FusionCharts will load here..
{ "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" } ] } }
{
    "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

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.

Top