Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0", "valueAbovePointer": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] }, "trendPoints": { "point": [ { "startValue": "70", "color": "#dddddd", "dashed": "1", "dashlen": "3", "dashgap": "3", "thickness": "2" }, { "startValue": "85", "color": "#dddddd", "dashed": "1", "dashlen": "3", "dashgap": "3", "thickness": "2" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "40",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "valueAbovePointer": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    },
    "trendPoints": {
        "point": [
            {
                "startValue": "70",
                "color": "#dddddd",
                "dashed": "1",
                "dashlen": "3",
                "dashgap": "3",
                "thickness": "2"
            },
            {
                "startValue": "85",
                "color": "#dddddd",
                "dashed": "1",
                "dashlen": "3",
                "dashgap": "3",
                "thickness": "2"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "40",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "valueAbovePointer": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        },
        "trendPoints": {
            "point": [
                //Adding Trendpoint
                {
                    "startValue": "70",
                    "color": "#dddddd",
                    "dashed": "1",
                    "dashlen": "3",
                    "dashgap": "3",
                    "thickness": "2"
                }, {
                    "startValue": "85",
                    "color": "#dddddd",
                    "dashed": "1",
                    "dashlen": "3",
                    "dashgap": "3",
                    "thickness": "2"
                }
            ]
        }
    }
}
);
    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 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.

Adding a Trend-point with a Marker

A linear gauge rendered with two trend-points with markers looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0", "valueAbovePointer": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] }, "trendPoints": { "point": [ { "startValue": "70", "dashed": "1", "thickness": "2", "useMarker": "1", "markerColor": "#0075c2", "markerBorderColor": "#666666", "markerRadius": "5" }, { "startValue": "85", "dashed": "1", "thickness": "2", "useMarker": "1", "markerColor": "#0075c2", "markerBorderColor": "#666666", "markerRadius": "5" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "40",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "valueAbovePointer": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    },
    "trendPoints": {
        "point": [
            {
                "startValue": "70",
                "dashed": "1",
                "thickness": "2",
                "useMarker": "1",
                "markerColor": "#0075c2",
                "markerBorderColor": "#666666",
                "markerRadius": "5"
            },
            {
                "startValue": "85",
                "dashed": "1",
                "thickness": "2",
                "useMarker": "1",
                "markerColor": "#0075c2",
                "markerBorderColor": "#666666",
                "markerRadius": "5"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge',
    width: '400',
    height: '170',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "40",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "valueAbovePointer": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        },
        "trendPoints": {
            "point": [
                //Adding Trendpoint
                {
                    "startValue": "70",
                    "dashed": "1",
                    "thickness": "2",
                    //Marker related cosmetics
                    "useMarker": "1",
                    "markerColor": "#0075c2",
                    "markerBorderColor": "#666666",
                    "markerRadius": "5"
                }, {
                    "startValue": "85",
                    "dashed": "1",
                    "thickness": "2",
                    "useMarker": "1",
                    "markerColor": "#0075c2",
                    "markerBorderColor": "#666666",
                    "markerRadius": "5"
                }
            ]
        }
    }
}
);
    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 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.

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:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "Server CPU Utilization", "subcaption": "food.hsm.com", "lowerLimit": "0", "upperLimit": "100", "numberSuffix": "%", "chartBottomMargin": "40", "valueFontSize": "11", "valueFontBold": "0", "valueAbovePointer": "0", "gaugeFillMix": "{light-10},{light-70},{dark-10}", "gaugeFillRatio": "40,20,40" }, "colorRange": { "color": [ { "minValue": "0", "maxValue": "35", "label": "Low" }, { "minValue": "35", "maxValue": "70", "label": "Moderate" }, { "minValue": "70", "maxValue": "100", "label": "High" } ] }, "pointers": { "pointer": [ { "value": "75" } ] }, "trendPoints": { "point": [ { "startValue": "70", "endValue": "85", "displayValue": "Recommended{br}Range (70-85%)", "alpha": "30" } ] } }
{
    "chart": {
        "theme": "fint",
        "caption": "Server CPU Utilization",
        "subcaption": "food.hsm.com",
        "lowerLimit": "0",
        "upperLimit": "100",
        "numberSuffix": "%",
        "chartBottomMargin": "40",
        "valueFontSize": "11",
        "valueFontBold": "0",
        "valueAbovePointer": "0",
        "gaugeFillMix": "{light-10},{light-70},{dark-10}",
        "gaugeFillRatio": "40,20,40"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "35",
                "label": "Low"
            },
            {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate"
            },
            {
                "minValue": "70",
                "maxValue": "100",
                "label": "High"
            }
        ]
    },
    "pointers": {
        "pointer": [
            {
                "value": "75"
            }
        ]
    },
    "trendPoints": {
        "point": [
            {
                "startValue": "70",
                "endValue": "85",
                "displayValue": "Recommended{br}Range (70-85%)",
                "alpha": "30"
            }
        ]
    }
}
<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: 'hlineargauge',
    renderAt: 'chart-container',
    id: 'cpu-linear-gauge',
    width: '400',
    height: '190',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Server CPU Utilization",
            "subcaption": "food.hsm.com",
            "lowerLimit": "0",
            "upperLimit": "100",
            "numberSuffix": "%",
            "chartBottomMargin": "40",
            "valueFontSize": "11",
            "valueFontBold": "0",
            "valueAbovePointer": "0",
            "gaugeFillMix": "{light-10},{light-70},{dark-10}",
            "gaugeFillRatio": "40,20,40"
        },
        "colorRange": {
            "color": [{
                "minValue": "0",
                "maxValue": "35",
                "label": "Low",
            }, {
                "minValue": "35",
                "maxValue": "70",
                "label": "Moderate",
            }, {
                "minValue": "70",
                "maxValue": "100",
                "label": "High",
            }]
        },
        "pointers": {
            "pointer": [{
                "value": "75"
            }]
        },
        "trendPoints": {
            "point": [
                //Adding Trendzone
                {
                    "startValue": "70",
                    "endValue": "85",
                    "displayValue": "Recommended{br}Range (70-85%)",
                    "alpha": "30"
                }
            ]
        }
    }
}
);
    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 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.

Top