From Scratch: Gantt Chart (Basic Concepts)

Posted by admin at June 25, 2019

As a part of the aviation oversight work tracking application I was working on, I had to organise inspector work activities into projects and sub projects and hence there was the need for a Gantt chart tool incorporated into the database application.

NOTE: Please note, this is just a basic concept of a custom-made Gantt Chart I built for one of my projects. I am yet to upload a simple working version of the application. I will edit this entry and add a Github links when I clean it up. For the From Scratch series, I will be discussing how certain parts of my projects were conceptualised and built.

Gantt Charts are graphical visualisations for projects, presenting the progression and completion of the various tasks to be carried out.

I had formally implemented this using JSGantt which was a good tool and did the job. However, I wanted a tool, built from scratch, that could tweak to display additional useful information on tasks:

The inspector name and avatar performing the job task or work activity
The task percentage completion
Ability to toggle the view to show more or less information which in turn allows the user view more graphical space.
Project/Task periods, start dates and stop dates
Other important metadata generated

The Building Blocks:

So to start off, I had to assemble the components of the chart, which itself is basically a double bar chart plotted on a HTML table with a calendar on the Y-axis and the list of tasks on the X-axis.

The Task Bar: A 2 part Bar chart representing the length of a single task. The bar has a color to differentiate it from other tasks and fills up to a percentage (the dark color for the filled part and lighter color for the empty). Basically some CSS tricks will get this sorted out.CSS:


<style>
.bar-graph {list-style: none;margin: 0px 0px auto;}
/* the container */
.bar-wrap {@include prefix(border-radius,10px 10px 10px 10px); margin-bottom: 10px;}
/* filled portion of the bar */
.bar-fill { @include prefix(border-radius,10px 10px 10px 10px); @include prefix(animation, bar-fill 1s); display: block; height: 7px; width: 0px; }
/* the different bar colors */
.bar-success {background-color: rgba(25, 211, 163, 1);} .bar-primary {background-color: rgba(0, 155, 202, 1);} .bar-secondary {background-color: rgba(0, 155, 202, 1);} .bar-warning {background-color: rgba(255, 209, 119, 1);} .bar-danger {background-color: rgba(255, 51, 78, 1);}
/* the different bar colors */
.bar-wrap-success {background-color: rgba(25, 211, 163, 0.2);} .bar-wrap-primary {background-color: rgba(0, 155, 202, 0.2);} .bar-wrap-secondary {background-color: rgba(0, 155, 202, 0.2);} .bar-wrap-warning {background-color: rgba(255, 209, 119, 0.2);} .bar-wrap-danger {background-color: rgba(255, 51, 78, 0.2);}
</style>

HTML:


<ul class="bar-graph">
<li>
<!-- this section will display information on the bar -->
<span class="fw_b text-primary">20%</span>
<!-- Critical Work Activities Closed -->
<!-- this section draws the bar -->
<div class="bar-wrap bar-wrap-primary"></div></li>
</ul>

The result should look like this:

The Chart Canvas: The chart canvas would be done with a bordered table. The area to plot the data would be in the bottom right quadrant, this means the calendar would be on the top row and the list of tasks would appear in the first column.CSS:


<style>
table tr { border-top:1px solid #d3d3d3; margin:0px; padding:3px; }
table td { border-right:1px solid #d3d3d3; border-left:1px solid #d3d3d3; margin:0px; padding:3px; }
</style>

OR you can use Bootstrap classes: “table” and “table-bordered”

HTML:


<img class="circle w25" alt="" src="{{avatar}}" />
<table class="table table-border">
<!-- ... the plotting loop happen here -->
</table>
</div>

X-Axis (Time/Day list):The X-axis would be represented by the list of days in days in the first row of the canvas table. Each cell in the row should be labeled with the Day number and the date.


+--------------------+--------------------+--------------------+-----+
| Day 1 (20/04/2019) | Day 2 (20/04/2019) | Day 3 (20/04/2019) | ... |
+--------------------+--------------------+--------------------+-----+

Additional functionality can be added to increase the time period from Days to Months or Years.


+-------------+----------+-----------+-----+
| April 2019) | May 2019 | June 2019 | ... |
+-------------+----------+-----------+-----+

Y-Axis (List of Activities):The Y-Axis on the table canvas would be the List of Activities generated from the database. The information from each job task includes:
- Name and code of the task
- Activity coordinator (name of the inspector performing the task)
- Start Date
- Stop Date
- Percentage Completed
Each of the cells in the first column of the canvas table should have the following HTML template in it (Bootstrap was used for the grid work).
```
<div class="row">
<div class="col-2">

</div>
<div class="col-10">

{{inspector-name}}<br>

{{task-code}} - {{task-name}}
</div>
</div>
```

The Dataset: Then I had to prepare the datasets for presentation. I used arrays. A portion of the dataset will be generated from the MySQL table joining several tables to collate information:User Table: the names and avatars of the team leader and members:

Project Table: the title, progress percentage, start and stop dates of the Project(s)
Job Task Table: the title, progress percentage, start and stop dates of the job tasks associated with the selected Project(s)
Next, I loop through the start and stop dates to generate more needed plotting data such as:
- Duration of the task: which is a difference in days between the start and the stop dates
- Start points for each Bar: a difference in days between the start date and the earliest date in the start dates. This will determine where the bar chart will start on the table canvas.
- Stop points for each Bar: this will be the sum of the start point and the duration. This will be determine where the bar chart will terminate.

Below is the final order of the combined results from both the database and the calculations:


$tasks = [
    // record ids for the projects and tasks
    'id' => ['-',21,23,45,16,27,'',],
    // the title of the projects and the constituent tasks
    'title' => [
        'Project Start',
        'CONDUCT ABC AIRMEN TESTS AND ASSESSMENTS',
        '4.309 - Conduct a Flight Engineer Skill Test',
        '7.421 - Inspect a Flight Instructor Refresher Course',
        '7.433 - Inspect a Designated Fireman Assessor',
        '4.724 - Evaluate a Core Curriculum',
        '4.724 - Close Deficiencies',
        'Project Stop',
    ],
    // completion % of the project and the tasks
    'pcent' => [
        '-',
        '80',
        '95',
        '60',
        '15',
        '20',
        '12',
        '-',
    ],
    // the names of the team members (project and task coordinators)
    'team' => [
        '-',
        'CHEUNG Jim (Project Coordinator)',
        'CROWDER Daniel (Task Coordinator)',
        'LONE Theresa (Task Coordinator)',
        'DAVIES Katia (Task Coordinator)',
        'YUSSEOUF Shawn (Task Coordinator)',
        '-',
    ],
    // these are the images of the coordinators and inspector fetched from the database
    'avatar' => [
        '-',
    'avatars/users/cheungjim.jpg',
    'avatars/users/crowderdaniel.jpg',
    'avatars/users/lonetheresa.jpg',
    'avatars/users/davieskaita.jpeg',
    'avatars/users/yusseoufshawn.jpeg',
        '-',
    ],
    // start dates from database
    'stop_date' => [
        '-',
        '10-01-2016',
        '01-04-2016',
        '10-06-2016',
        '01-12-2016',
        '03-12-2016',
        '-',
    ],
    // stop dates from database
    'stop_date' => [
        '-',
        '10-12-2016',
        '31-07-2016',
        '29-04-2016',
        '29-07-2016',
        '26-12-2016',
        '-',
    ],
    // the bar colors : this will be attached to the css of the plotted bars
    'color' => [
        '-',
        'primary',
        'success',
        'warning',
        'danger',
        'primary',
        '-',
    ],
    // period in days or months : a simple calculation using start and stop dates
    // will generate these
    'period' => [
        '-',
        '568 days',
        '29 days',
        '25 days',
        '60 days',
        '23 days',
        '-',
    ],
    // These are the plotting positions. I used the start date and
    // referenced them to the earliest start date of the project.
    // This calculation will generate a certain offset from the earliest
    // date in days, very similar to the calculation used to determine the periods
    'start' => [
        '-',1,6,8,10,4,'-'
    ],
    // These are the plotting positions that determines where the bars
    // will terminate for each row. The calculation used here would be
    // the sum of the start points and the the period
    'stop' => [
        '-',9,10,15,29,10,'-',
    ],
];

Plotting: Plotting the chart will involve looping through the Dataset array and perform the following actions:
1. Generate the table HTML
2. List the Days and dates in the Duration of the project as the table’s header
3. For each table row
  - Enter the title of the project or the task, the coordinator’s name and avatar in the first cell
  - For each cell, determine if the current cell is the start point and if so: display the bar HTML with the length of the period and the filled portion.

The final result after plotting the bars will look something like this:

0 likes

From Scratch: Gantt Chart (Basic Concepts)

Archives

Links