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

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:

• JSON
• XML

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:

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:

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:

• JSON
• XML

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:

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

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

• JSON
• XML

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