Plugins
Templates
Blocks
Template Setup Guides

Gantt Charts with Task List Plugin

Link to plugin page: https://zeroqode.com/plugin/gantt-charts-1550402632051x469430921470935040

Getting started

  1. Install the plugin in your project.

  2. Pick “Gantt Chart” element from toolbar and drag it onto the page.

Open the element's properties and fill in required fields with data. Type from DB. Required. Source of first field Type. Required. Task ID. Field of Task. Required. Task Label. Field of Task. Required. Task Start Date. Field of Task. Required. Task Duration. Field of Task. Required. Task Progress. Field of Task. Required. Task Type. Field of Task. Required. Task Collapsed. Field of Task.Optional. Task User. Field of Task. Optional. Task Parent. Field of Task. Optional. Task Depend On. Field of Task. Optional. Colors for Project, Milestone and Task types. Initialize Gantt Chart with visible/invisible tasklist

Best practice is to create a separate type for tasks in Bubble DB, for ex. “Task”.

The type should have required fields:

  1. (REQUIRED) ID, it can be custom id, or bubble unique id, type ‘text’.

  2. (REQUIRED) Label, type ‘text’.

  3. (REQUIRED) Start Date, type ‘bubble date’.

  4. (REQUIRED) Duration, type ‘number’ it should be indicated as seconds. 86400 seconds represents a full 24h day.

  5. (REQUIRED) Progress, type ‘number’ it should be an number between 0-100, (representation of progress in percents).

  6. (REQUIRED) Type, type ‘text’, it can be ‘task’, ‘project’ or ‘milestone’.

  7. (OPTIONAL) Collapsed, type ‘yes/no’, it will show task expanded or collapsed.

  8. (OPTIONAL) User, type ‘text’. This field can be written in DB like a simple name ‘John Doe’ ro it can be written like html link, ex: ‘<a href=”url_here”>John Doe</a>’.

  9. (OPTIONAL) Parent, type ‘text’. This field should be another task id.

  10. (OPTIONAL) Dependent, type ‘list of text’. This should be a list of dependent task id.

All the properties marked with REQUIRED are important for rendering in gantt chart. If a REQUIRED field is ignored the task will be ignored by gantt chart. The simplest way to get gantt chart working is to prepare your data according our documentation.

An example of data from Bubble Task type:

An example of Task type in Bubble:

Design customization

  1. Project Color - color for tasks that are marked like ‘project’.

  2. Milestone Color - color for tasks that are marked like ‘milestone’.

  3. Task Color - color for tasks that are marked like ‘task’. All three options are optional. By default project color is #F95C4C, milestone color is #0287D0 and task color is #8E44AD.

  4. Show Task List - will render a gantt chart with attached tasklist or not.

Workflows

  1. Scale X - will zoom the chart on X axis, minimum value 2, maximum value 24.

  2. Scale Y - will zoom the chart on Y axis, minimum value 7, maximum value 100.

  3. Center Chart - will center the chart on current date/time.

Demo to preview the settings