Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

  • Create a trend-line

  • Create a trend-zone

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..

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.

The data structure needed to create a trend-line is given below:

{ "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"
                }
            ]
        }
    ]
}

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..

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.

The data structure needed to create a trend-zone is given below:

{ "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"
                }
            ]
        }
    ]
}

There! You have now seen how you can create trend-lines and trend-zones for a Gantt chart.

Top