Gantt Chart Timeline Viewer

What Is the Gantt Chart Timeline Viewer?

The Timeline/Gantt Chart View is a visual project management interface that displays your tasks as horizontal bars across a calendar timeline, showing start dates, due dates, and task dependencies. This powerful view transforms your task data into a clear project timeline that reveals scheduling conflicts, project phases, and task relationships at a glance.

Designed for project managers, team leads, and anyone managing complex workflows, the Timeline view helps you understand project flow, identify bottlenecks, and optimize task scheduling through direct visual manipulation.

Why Use the Timeline/Gantt Chart View?

  • Visual Project Planning: See your entire project timeline in one comprehensive view with clear start and end dates
  • Drag-and-Drop Date Editing: Adjust task dates by simply dragging task bars to new positions on the timeline
  • Hierarchy Visualization: Parent tasks and subtasks are clearly displayed with visual indentation and dependency arrows
  • Permission-Aware Interactions: Only tasks users have permission to can edit are draggable
  • Real-Time Updates: Date changes are immediately saved and reflected across all views
  • Filter Integration: Use the same category and tag filters as your Kanban board to focus on specific project aspects
  • Filter Persistence: Your last filters are saved so when you come back to the timeline, you can get back to work!

The Timeline view saves hours of manual date coordination by making project scheduling visual and interactive, turning complex date management into simple drag-and-drop operations.

How to Access the Timeline View

Prerequisites

Before accessing the Timeline view, ensure it’s enabled in your WordPress admin:

  1. Navigate to Orbital > Settings
  2. In the General Settings tab, enable both:
    • “Enable Kanban Board”
    • “Enable Timeline View (Gantt Chart)”
  3. Save your settings

Switching to Timeline View

  1. Go to your Kanban Board page (Orbital > Kanban)
  2. Look for the view toggle buttons at the top of the page
  3. Click Timeline View to switch from the default Board View
  4. The interface will transition to show your Gantt chart

The Timeline view shares the same URL as your Kanban board but displays completely different interface optimized for date-based project visualization.

Understanding the Timeline Interface

Main Timeline Display

The Timeline view presents your tasks as horizontal bars arranged chronologically:

  • Parent Tasks: Displayed as solid blue bars representing main project phases
  • Subtasks: Shown as lighter blue bars with visual indentation and arrow connections to their parents
  • Priority Colors: High priority tasks appear in red, normal priority in blue, low priority in green
  • Time Scale: Week view by default, showing clear date ranges and milestones

Task Information Display

Each task bar shows essential information:

  • Task Title: Displayed directly on or next to the task bar
    • Clicking the task title opens the off canvas element to see more information about the task
  • Duration: Visual length represents the span from start date to due date
  • Dependencies: Dashed arrows connect parent tasks to their subtasks
  • Status Indicators: Color coding reflects task status (draft, published, etc.)

Note: Subtasks are optional. You can manage your projects by creating parent tasks only. How you manage the data is up to your own internal standard operating procedures.

Missing Dates Alert System

Tasks without complete date information cannot appear in the timeline:

  • Alert Message: Clear notification showing how many tasks are missing dates
  • Quick Access: Direct link to the Missing Dates report for easy resolution
  • Filter Impact: Information about how active filters may affect visible tasks

Note: clicking on the alert will take you to the reports screen. If the user role does not have permission to access reports, they will be denied access.

Editing Task Dates in the Timeline

Direct Date Manipulation

The Timeline’s most powerful feature is drag-and-drop date editing:

  1. Click and Drag: Click on any editable task bar and drag it to a new date position
  2. Visual Feedback: The task bar follows your cursor, showing the new date range
  3. Automatic Saving: Release the mouse to save the new dates immediately
  4. Error Prevention: Invalid date ranges (start after due date) are automatically prevented

Permission-Based Editing

Task editing availability depends on your permissions:

  • Editable Tasks: Display with standard blue coloring and respond to drag operations
  • Read-Only Tasks: Show with muted colors and ignore drag attempts
  • Permission Feedback: Tasks you cannot edit display lock icons and provide hover tooltips explaining restrictions

Moving Task Groups

When you move a parent task, the Timeline intelligently handles dependencies:

  • Parent Task Moves: Dragging a parent task moves only that task, preserving subtask scheduling
  • Individual Control: Each task (parent or subtask) can be moved independently
  • Dependency Preservation: Visual arrows update automatically to reflect new relationships
  • Conflict Prevention: The system prevents creating invalid date relationships

Date Validation

The Timeline enforces logical date relationships:

  • Start Before Due: Start dates cannot be set after due dates
  • Immediate Feedback: Invalid moves are prevented during dragging
  • Error Messages: Clear notifications explain why certain moves aren’t allowed
  • Automatic Correction: The system suggests valid alternative dates when possible

Using the Detailed Task Panel

Opening Task Details

Access comprehensive task information without leaving the Timeline:

  1. Click Task Labels: Click on any task title text to open the details panel
  2. Keyboard Navigation: Use Tab to focus on task labels, then Enter to open details
  3. Offcanvas Panel: Details appear in a sliding panel from the right side

Here is the off canvas view with details about the project:

Available Information

The details panel provides complete task context:

  • Basic Information: Title, description, author, and current status
  • Date Details: Exact start and due dates with formatted display
  • Custom Fields: All additional task metadata including priority and approval status
  • Categories and Tags: Complete taxonomy information
  • Subtask Status: Summary of subtask completion if applicable
  • Action Links: Direct links to edit the task in full editor (if permitted)

Panel Navigation

The details panel offers intuitive navigation:

  • Close Options: Click the X button, press Escape, or click outside the panel
  • Accessibility: Full keyboard navigation support for all interactive elements
  • Quick Actions: Access editing and viewing links directly from the panel

Timeline Controls and Filtering

View Mode Controls

The Timeline inherits filtering capabilities from the Kanban board:

  • Category Filters: Select specific task categories to focus on project phases
  • Tag Filters: Choose tags to view department-specific or priority-based timelines
  • Filter Persistence: Your selections are saved and restored across sessions
  • Real-Time Updates: Gantt chart immediately updates as you change filter selections

Timeline-Specific Features

Additional controls optimize the Timeline experience:

  • Hide Uncategorized: Option to hide tasks without category assignments
  • View Mode Switcher: Toggle between different Gantt chart time scales
  • Filter Status: Clear indication of active filters with one-click clearing
  • Missing Dates Integration: Seamless connection to date completion workflows

Screenshot: Filter controls showing category and tag dropdowns with active selections

Advanced Filtering

The Timeline supports sophisticated filtering options:

  • Multiple Selections: Choose multiple categories or tags simultaneously
  • Search Within Filters: Quickly find specific categories or tags
  • Filter Inheritance: Subtasks can inherit parent filter status based on settings
  • Cross-View Consistency: Filters applied in Timeline view affect Kanban view and vice versa

Timeline Management Best Practices

Effective Date Planning

Maximize your Timeline view effectiveness:

  • Complete Date Information: Ensure all important tasks have both start and due dates
  • Realistic Scheduling: Allow adequate time between dependent tasks
  • Regular Reviews: Use the Timeline to regularly assess project progress and adjust dates
  • Filter Strategically: Use category and tag filters to focus on specific project aspects

Working with Task Hierarchies

Optimize your use of parent-child task relationships:

  • Logical Grouping: Create parent tasks for major project phases with subtasks for specific actions
  • Consistent Dating: Ensure parent task dates encompass all subtask dates
  • Visual Clarity: Use the Timeline’s hierarchy visualization to understand project structure
  • Dependency Management: Leverage visual arrows to verify task relationships

Managing Large Projects

Handle complex timelines effectively:

  • Strategic Filtering: Use filters to focus on specific project areas or time periods
  • Regular Updates: Keep task dates current to maintain timeline accuracy
  • Permission Awareness: Understand which tasks you can modify versus those that are read-only
  • Browser Performance: Consider using filters for projects with hundreds of tasks

Permission Requirements

Reading Timeline Data

To view tasks in the Timeline:

  • read_own_tasks – See your own tasks in the timeline
  • read_all_tasks – View all tasks in timeline format
  • Basic kanban board access through role-based settings

Editing Task Dates

To drag and modify task dates:

  • edit_own_tasks or edit_all_tasks – Basic task editing permissions
  • Individual task-specific edit permissions (if using permission overrides)
  • Tasks must not be marked as closed or in restricted states

Accessing Task Details

To open the detailed information panel:

  • Same permissions as timeline viewing
  • Additional detail access may require specific field-level permissions
  • Edit links in details panel respect full editing permission structure

Keyboard Navigation and Accessibility

Timeline Navigation

The Timeline supports full keyboard accessibility:

  • Tab Navigation: Use Tab to move between interactive elements
  • Task Selection: Tab to focus on task labels, use Enter to open details
  • Panel Navigation: Full keyboard support within the task details panel
  • Filter Controls: All filtering options accessible via keyboard

Screen Reader Support

The Timeline provides comprehensive screen reader compatibility:

  • Semantic Structure: Proper heading hierarchy and landmark roles
  • Alternative Text: Descriptive text for visual elements
  • Status Announcements: Screen readers announce filter changes and updates
  • Focus Management: Logical focus flow throughout the interface

Screenshot: Timeline with focus indicators showing keyboard navigation states

Troubleshooting Common Issues

Tasks Not Appearing in Timeline

If expected tasks don’t appear:

  1. Check Date Completion: Tasks need both start and due dates
  2. Review Active Filters: Ensure your filters include the tasks’ categories or tags
  3. Verify Permissions: Confirm you have read access to the missing tasks
  4. Check Task Status: Closed or trashed tasks may not appear depending on settings

Drag-and-Drop Not Working

If you cannot move tasks:

  1. Check Edit Permissions: Ensure you have edit rights for the specific task
  2. Browser Compatibility: Verify your browser supports modern drag-and-drop
  3. JavaScript Errors: Check browser console for any JavaScript errors
  4. Task State: Closed or restricted tasks cannot be modified

Timeline Performance Issues

For large project timelines:

  1. Use Filters: Apply category or tag filters to reduce displayed tasks
  2. Browser Resources: Close other browser tabs to free memory
  3. Date Ranges: Focus on specific time periods when possible
  4. Regular Maintenance: Keep task data current and remove outdated items

The Timeline/Gantt Chart view transforms your task management from static lists into dynamic, visual project planning. By combining intuitive drag-and-drop editing with comprehensive task information and intelligent filtering, it provides a powerful interface for managing project schedules and dependencies while maintaining full integration with your existing task management workflows.