This document provides comprehensive information about Gantt Charts, their application in project management, and how to use and interpret them in the TTT Tracker application.
- What is a Gantt Chart?
- History of Gantt Charts
- Key Components of a Gantt Chart
- Applications in Project Management
- How to Use Gantt Charts in TTT Tracker
- Understanding the Gantt Visualization
- Step-by-Step Guide
- Interpreting Gantt Charts
- Advanced Features
- Best Practices
- Technical Implementation
A Gantt Chart is a horizontal bar chart used in project management to illustrate a project's schedule. It shows:
- Task start and end times
- Task duration
- Task dependencies (in advanced versions)
- Resource assignments
- Project progress
In the TTT Tracker application:
- Purpose: Visualize when each task was performed
- Display: Tasks on Y-axis, timeline on X-axis
- Color: Different resources get different colors
- Data Source: Start time and end time of completed tasks
| Year | Milestone |
|---|---|
| 1896 | Karol Adamiecki created a "harmonogram" in Poland |
| 1910s | Henry Gantt developed similar charts in the US |
| 1915 | Gantt published his seminal work "Work, Wages, and Profits" |
- American mechanical engineer and management consultant
- Pioneer of scientific management
- Developed the Gantt chart for scheduling complex projects
- His charts were used in major US projects including:
- Hoover Dam construction
- Interstate Highway System
- 1910s-1940s: Manual paper-based charts
- 1950s-1980s: Matrix and timeline printing
- 1990s: Early software implementations (Microsoft Project)
- 2000s-Present: Interactive, web-based Gantt charts
┌────────────────────────────────────────────────────────────────┐
│ GANTT CHART STRUCTURE │
├────────────────────────────────────────────────────────────────┤
│ │
│ Y-AXIS (Tasks) X-AXIS (Timeline) │
│ ───────────── ────────────────── │
│ │
│ Task 1 ████████████ │
│ Task 2 ████████████████ │
│ Task 3 ████████ │
│ Task 4 ██████████████ │
│ Task 5 ████████████ │
│ │
│ Jan Feb Mar Apr May Jun │
│ │
└────────────────────────────────────────────────────────────────┘
| Component | Description | In TTT Tracker |
|---|---|---|
| Task List | Vertical list of tasks | Task names with IDs |
| Time Axis | Horizontal timeline | Dates and times |
| Bars | Task duration | Start to end time |
| Colors | Resource assignment | Assigned person |
| Milestones | Key dates | Not implemented |
| Dependencies | Task relationships | Not implemented |
Gantt charts are essential tools in various industries:
- Track building phases
- Coordinate subcontractors
- Monitor milestones
- Manage resources
- Plan production schedules
- Coordinate assembly lines
- Manage maintenance windows
- Track lead times
- Sprint planning
- Feature timelines
- Release schedules
- Resource allocation
- Project phases
- Experiment schedules
- Milestone tracking
- Deliverable management
- Vendor coordination
- Timeline management
- Resource scheduling
- Progress tracking
- Complete some tasks: Tasks must have start_time and end_time
- Navigate to Gantt screen: Click the "Gantt" tab
- Click "Generate Gantt": The application will visualize task timelines
Task Record:
┌─────────────────────────────────────────────────────────────┐
│ id: 1 │
│ task_name: "Database Optimization" │
│ assigned_to: "Alice" │
│ start_time: "2024-01-15T09:00:00" ← Used for X-axis start│
│ end_time: "2024-01-15T11:30:00" ← Used for X-axis end │
│ status: "Completed" │
└─────────────────────────────────────────────────────────────┘
1. Create Task
├── Add task in Task Screen
├── Assign to team member
2. Start Task
├── Click "Start" button
└── start_time recorded
3. Work on Task
├── Perform task activities
└── Time is actively tracked
4. Stop Task
├── Click "Stop" button
└── end_time recorded
5. Generate Gantt
├── Navigate to Gantt tab
├── Click "Generate Gantt"
└── View timeline visualization
┌──────────────────────────────────────────────────────────────────────────┐
│ GANTT — Task Timeline │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ [1] Fix critical bug │████████████████████████████████│ │
│ [2] Code review │████████████████████│ │
│ [3] Write unit tests │████████████████████████████│ │
│ [4] Database optim... │████████████████████████████████████│ │
│ [5] Update document... │███████████████│ │
│ [6] Refactor legacy... │████████████████████████████████████████│ │
│ [7] Deploy to staging │████████████████│ │
│ [8] Client meeting │████████████│ │
│ │
│ Jan 10 Jan 12 Jan 14 Jan 16 Jan 18 │
│ │
└──────────────────────────────────────────────────────────────────────────┘
Legend: Each color represents a different person (Resource)
| Element | Meaning |
|---|---|
| Y-Axis | Task names (with ID numbers) |
| Bar Start | Task start time |
| Bar End | Task end time |
| Bar Length | Task duration |
| Bar Color | Assigned person (resource) |
| Reversed Y-Axis | First task at top |
[Task_ID] Task_Name
Example:
[1] Fix critical bug
[3] Write unit tests
This format helps you cross-reference with the Task Screen.
- Go to Tasks tab
- Click "Add Task"
- Fill in details:
- Task Name: "Design Review"
- Description: "Review new product design"
- Assigned To: "Alice"
- Standard Time: 3600 (1 hour)
- Click OK
- Select the task from the list
- Click "Start" button
- Status changes to "Running"
- Timer begins
- Work on the task
- Click "Stop" button
- Task status changes to "Completed"
- Time is recorded
- Navigate to Gantt tab
- Click "Generate Gantt"
- View the timeline visualization
Task Creation Order:
┌────────────────────────────────────────────────────────────┐
│ │
│ Task 1: Created Jan 10, Completed Jan 12 │
│ Task 2: Created Jan 11, Completed Jan 13 │
│ Task 3: Created Jan 12, Completed Jan 15 │
│ │
│ Note: Tasks can overlap - Gantt shows parallel work │
│ │
└────────────────────────────────────────────────────────────┘
- Long bars: Long-duration tasks
- Short bars: Quick tasks
- Compare: Actual vs. standard time
Good: Bad:
Task 1: ████████████ Task 1: ████████████
Task 2: ████████████ Task 2: ████████████
(overlapping = (gap = inefficient
efficient resource resource usage)
usage)
- Same color bars: Same person
- Scattered: Even workload
- Clustered: Uneven workload
- Sequential: Tasks one after another
- Parallel: Tasks happening together
- Critical Path: Longest chain of dependent tasks
| Pattern | Description | Implication |
|---|---|---|
| Even flow | Tasks distributed evenly | Good resource planning |
| Bottleneck | One resource has many sequential tasks | Need more resources |
| Idle time | Gaps in timeline | Resource underutilization |
| Overload | Overlapping tasks for one person | Potential burnout |
In TTT Tracker, tasks are colored by the person they're assigned to:
Color Legend (Example):
┌─────────────────────────────────────────┐
│ Alice → Blue bars │
│ Bob → Green bars │
│ Charlie → Orange bars │
└─────────────────────────────────────────┘
This helps identify:
- Who is working on what
- Workload distribution
- Resource conflicts
The X-axis automatically adjusts based on task dates:
- Day view: For short projects
- Week view: For medium projects
- Month view: For long projects
When the chart opens in browser:
- Hover: See exact start/end times
- Zoom: Focus on specific time ranges
- Pan: Move left/right in timeline
- Download: Save as PNG/PDF
| Do | Don't |
|---|---|
| Start tasks when beginning | Start tasks before work begins |
| Stop when done | Leave tasks running overnight |
| Record accurately | Estimate times manually |
Good: Bad:
"Fix login bug" "Bug fix"
"Update API documentation" "Doc update"
"Install new server" "Server work"
- Assign to actual responsible person
- Update if assignments change
- Use consistent naming
- Check Gantt weekly
- Look for inefficiencies
- Adjust schedules as needed
# Simplified from gantt_screen.py
def generate(self):
# 1. Get all tasks
tasks = self.db.get_all_tasks()
# 2. Filter tasks with start_time
rows = []
for t in tasks:
if t[4]: # start_time exists
# 3. Parse dates
start = datetime.fromisoformat(t[4])
end = datetime.fromisoformat(t[5]) if t[5] else datetime.now()
# 4. Create row data
rows.append({
"Task": f"[{t[0]}] {t[1]}", # "Task ID] Task Name"
"Start": start,
"Finish": end,
"Resource": t[3] or "" # assigned_to
})
# 5. Create Plotly timeline
fig = px.timeline(
rows,
x_start="Start",
x_end="Finish",
y="Task",
color="Resource"
)
# 6. Reverse Y-axis (first task at top)
fig.update_yaxes(autorange="reversed")SELECT
id,
task_name,
assigned_to,
start_time,
end_time
FROM tasks
WHERE start_time IS NOT NULL
ORDER BY start_time;# Timeline chart
fig = px.timeline(
df,
x_start="Start",
x_end="Finish",
y="Task",
color="Resource"
)
# Reverse so first task is at top
fig.update_yaxes(autorange="reversed")
# Additional styling
fig.update_layout(
title="Gantt — Task Timeline",
xaxis_title="Date/Time",
yaxis_title="Task"
)| Limitation | Description |
|---|---|
| No dependencies | Can't show task relationships |
| No milestones | Can't mark key dates |
| No editing | Can't modify schedule from chart |
| Basic resources | Only color by assignee |
| Running tasks | Shows current time for incomplete |
| Feature | TTT Tracker | MS Project |
|---|---|---|
| Basic timeline | ✅ | ✅ |
| Task dependencies | ❌ | ✅ |
| Milestones | ❌ | ✅ |
| Resource leveling | ❌ | ✅ |
| Critical path | ❌ | ✅ |
| Cost tracking | ❌ | ✅ |
Scenario: Review what was accomplished today
Steps:
- Create and complete tasks during the day
- Open Gantt chart
- See all tasks with their time blocks
- Identify time spent per task
Scenario: Check if work is balanced
Steps:
- Generate Gantt chart
- Observe color distribution
- Identify overloaded team members
- Redistribute tasks
Scenario: Show project progress to stakeholders
Steps:
- Generate Gantt chart
- Take screenshot
- Include in status report
- Highlight completed vs remaining
Scenario: Understand where time goes
Steps:
- Track all work for a week
- Generate Gantt chart
- Analyze patterns
- Identify time wastage
Problem: Gantt chart is empty
Solutions:
- Complete some tasks first (need start_time and end_time)
- Click "Start" then "Stop" on tasks
- Verify tasks have valid timestamps
Problem: Dates look wrong
Solutions:
- Check system clock is correct
- Verify start_time and end_time are recorded
- Database stores times in ISO format
Problem: Tasks appear in wrong order
Solution: This is normal - overlapping tasks can occur in any order. The chart shows parallel execution.
Problem: All bars are same color
Solution: Assign different people to tasks in Task Screen.
Gantt Chart = Horizontal Bar Chart
X-Axis = Time (When)
Y-Axis = Tasks (What)
Bar Length = Duration
Bar Position = Start/End Time
Bar Color = Resource/Person
- Left edge = Task started
- Right edge = Task ended
- Bar length = How long
- Color = Who did it
| Action | How |
|---|---|
| Generate chart | Click "Generate Gantt" button |
| Refresh | Click button again |
| See details | Hover over bars |
| Zoom | Use mouse wheel in browser |
- Gantt: Shows WHEN tasks happened
- Pareto: Shows WHICH tasks took longest
- Together: Complete time analysis
- Gantt: Shows task execution
- OEE: Shows equipment performance
- Together: Correlate tasks with equipment
- Compare Gantt duration with standard time
- Identify efficiency gaps visually
Gantt Charts are essential for:
- Visualizing task schedules
- Understanding project timelines
- Analyzing resource allocation
- Identifying bottlenecks
- Reporting progress to stakeholders
The Gantt feature in TTT Tracker provides a simple yet effective way to visualize your task timelines and understand how time is distributed across your projects.
For more information, see:
- README.md - Main application documentation
- PARETO_README.md - Pareto Analysis
- OEE_README.md - Equipment effectiveness
This document is part of the TTT Tracker application documentation.