Skip to main content

7. Timeline Chart (Gantt)

7.1 Gantt Visualization​

Purpose: Visualize project phases and milestones over time.

Timeline Chart Structure Diagram​

Key Features:

  • Phase bars - Color-coded progress visualization (green=complete, blue=active, gray=pending)
  • Milestones - Diamond markers (◆) for key deliverables
  • Today indicator - Vertical line showing current date position
  • Zoom controls - Switch between Day/Week/Month views
  • Interactive - Click bars to see phase details, hover for tooltips

Visual Legend:

  • █ Complete (green) - 100% done
  • █ In Progress (blue) - Active work
  • ░ Not Started (gray) - Future work
  • ◆ Milestone - Key deliverable/checkpoint
  • │ Today - Current date indicator

Full Specification:

┌─────────────────────────────────────────────────────────────────────────────┐
│  Timeline Chart                                            [Today: Dec 1]    │
│  Zoom: [Day] [Week ✓] [Month]  |  Filter: [All Projects ▼]                 │
├─────────────────────────────────────────────────────────────────────────────┤
│              │Nov 15│Nov 22│Nov 29│Dec 6 │Dec 13│Dec 20│Dec 27│Jan 3│Jan 10│
│              │      │      │  ↓   │      │      │      │      │     │      │
│              │      │      │TODAY │      │      │      │      │     │      │
├──────────────┴──────┴──────┴──────┴──────┴──────┴──────┴──────┴─────┴──────┤
│ Phase 0      █████████████ ✅ COMPLETE                                      │
│ Foundation   Nov 1 ────── Nov 16                                            │
│              350 tasks • 100% complete                                       │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 1           ████████████████████████░░░░░░░░░░ 78%                   │
│ Beta Testing      Nov 18 ────────────────────────── Feb 15                  │
│                   530 tasks • 415 complete • 115 in progress                 │
│                        ◆ Beta Analysis (Dec 10)                             │
├──────────────────────────────────────────────────────────────────────────────┤
│ Dashboard 2.0           ████████░░░░░░░░░░░░░░░░░░░░ 0%                    │
│                         Dec 2 ───────────── Jan 31                          │
│                         80 tasks • 0 complete • 0 in progress                │
│                              ◆ Quick Wins (Dec 6)                           │
│                                   ◆ Sprint 1 (Dec 20)                       │
│                                        ◆ Sprint 2 (Jan 17)                  │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 2                                     ████████████░░░░░░ 0%           │
│ Pilot                                       Feb 15 ───── Mar 15             │
│                                             120 tasks • 0 complete            │
│                                                  ◆ Pilot Launch (Feb 15)    │
├──────────────────────────────────────────────────────────────────────────────┤
│ Phase 3                                                    ████████░░ 0%    │
│ GTM                                                        Mar 15 ─ May 15  │
│                                                            90 tasks          │
│                                                                 ◆ Public GTM │
└──────────────────────────────────────────────────────────────────────────────┘

Legend:  █ Complete  ░ Remaining  ◆ Milestone  │ Today

7.2 Implementation Prompt - Timeline Chart​

Prompt for AI/Developer:

Create a Gantt-style timeline chart showing project phases and milestones over time.

LAYOUT:
- Container: Full width, responsive
- Header: Zoom controls + date range display + filters
- Time axis: Horizontal, shows date labels based on zoom level
- Rows: 1 row per phase/project, stacked vertically
- Today indicator: Vertical line showing current date

TIME AXIS:
Zoom Levels:
- Day: Show each day as column (e.g., "Mon 1", "Tue 2")
- Week: Show each week as column (e.g., "Nov 15", "Nov 22")
- Month: Show each month as column (e.g., "Nov", "Dec", "Jan")

Default: Week zoom

Time Scale:
- Calculate: Auto-fit date range from earliest start to latest end
- Padding: Add 1 week before/after for context
- Grid lines: Vertical lines for each time unit (light gray, 1px)

HTML Structure:
<div class="timeline-chart">
  <div class="timeline-header">
    <div class="zoom-controls">
      <button data-zoom="day">Day</button>
      <button data-zoom="week" class="active">Week</button>
      <button data-zoom="month">Month</button>
    </div>
    <div class="date-range">Nov 1, 2025 - May 15, 2026</div>
    <select class="project-filter">
      <option value="all">All Projects</option>
      <option value="core">Core</option>
      <option value="cloud">Cloud</option>
    </select>
  </div>

  <div class="timeline-axis">
    <div class="axis-label" style="left: 0%">Nov 15</div>
    <div class="axis-label" style="left: 7%">Nov 22</div>
    <!-- More labels -->
  </div>

  <div class="timeline-rows">
    <div class="timeline-row" data-phase="phase-0">
      <div class="row-label">
        <div class="phase-name">Phase 0</div>
        <div class="phase-subtitle">Foundation</div>
        <div class="phase-stats">350 tasks • 100%</div>
      </div>
      <div class="row-bar-container">
        <div class="row-bar complete" style="left: 0%; width: 10%;">
          <div class="bar-fill"></div>
          <div class="bar-label">✅ COMPLETE</div>
        </div>
        <div class="date-label start">Nov 1</div>
        <div class="date-label end">Nov 16</div>
      </div>
    </div>
    <!-- More rows -->
  </div>

  <div class="today-indicator" style="left: 20%">
    <div class="today-line"></div>
    <div class="today-label">TODAY</div>
  </div>
</div>

CSS:
.timeline-chart {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 24px;
  overflow-x: auto;
}

.timeline-axis {
  position: relative;
  height: 40px;
  border-bottom: 2px solid var(--gray-900);
  margin-bottom: 16px;
}

.axis-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}

.timeline-rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
}

.row-label {
  width: 150px;
  flex-shrink: 0;
}

.phase-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

.phase-subtitle {
  font-size: 14px;
  color: var(--gray-700);
}

.phase-stats {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

.row-bar-container {
  position: relative;
  flex: 1;
  height: 60px;
}

.row-bar {
  position: absolute;
  height: 40px;
  background: var(--gray-300);
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.row-bar:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.row-bar.complete {
  background: linear-gradient(90deg, #00A651, #00D668);
}

.row-bar.in-progress {
  background: linear-gradient(90deg, #0066CC, #3399FF);
}

.row-bar.not-started {
  background: var(--gray-300);
}

.bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.2), transparent);
  border-radius: 4px 0 0 4px;
}

.bar-label {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 1;
}

.date-label {
  position: absolute;
  font-size: 11px;
  color: var(--gray-700);
}

.date-label.start {
  top: -20px;
  left: 0;
}

.date-label.end {
  top: -20px;
  right: 0;
}

.today-indicator {
  position: absolute;
  top: 80px;
  bottom: 0;
  width: 2px;
  z-index: 10;
  pointer-events: none;
}

.today-line {
  width: 2px;
  height: 100%;
  background: var(--primary-blue);
}

.today-label {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-blue);
  color: var(--white);
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

CALCULATIONS:
Calculate Bar Position:
- Total days: end_date - start_date of entire timeline
- Phase start offset: (phase_start - timeline_start) / total_days * 100%
- Phase width: (phase_end - phase_start) / total_days * 100%

Calculate Today Position:
- today_offset: (today - timeline_start) / total_days * 100%

Calculate Completion Fill:
- fill_width: (complete_count / total_count) * bar_width

MILESTONES:
Display milestones as diamond markers (◆) below phase bars
- Position: Calculate percentage along timeline
- Label: Milestone name + date
- Click: Show milestone details in popover

HTML for Milestone:
<div class="milestone" style="left: 15%">
  <span class="milestone-marker">◆</span>
  <span class="milestone-label">Beta Analysis (Dec 10)</span>
</div>

CSS:
.milestone {
  position: absolute;
  top: 50px;
  transform: translateX(-50%);
}

.milestone-marker {
  font-size: 20px;
  color: var(--primary-blue);
}

.milestone-label {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--gray-700);
  white-space: nowrap;
  background: var(--white);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--gray-300);
}

INTERACTIONS:
Click Phase Bar:
- Show phase detail modal with:
  - Phase name, dates, duration
  - Task breakdown (total, complete, in progress, pending)
  - Progress chart (pie or bar)
  - Key deliverables
  - Assigned team members
  - [View Tasks] button → Navigate to task list filtered by phase

Hover Phase Bar:
- Show tooltip with quick stats
- Highlight connected milestones

Drag Phase Bar (Advanced):
- Drag to reschedule phase
- Validate: Can't move before dependencies complete
- Update: Save new dates to database, recalculate dependent phases

ZOOM BEHAVIOR:
- Click zoom button: Recalculate time scale, re-render axis and bars
- Smooth animation: 300ms ease transition for bar positions
- Persist: Save zoom level in localStorage

RESPONSIVE:
Desktop (≥1024px): Full timeline, horizontal scroll if needed
Tablet (768px-1023px): Reduce label widths, smaller fonts
Mobile (<768px): Vertical timeline (bars stack vertically, dates on left)

DATA SOURCE:
- Fetch from data/projects-with-milestones.json
- Calculate dates, durations, completion percentages
- Sort phases by start_date (ascending)

ACCESSIBILITY:
- Keyboard: Tab through phases, Enter to open detail modal
- ARIA: aria-label for bars ("Phase 0: 100% complete, Nov 1 to Nov 16")
- Focus: Visible outline on focused bars
- Screen reader: Announce phase progress on focus