Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Trend-lines and trend-zones are used to represent a target value and a target range, respectively. You can add them to your Gantt chart to mark an event for a particular data - for example, you can add a trend-line to indicate “Testing Start” or a trend-zone to show the Christmas vacation period.

In this section, you will be shown how you can:

Creating a Trend-line

As an example, we will create a trend line showing “Testing Start” in the “Social Media Optimization” Gantt chart.

A Gantt chart rendered with a trend-line looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Project Plan" }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] }, "trendlines": [ { "line": [ { "start": "01/21/2015", "displayValue": "Testing Start", "color": "#333333", "thickness": "2", "dashed": "1" } ] } ] }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Project Plan"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    },
    "trendlines": [
        {
            "line": [
                {
                    "start": "01/21/2015",
                    "displayValue": "Testing Start",
                    "color": "#333333",
                    "thickness": "2",
                    "dashed": "1"
                }
            ]
        }
    ]
}
<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: 'gantt',
    renderAt: 'chart-container',
    width: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Project Plan"
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015"
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        },
        "trendlines": [{
            "line": [{
                "start": "01/21/2015",
                "displayValue": "Testing Start",
                "color": "#333333",
                "thickness": "2",
                "dashed": "1"
            }]
        }]
    }
}
);
    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-line:

Attribute Name Description

start

It is used to specify the start date for the trend-line.

displayValue

It is used to specify the label for the trend-line.

color

It is used to specify the hex code of the color that will be used to render the trend-line.

thickness

It is used to specify the thickness for the trend-line.

dashed

It is used to specify whether the trend-line will be rendered as a dashed line. Setting this attribute to 1 will render the trend-line as dashed line, setting it to 0 (default) will render a whole line.

These attributes belong to the line object, which in turn belongs to the trendlines object.

Creating Trend-zones

As an example, we will create a trend-zone in the “Social Media Optimization” Gantt chart to represent the block of dates for the Christmas vacation.

A Gantt chart rendered with a trend-zone looks like this:

FusionCharts will load here..
{ "chart": { "dateformat": "mm/dd/yyyy", "caption": "Social Media Optimization", "subcaption": "Project Plan" }, "categories": [ { "category": [ { "start": "08/01/2014", "end": "08/31/2014", "label": "Aug '14" }, { "start": "09/01/2014", "end": "09/30/2014", "label": "Sep '14" }, { "start": "10/01/2014", "end": "10/31/2014", "label": "Oct '14" }, { "start": "11/01/2014", "end": "11/30/2014", "label": "Nov '14" }, { "start": "12/01/2014", "end": "12/31/2014", "label": "Dec '14" }, { "start": "01/01/2015", "end": "01/31/2015", "label": "Jan '15" }, { "start": "02/01/2015", "end": "02/28/2015", "label": "Feb '15" }, { "start": "03/01/2015", "end": "03/31/2015", "label": "Mar '15" } ] } ], "processes": { "fontsize": "12", "isbold": "1", "align": "left", "process": [ { "label": "Identify Customers" }, { "label": "Survey 500 Customers" }, { "label": "Interpret Requirements" }, { "label": "Market Analysis" }, { "label": "Brainstorm concepts" }, { "label": "Define Ad Requirements" }, { "label": "Design & Develop" }, { "label": "Mock test" }, { "label": "Documentation" }, { "label": "Start Campaign" } ] }, "tasks": { "task": [ { "start": "08/04/2014", "end": "08/10/2014" }, { "start": "08/08/2014", "end": "08/19/2014" }, { "start": "08/19/2014", "end": "09/02/2014" }, { "start": "08/24/2014", "end": "09/02/2014" }, { "start": "09/02/2014", "end": "09/21/2014" }, { "start": "09/21/2014", "end": "10/06/2014" }, { "start": "10/06/2014", "end": "01/21/2015" }, { "start": "01/21/2015", "end": "02/19/2015" }, { "start": "01/28/2015", "end": "02/24/2015" }, { "start": "02/24/2015", "end": "03/27/2015" } ] }, "trendlines": [ { "line": [ { "start": "12/25/2014", "end": "12/31/2014", "displayvalue": "Christmas Week", "istrendzone": "1", "alpha": "20", "color": "#FF5904" } ] } ] }
{
    "chart": {
        "dateformat": "mm/dd/yyyy",
        "caption": "Social Media Optimization",
        "subcaption": "Project Plan"
    },
    "categories": [
        {
            "category": [
                {
                    "start": "08/01/2014",
                    "end": "08/31/2014",
                    "label": "Aug '14"
                },
                {
                    "start": "09/01/2014",
                    "end": "09/30/2014",
                    "label": "Sep '14"
                },
                {
                    "start": "10/01/2014",
                    "end": "10/31/2014",
                    "label": "Oct '14"
                },
                {
                    "start": "11/01/2014",
                    "end": "11/30/2014",
                    "label": "Nov '14"
                },
                {
                    "start": "12/01/2014",
                    "end": "12/31/2014",
                    "label": "Dec '14"
                },
                {
                    "start": "01/01/2015",
                    "end": "01/31/2015",
                    "label": "Jan '15"
                },
                {
                    "start": "02/01/2015",
                    "end": "02/28/2015",
                    "label": "Feb '15"
                },
                {
                    "start": "03/01/2015",
                    "end": "03/31/2015",
                    "label": "Mar '15"
                }
            ]
        }
    ],
    "processes": {
        "fontsize": "12",
        "isbold": "1",
        "align": "left",
        "process": [
            {
                "label": "Identify Customers"
            },
            {
                "label": "Survey 500 Customers"
            },
            {
                "label": "Interpret Requirements"
            },
            {
                "label": "Market Analysis"
            },
            {
                "label": "Brainstorm concepts"
            },
            {
                "label": "Define Ad Requirements"
            },
            {
                "label": "Design & Develop"
            },
            {
                "label": "Mock test"
            },
            {
                "label": "Documentation"
            },
            {
                "label": "Start Campaign"
            }
        ]
    },
    "tasks": {
        "task": [
            {
                "start": "08/04/2014",
                "end": "08/10/2014"
            },
            {
                "start": "08/08/2014",
                "end": "08/19/2014"
            },
            {
                "start": "08/19/2014",
                "end": "09/02/2014"
            },
            {
                "start": "08/24/2014",
                "end": "09/02/2014"
            },
            {
                "start": "09/02/2014",
                "end": "09/21/2014"
            },
            {
                "start": "09/21/2014",
                "end": "10/06/2014"
            },
            {
                "start": "10/06/2014",
                "end": "01/21/2015"
            },
            {
                "start": "01/21/2015",
                "end": "02/19/2015"
            },
            {
                "start": "01/28/2015",
                "end": "02/24/2015"
            },
            {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }
        ]
    },
    "trendlines": [
        {
            "line": [
                {
                    "start": "12/25/2014",
                    "end": "12/31/2014",
                    "displayvalue": "Christmas Week",
                    "istrendzone": "1",
                    "alpha": "20",
                    "color": "#FF5904"
                }
            ]
        }
    ]
}
<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: 'gantt',
    renderAt: 'chart-container',
    width: '750',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "dateformat": "mm/dd/yyyy",
            "caption": "Social Media Optimization",
            "subcaption": "Project Plan"
        },
        "categories": [{
            "category": [{
                "start": "08/01/2014",
                "end": "08/31/2014",
                "label": "Aug '14"
            }, {
                "start": "09/01/2014",
                "end": "09/30/2014",
                "label": "Sep '14"
            }, {
                "start": "10/01/2014",
                "end": "10/31/2014",
                "label": "Oct '14"
            }, {
                "start": "11/01/2014",
                "end": "11/30/2014",
                "label": "Nov '14"
            }, {
                "start": "12/01/2014",
                "end": "12/31/2014",
                "label": "Dec '14"
            }, {
                "start": "01/01/2015",
                "end": "01/31/2015",
                "label": "Jan '15"
            }, {
                "start": "02/01/2015",
                "end": "02/28/2015",
                "label": "Feb '15"
            }, {
                "start": "03/01/2015",
                "end": "03/31/2015",
                "label": "Mar '15"
            }]
        }],
        "processes": {
            "fontsize": "12",
            "isbold": "1",
            "align": "left",
            "process": [{
                "label": "Identify Customers"
            }, {
                "label": "Survey 500 Customers"
            }, {
                "label": "Interpret Requirements"
            }, {
                "label": "Market Analysis"
            }, {
                "label": "Brainstorm concepts"
            }, {
                "label": "Define Ad Requirements"
            }, {
                "label": "Design & Develop"
            }, {
                "label": "Mock test"
            }, {
                "label": "Documentation"
            }, {
                "label": "Start Campaign"
            }]
        },
        "tasks": {
            "task": [{
                "start": "08/04/2014",
                "end": "08/10/2014"
            }, {
                "start": "08/08/2014",
                "end": "08/19/2014"
            }, {
                "start": "08/19/2014",
                "end": "09/02/2014"
            }, {
                "start": "08/24/2014",
                "end": "09/02/2014"
            }, {
                "start": "09/02/2014",
                "end": "09/21/2014"
            }, {
                "start": "09/21/2014",
                "end": "10/06/2014"
            }, {
                "start": "10/06/2014",
                "end": "01/21/2015"
            }, {
                "start": "01/21/2015",
                "end": "02/19/2015"
            }, {
                "start": "01/28/2015",
                "end": "02/24/2015"
            }, {
                "start": "02/24/2015",
                "end": "03/27/2015"
            }]
        },
        "trendlines": [{
            "line": [{
                "start": "12/25/2014",
                "end": "12/31/2014",
                "displayvalue": "Christmas Week",
                "istrendzone": "1",
                "alpha": "20",
                "color": "#FF5904"
            }]
        }]
    }
}
);
    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 render a trend-zone:

Attribute Name Description

isTrendZone

It is used to specify whether a trend-zone or a trend-line will be rendered. Setting this attribute to 1 renders a trend-zone, setting it to 0 (default) renders a trend-line.

start

It is used to specify the start date for the trend-zone.

end

It is used to specify the end date for the trend-zone.

displayValue

It is used to specify the label for the trend-zone.

color

It is used to specify the hex code of the color that will be used to render the trend-line.

alpha

It is used to specify the transparency for the trend-zone.

These attributes belong to the line object, which in turn belongs to the trendlines object.

Top