Loading
Adding Trend-lines
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:
Given below is a brief description of the attributes used to create a trend-line:
| Attribute Name | Description |
|---|---|
|
It is used to specify the start date for the trend-line. |
|
It is used to specify the label for the trend-line. |
|
It is used to specify the hex code of the color that will be used to render the trend-line. |
|
It is used to specify the thickness for the trend-line. |
|
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"
}
]
}
]
}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:
Given below is a brief description of the attributes used to render a trend-zone:
| Attribute Name | Description |
|---|---|
|
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. |
|
It is used to specify the start date for the trend-zone. |
|
It is used to specify the end date for the trend-zone. |
|
It is used to specify the label for the trend-zone. |
|
It is used to specify the hex code of the color that will be used to render the trend-line. |
|
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"
}
]
}
]
}There! You have now seen how you can create trend-lines and trend-zones for a Gantt chart.