Adding Trend-points in Linear Gauge
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:
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:
{
"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 |
|---|---|
|
It is used to specify the starting value for the trend-point, e.g 102. |
|
It is used to specify the hex code for the color that will be used to render the trend-line, e.g. #CCCCCC. |
|
It is used to specify if the line at the trend-point will be rendered as a dashed line. Setting this attribute to |
|
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 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:
{
"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 |
|---|---|
|
It is used to specify whether a triangular marker should be rendered with the trend-point. Setting this attribute to |
|
It is used to specify the hex code of the color that will be used to render the marker, e.g. #AAA333. |
|
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. |
|
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:
{
"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 |
|---|---|
|
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. |
|
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. |
|
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. |
|
It is used to specify the transparency for the trend zone. This attribute takes values between 0 and 100, e.g. 50. |