Loading
Adding Multiple Tasks to a Process
There can be scenarios wherein a process may have multiple tasks. A Gantt chart allows you to create multiple tasks for processes by mapping tasks and processes using IDs.
In this section, using a simple example, you will be shown how you can add multiple tasks to a process.
Example Data to Plot: Employee Schedule
Assume that we have a Gantt chart showing the employee schedule where each employee is a process. For this chart, you might need to create multiple tasks for each employee.
For this example, we’ll be plotting a Gantt chart showing the scheduled work list for each employee during a particular week. The data can be visualized as shown in the data table below (all input dates are in mm/dd/yyyy hh:mm:ss format).
| Employee Name | Employee Id | Team | Allotted tasks for this week |
|---|---|---|---|
John.S |
EMP121 |
Graphics |
Date: 7/21/2014 09:30:00 - 7/21/2014 17:00:00 |
David.G |
EMP122 |
PHP |
Date: 7/21/2014 10:00:00 - 7/25/2014 14:30:00 |
Mary.P |
EMP123 |
Testing |
Date: 7/21/2014 10:00:00 - 7/21/2014 15:30:00 |
Andrew.H |
EMP124 |
QA |
Date: 7/22/2014 09:30:00 - 7/22/2014 16:30:00 |
Neil.M |
EMP125 |
Documentation |
Date: 7/25/2014 15:00:00 - 7/25/2014 16:59:00 |
From the above data, you can deduce that:
-
Each employee is a process.
-
Each employee is assigned a unique ID that will be used to map the tasks with the employees.
-
Each employee is assigned multiple tasks.
-
Each task is assigned a unique ID (not shown in the table above).
When you dynamically generate the Gantt chart’s JSON data from your database, in all probability, you will have internal IDs defined for each task and each process. You can use those IDs as the process ID and task ID.
Converting to JSON
The above table when converted to JSON looks as under:
In the above JSON, we have:
-
Defined the visual timeline (categories) to show days in the fourth week of July 2014.
-
Defined each employee as a process and assigned the employee ID as process ID.
-
Added each employee’s team name and an additional data column.
-
Defined each task with its own ID. Each task is linked to its employee using the process ID.
When you now view this chart, you’ll get something as under:
FusionCharts will load here..
{
"chart": {
"caption": "Development Division - Work Schedule",
"subcaption": "Week 2 - (21st July to 25th July)",
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "7/21/2014 00:00:00",
"end": "7/21/2014 23:59:59",
"label": "Monday"
},
{
"start": "7/22/2014 00:00:00",
"end": "7/22/2014 23:59:59",
"label": "Tuesday"
},
{
"start": "7/23/2014 00:00:00",
"end": "7/23/2014 23:59:59",
"label": "Wednesday"
},
{
"start": "7/24/2014 00:00:00",
"end": "7/24/2014 23:59:59",
"label": "Thursday"
},
{
"start": "7/25/2014 00:00:00",
"end": "7/25/2014 23:59:59",
"label": "Friday"
}
]
}
],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Employee",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [
{
"label": "John S.",
"id": "EMP121"
},
{
"label": "David G.",
"id": "EMP122"
},
{
"label": "Mary P.",
"id": "EMP123"
},
{
"label": "Andrew H.",
"id": "EMP124"
},
{
"label": "Neil M.",
"id": "EMP125"
}
]
},
"tasks": {
"showlabels": "1",
"task": [
{
"processid": "EMP121",
"start": "7/21/2014 09:30:00",
"end": "7/21/2014 17:00:00",
"label": "Logo-I"
},
{
"processid": "EMP121",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "Logo-II"
},
{
"processid": "EMP121",
"start": "7/23/2014 14:00:00",
"end": "7/24/2014 16:30:00",
"label": "Website template"
},
{
"processid": "EMP122",
"start": "7/21/2014 10:00:00",
"end": "7/25/2014 14:30:00",
"label": "PHP Blueprint"
},
{
"processid": "EMP123",
"start": "7/21/2014 10:00:00",
"end": "7/21/2014 15:30:00",
"label": "Testing Specification"
},
{
"processid": "EMP123",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:00:00",
"label": "Testing tool research"
},
{
"processid": "EMP123",
"start": "7/23/2014 09:30:00",
"end": "7/25/2014 16:30:00",
"label": "Testing tool integration"
},
{
"processid": "EMP124",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "QA"
},
{
"processid": "EMP124",
"start": "7/23/2014 09:00:00",
"end": "7/23/2014 16:30:00",
"label": "QA"
},
{
"processid": "EMP124",
"start": "7/24/2014 09:30:00",
"end": "7/25/2014 14:30:00",
"label": "QA"
},
{
"processid": "EMP125",
"start": "7/25/2014 15:00:00",
"end": "7/25/2014 16:59:00",
"label": "Weekly Meet"
}
]
}
}<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: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Development Division - Work Schedule",
"subcaption": "Week 2 - (21st July to 25th July)",
"dateformat": "mm/dd/yyyy hh:mm:ss",
"outputDateFormat": "ddds mnl, yyyy hh12:mn ampm",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [{
"category": [{
"start": "7/21/2014 00:00:00",
"end": "7/21/2014 23:59:59",
"label": "Monday"
}, {
"start": "7/22/2014 00:00:00",
"end": "7/22/2014 23:59:59",
"label": "Tuesday"
}, {
"start": "7/23/2014 00:00:00",
"end": "7/23/2014 23:59:59",
"label": "Wednesday"
}, {
"start": "7/24/2014 00:00:00",
"end": "7/24/2014 23:59:59",
"label": "Thursday"
}, {
"start": "7/25/2014 00:00:00",
"end": "7/25/2014 23:59:59",
"label": "Friday"
}]
}],
"processes": {
"fontsize": "12",
"isbold": "1",
"align": "left",
"headertext": "Employee",
"headerfontsize": "14",
"headervalign": "middle",
"headeralign": "left",
"process": [{
"label": "John S.",
"id": "EMP121"
}, {
"label": "David G.",
"id": "EMP122"
}, {
"label": "Mary P.",
"id": "EMP123"
}, {
"label": "Andrew H.",
"id": "EMP124"
}, {
"label": "Neil M.",
"id": "EMP125"
}]
},
"tasks": {
"showlabels": "1",
"task": [{
"processid": "EMP121",
"start": "7/21/2014 09:30:00",
"end": "7/21/2014 17:00:00",
"label": "Logo-I"
}, {
"processid": "EMP121",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "Logo-II"
}, {
"processid": "EMP121",
"start": "7/23/2014 14:00:00",
"end": "7/24/2014 16:30:00",
"label": "Website template"
}, {
"processid": "EMP122",
"start": "7/21/2014 10:00:00",
"end": "7/25/2014 14:30:00",
"label": "PHP Blueprint"
}, {
"processid": "EMP123",
"start": "7/21/2014 10:00:00",
"end": "7/21/2014 15:30:00",
"label": "Testing Specification"
}, {
"processid": "EMP123",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:00:00",
"label": "Testing tool research"
}, {
"processid": "EMP123",
"start": "7/23/2014 09:30:00",
"end": "7/25/2014 16:30:00",
"label": "Testing tool integration"
}, {
"processid": "EMP124",
"start": "7/22/2014 09:30:00",
"end": "7/22/2014 16:30:00",
"label": "QA"
}, {
"processid": "EMP124",
"start": "7/23/2014 09:00:00",
"end": "7/23/2014 16:30:00",
"label": "QA"
}, {
"processid": "EMP124",
"start": "7/24/2014 09:30:00",
"end": "7/25/2014 14:30:00",
"label": "QA"
}, {
"processid": "EMP125",
"start": "7/25/2014 15:00:00",
"end": "7/25/2014 16:59:00",
"label": "Weekly Meet"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Showing Projected vs Actual Dates
The technique of allocating multiple tasks can be used effectively to show the projected vs actual duration for different tasks.
A Gantt chart shown with the projected and actual timelines looks like this:
FusionCharts will load here..
{
"chart": {
"palette": "2",
"caption": "Construction Timeline",
"captionFontSize": "14",
"dateformat": "dd/mm/yyyy",
"outputdateformat": "ddds mns",
"showCanvasBorder": "1",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "1/5/2014",
"end": "31/8/2014",
"label": "Months"
}
]
},
{
"category": [
{
"start": "1/5/2014",
"end": "31/5/2014",
"label": "May"
},
{
"start": "1/6/2014",
"end": "30/6/2014",
"label": "June"
},
{
"start": "1/7/2014",
"end": "31/7/2014",
"label": "July"
},
{
"start": "1/8/2014",
"end": "31/8/2014",
"label": "August"
}
]
}
],
"processes": {
"headertext": "Task",
"headerfontsize": "14",
"fontsize": "12",
"process": [
{
"label": "Terrace",
"id": "TRC"
},
{
"label": "Plumbing",
"id": "INS"
},
{
"label": "Wood Work",
"id": "WDW"
},
{
"label": "Interiors",
"id": "INT"
}
]
},
"tasks": {
"showlabels": "1",
"showenddate": "1",
"task": [
{
"label": "Planned",
"processid": "TRC",
"start": "5/5/2014",
"end": "2/6/2014",
"id": "5-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "TRC",
"start": "10/5/2014",
"end": "2/6/2014",
"id": "5",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
},
{
"label": "Planned",
"processid": "INS",
"start": "11/5/2014",
"end": "12/6/2014",
"id": "6-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "INS",
"start": "13/5/2014",
"end": "19/6/2014",
"id": "6",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
},
{
"label": "Planned",
"processid": "WDW",
"start": "1/6/2014",
"end": "12/7/2014",
"id": "7-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "WDW",
"start": "2/6/2014",
"end": "19/7/2014",
"id": "7",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
},
{
"label": "Planned",
"processid": "INT",
"start": "1/6/2014",
"end": "12/8/2014",
"id": "8-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "INT",
"start": "1/6/2014",
"end": "19/8/2014",
"id": "8",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
}
]
}
}<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: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"palette": "2",
"caption": "Construction Timeline",
"captionFontSize": "14",
"dateformat": "dd/mm/yyyy",
"outputdateformat": "ddds mns",
"showCanvasBorder": "1",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [{
"category": [{
"start": "1/5/2014",
"end": "31/8/2014",
"label": "Months"
}]
}, {
"category": [{
"start": "1/5/2014",
"end": "31/5/2014",
"label": "May"
}, {
"start": "1/6/2014",
"end": "30/6/2014",
"label": "June"
}, {
"start": "1/7/2014",
"end": "31/7/2014",
"label": "July"
}, {
"start": "1/8/2014",
"end": "31/8/2014",
"label": "August"
}]
}],
"processes": {
"headertext": "Task",
"headerfontsize": "14",
"fontsize": "12",
"process": [{
"label": "Terrace",
"id": "TRC"
}, {
"label": "Plumbing",
"id": "INS"
}, {
"label": "Wood Work",
"id": "WDW"
}, {
"label": "Interiors",
"id": "INT"
}]
},
"tasks": {
"showlabels": "1",
"showenddate": "1",
"task": [{
"label": "Planned",
"processid": "TRC",
"start": "5/5/2014",
"end": "2/6/2014",
"id": "5-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "TRC",
"start": "10/5/2014",
"end": "2/6/2014",
"id": "5",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
}, {
"label": "Planned",
"processid": "INS",
"start": "11/5/2014",
"end": "12/6/2014",
"id": "6-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "INS",
"start": "13/5/2014",
"end": "19/6/2014",
"id": "6",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
}, {
"label": "Planned",
"processid": "WDW",
"start": "1/6/2014",
"end": "12/7/2014",
"id": "7-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "WDW",
"start": "2/6/2014",
"end": "19/7/2014",
"id": "7",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
}, {
"label": "Planned",
"processid": "INT",
"start": "1/6/2014",
"end": "12/8/2014",
"id": "8-1",
"color": "#4567aa",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "INT",
"start": "1/6/2014",
"end": "19/8/2014",
"id": "8",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "70%"
}]
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>In the above chart, we are showing the time required by various tasks in a construction process. The projected time required is rendered in blue and the actual time required is rendered in gray.
Adding Legend to the Projected vs Actual Gantt Chart
As you can see in the chart above, we have used color coding to distinguish between the actual dates and projected dates. We have also used the labels ‘Planned’ and ‘Actual’, repeatedly, to indicate which color indicates what. A better alternative to rendering these labels is adding a legend to the chart.
A projected vs actual Gantt chart rendered with a legend looks like this:
FusionCharts will load here..
{
"chart": {
"palette": "2",
"caption": "Construction Timeline",
"captionFontSize": "16",
"dateformat": "dd/mm/yyyy",
"outputdateformat": "ddds mns",
"showCanvasBorder": "1",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [
{
"category": [
{
"start": "1/5/2014",
"end": "31/8/2014",
"label": "Months"
}
]
},
{
"category": [
{
"start": "1/5/2014",
"end": "31/5/2014",
"label": "May"
},
{
"start": "1/6/2014",
"end": "30/6/2014",
"label": "June"
},
{
"start": "1/7/2014",
"end": "31/7/2014",
"label": "July"
},
{
"start": "1/8/2014",
"end": "31/8/2014",
"label": "August"
}
]
}
],
"processes": {
"headertext": "Task",
"headerfontsize": "14",
"fontsize": "12",
"process": [
{
"label": "Terrace",
"id": "TRC"
},
{
"label": "Plumbing",
"id": "INS"
},
{
"label": "Wood Work",
"id": "WDW"
},
{
"label": "Interiors",
"id": "INT"
}
]
},
"tasks": {
"showlabels": "1",
"showenddate": "1",
"task": [
{
"label": "Planned",
"processid": "TRC",
"start": "5/5/2014",
"end": "2/6/2014",
"id": "5-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "TRC",
"start": "10/5/2014",
"end": "2/6/2014",
"id": "5",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
},
{
"label": "Planned",
"processid": "INS",
"start": "11/5/2014",
"end": "12/6/2014",
"id": "6-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "INS",
"start": "13/5/2014",
"end": "19/6/2014",
"id": "6",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
},
{
"label": "Planned",
"processid": "WDW",
"start": "1/6/2014",
"end": "12/7/2014",
"id": "7-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "WDW",
"start": "2/6/2014",
"end": "19/7/2014",
"id": "7",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
},
{
"label": "Planned",
"processid": "INT",
"start": "1/6/2014",
"end": "12/8/2014",
"id": "8-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
},
{
"label": "Actual",
"processid": "INT",
"start": "1/6/2014",
"end": "19/8/2014",
"id": "8",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
}
]
},
"legend": {
"item": [
{
"label": "Planned",
"color": "999999"
},
{
"label": "Actual",
"color": "4567aa"
}
]
}
}<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: '650',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"palette": "2",
"caption": "Construction Timeline",
"captionFontSize": "16",
"dateformat": "dd/mm/yyyy",
"outputdateformat": "ddds mns",
"showCanvasBorder": "1",
"canvasBorderAlpha": "30",
"theme": "fint"
},
"categories": [{
"category": [{
"start": "1/5/2014",
"end": "31/8/2014",
"label": "Months"
}]
}, {
"category": [{
"start": "1/5/2014",
"end": "31/5/2014",
"label": "May"
}, {
"start": "1/6/2014",
"end": "30/6/2014",
"label": "June"
}, {
"start": "1/7/2014",
"end": "31/7/2014",
"label": "July"
}, {
"start": "1/8/2014",
"end": "31/8/2014",
"label": "August"
}]
}],
"processes": {
"headertext": "Task",
"headerfontsize": "14",
"fontsize": "12",
"process": [{
"label": "Terrace",
"id": "TRC"
}, {
"label": "Plumbing",
"id": "INS"
}, {
"label": "Wood Work",
"id": "WDW"
}, {
"label": "Interiors",
"id": "INT"
}]
},
"tasks": {
"showlabels": "1",
"showenddate": "1",
"task": [{
"label": "Planned",
"processid": "TRC",
"start": "5/5/2014",
"end": "2/6/2014",
"id": "5-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "TRC",
"start": "10/5/2014",
"end": "2/6/2014",
"id": "5",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
}, {
"label": "Planned",
"processid": "INS",
"start": "11/5/2014",
"end": "12/6/2014",
"id": "6-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "INS",
"start": "13/5/2014",
"end": "19/6/2014",
"id": "6",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
}, {
"label": "Planned",
"processid": "WDW",
"start": "1/6/2014",
"end": "12/7/2014",
"id": "7-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "WDW",
"start": "2/6/2014",
"end": "19/7/2014",
"id": "7",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
}, {
"label": "Planned",
"processid": "INT",
"start": "1/6/2014",
"end": "12/8/2014",
"id": "8-1",
"color": "#EEEEEE",
"height": "25%",
"toppadding": "22%"
}, {
"label": "Actual",
"processid": "INT",
"start": "1/6/2014",
"end": "19/8/2014",
"id": "8",
"color": "#4567aa",
"height": "25%",
"toppadding": "70%"
}]
},
"legend": {
"item": [{
"label": "Planned",
"color": "999999"
}, {
"label": "Actual",
"color": "4567aa"
}]
}
}
}
);
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 legend:
| Attribute Name | Description |
|---|---|
|
It is used to specify the label for the legend. This attribute belongs to the |
|
It is used to specify the hex code of the color to be used for a legend, e.g. #34ACDE. This attribute belongs to the |
|
It is used to specify a caption for the legend box. This attribute belongs to the |