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
Task: Logo-I

Date: 7/22/2014 09:30:00 - 7/22/2014 16:30:00
Task: Logo-II

Date: 7/23/2014 14:00:00 - 7/24/2014 16:30:00
Task: Website Template
David.G EMP122 PHP Date: 7/21/2014 10:00:00 - 7/25/2014 14:30:00
Task: PHP Blueprint
Mary.P EMP123 Testing Date: 7/21/2014 10:00:00 - 7/21/2014 15:30:00
Task: Testing Specification

Date: 7/22/2014 09:30:00 - 7/22/2014 16:00:00
Task: Testing tool research

Date: 7/23/2014 09:30:00 - 7/25/2014 16:30:00
Task: Testing tool integration
Andrew.H EMP124 QA Date: 7/22/2014 09:30:00 - 7/22/2014 16:30:00
Task: QA

Date: 7/23/2014 09:00:00 - 7/23/2014 16:30:00
Task: QA

Date: 7/24/2014 09:30:00 - 7/25/2014 14:30:00
Task: QA
Neil.M EMP125 Documentation Date: 7/25/2014 15:00:00 - 7/25/2014 16:59:00
Task: Weekly Meet

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 should load here..

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 should load here..

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.

The data structure needed to render a Gantt chart with projected and actual timelines is given below:

...

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 should load here..

Given below is a brief description of the attributes used to render a legend:

Attribute Name Description
label It is used to specify the label for the legend. This attribute belongs to the item object, which in turn belongs to the legend object.
color 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 item object, which in turn belongs to the legend object.
legendCaption It is used to specify a caption for the legend box. This attribute belongs to the chart object.

The data structure needed to add a legend to the Gantt chart is given below:

...

There! You have now seen how you can add multiple tasks for a process in the Gantt chart.