Loading
Trend Lines and Zones
Trend lines are customizable reference horizontal or vertical lines which aid in interpretation of data. They can be used to set context or define limits and targets. For example, while plotting quarterly sales of a company, you might want to use a trendline to depict the target sales.
In the FusionCharts Suite XT context, trendlines do not show trends for data points. They are only used to add context to data. For showing trends in data, use regression lines.
This section talks about:
-
Adding tool-text to a trend line
-
Adding trend zones
-
Customizing trend lines and trend zones
-
Customizing trend-line display value text
-
Adding dashed trend lines
-
Adding slanted trend lines
-
Configuring the trend line label
-
Adding trend lines in a dual y-axis chart
Adding tool-text to a trend line
FusionCharts Suite XT allows you to specify custom tool-text which will be rendered when the mouse pointer is hovered over the trend line.
A column 2D chart with a defined tool-text for trend line looks as below:
Given below is the attribute used to add tool-text:
| Attribute | Description |
|---|---|
|
It specifies the text that will be displayed when mouse is hovered over the trend line. |
The data structure needed to add tool-text for trend lines is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"startvalue": "175000",
"color": "#1aaf5d",
"valueOnRight": "1",
"tooltext": "Quarterly sales target was $startDataValue",
"displayvalue": "Target - $175K"
}
]
}
]
}Adding trend zones
Trend zones are similar to trend lines except that they mark out an entire zone rather than just a line. A column 2D chart with a trend zone looks as below:
Given below are the attributes used to render a trend zone:
| Attribute | Description |
|---|---|
|
Set this to |
|
It specifies the starting point data-value for the trend-zone. |
|
It specifies the ending point data-value for the trend zone. If the |
The data structure needed to add trend zones is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"isTrendZone": "1",
"startvalue": "175000",
"endValue": "150000",
"color": "#1aaf5d",
"valueOnRight": "1",
"alpha": "30",
"tooltext": "Quarterly sales target range was $endDataValue to $startDataValue",
"displayvalue": "Target Range"
}
]
}
]
}Customizing trend lines and trend zones
A column 2D chart with the trend line customized looks as below:
Given below are the attributes used to customize trend lines and trend zones:
| Attribute | Description |
|---|---|
|
It specifies the hex code for the color that will be used to render the trend-line/zone e.g. |
|
It specifies the thickness for the trend-line(in pixels). You cannot specify the thickness for a trend zone. |
|
Sets the transparency of trend line/zone. Can take values from |
The data structure needed to customize trend lines is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"startvalue": "175000",
"color": "#8cbb2c",
"thickness": "4",
"alpha": "60",
"displayvalue": "Target - $175K"
}
]
}
]
}A column 2D chart with the trend zone customized looks as below:
The data structure needed to customize trend zones is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"isTrendZone": "1",
"startvalue": "175000",
"endValue": "150000",
"color": "#8cbb2c",
"alpha": "60",
"valueOnRight": "1",
"tooltext": "Quarterly sales target was $endDataValue to $startDataValue",
"displayvalue": "Target"
}
]
}
]
}Customizing the trend-line display value text
Starting v3.8.0, FusionCharts allows you to also customize the display value text rendered with trend-lines.
A column chart with the trend-line’s display value text customized looks as below:
Given below are the attributes used to customize the trend-line display value text:
| Attribute | Description |
|---|---|
|
Sets the font family for the trend-line display value. |
|
Sets the font size for the trend-line display value. |
|
Sets whether the trend-line display value will be bold formatted. Setting this attribute to |
|
Sets whether the trend-line display value will be italicized. Setting this attribute to |
|
Sets the transparency for the trend-line display value. This attribute takes values between |
|
Sets the hex color code for the background of the trend-line display value. |
|
Sets the transparency for the background of the trend-line display value. This attribute takes values between |
|
Sets the hex color code for the border around the trend-line display value. |
|
Sets the transparency for the border around the trend-line display value. This attribute takes values between |
|
Sets padding for the border around the trend-line display value. |
|
Sets the radius for the border around the trend-line display value. |
|
Sets the thickness for the border around the trend-line display value. |
|
Sets whether the border around the trend-line display value will be drawn as a dashed line. Setting this attribute to |
|
Sets the length of each dash, if the border around the trend-line display value is drawn as a dashed line. |
|
Sets the gap between each dash, if the border around the trend-line display value is drawn as a dashed line. |
The data structure needed to render the above chart is given below:
{
"chart": {
"caption": "Monthly revenue for the last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue",
"numberPrefix": "$",
"theme": "fint",
"trendValueFontBold": "1",
"trendValueBorderColor": "#123456",
"trendValueBorderDashed": "1",
"trendValueBorderDashlen": "2",
"trendValueBorderDashGap": "3",
"trendValueBorderThickness": "3"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
],
"trendlines": [
{
"line": [
{
"startvalue": "700000",
"color": "#1aaf5d",
"valueOnRight": "1",
"displayvalue": "Monthly Target"
}
]
}
]
}Adding dashed trend lines
A column 2D chart with a dashed trendline looks as below:
Given below are the attributes used to render a dashed trendline instead of the continuous line:
| Attribute | Description |
|---|---|
|
Set this to |
|
Sets the length of each dash of a trend line(in pixels). |
|
Sets the gap between two consecutive dashes in trend lines (in pixels). |
The data structure needed to render a dashed trendline is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"startvalue": "175000",
"color": "#1aaf5d",
"displayvalue": "Target - $175K",
"dashed": "1",
"dashLen": "4",
"dashGap": "2"
}
]
}
]
}Adding slanted trendlines
A line chart with a slanted trend line is as shown below:
Given below are the attributes used to render a slanted trend line:
| Attribute | Description |
|---|---|
|
It specifies the starting point data-value for the slanted trend line. This data value is plotted on the y-axis on the left. |
|
It specifies the ending point data-value for the slanted trend line. This data value is plotted on the imaginary y-axis on the right. |
The data structure needed to add a slanted trendline is given below:
{
"chart": {
"caption": "Website Visitors",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visitors",
"anchorRadius": "5",
"showValues": "0",
"theme": "fint"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
],
"trendlines": [
{
"line": [
{
"startvalue": "4400",
"endValue": "6000",
"color": "#1aaf5d",
"valueOnRight": "1",
"dashed": "1",
"displayvalue": "Trend"
}
]
}
]
}Configuring the trend line label
FusionCharts Suite XT allows you to show the trendline label to the right of the chart canvas. A column 2D chart with the trendline label rendered on the right looks as below:
Given below is the attribute used to render the trend line label on the right:
Attribute |
Description |
|
If set to |
The data structure needed to configure the trendline label is given below:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "Last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
],
"trendlines": [
{
"line": [
{
"startvalue": "175000",
"color": "#1aaf5d",
"displayvalue": "Target - $175K",
"dashed": "1",
"dashLen": "4",
"dashGap": "2",
"valueOnRight": "1"
}
]
}
]
}Adding trendlines for a dual y-axis chart
A dual y-axis chart has 2 y-axes. So when you are defining a trendline, you also need to define which axis the line has to be defined on.
This can be done using the parentYAxis attribute of the line object.
By default, the trend-line shows up on the primary y-axis but if you want to show it on the secondary y-axis you have to configure the same by setting parentYAxis equal to S.