Demo to preview the settings
Getting started
- Install the plugin in your project.
- Pick the “Gantt Chart” element from the toolbar and drag it onto the page.
Open the element's properties and fill in the 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.
- (checkbox) Initialize Gantt Chart with visible/invisible tasklist
Tip: A best practice is to create a separate type for tasks in Bubble DB, for example, “Task”.
The type should have the required fields:
- (REQUIRED) ID, can be a custom id, or bubble unique id, type ‘text’.
- (REQUIRED) Label, type ‘text’.
- (REQUIRED) Start Date, type ‘bubble date’.
- (REQUIRED) Duration, type ‘number’ it should be indicated as seconds. 86400 seconds represents a full 24h day.
- (REQUIRED) Progress, type ‘number’ it should be a number between 0-100, (representation of progress in percentages).
- (REQUIRED) Type, type ‘text’, it can be ‘task’, ‘project’, or ‘milestone’.
- (OPTIONAL) Collapsed, type ‘yes/no’, it will show the task expanded or collapsed.
- (OPTIONAL) User, type ‘text’. This field can be written in DB like a simple name ‘John Doe’ or it can be written like an HTML link, ex: ‘<a href=”url_here”>John Doe</a>’.
- (OPTIONAL) Parent, type ‘text’. This field should be another task id.
- (OPTIONAL) Dependent, type ‘list of text’. This should be a list of dependent task IDs.
Tip: All the properties marked with REQUIRED are important for rendering in the Gantt chart. If a REQUIRED field is ignored the task will be ignored by the Gantt chart. The simplest way to get the Gantt chart working is to prepare your data according to our documentation.
An example of data from Bubble Task type:
An example of Task type in Bubble:
Design Customization
- Project Color - color for tasks that are marked like ‘project’.
- Milestone Color - color for tasks that are marked like ‘milestone’.
- Task Color - color for tasks that are marked like ‘task’.
All three options are optional. By default project color is #F95C4C, the milestone color is #0287D0 and the task color is #8E44AD.
- Show Task List - will render a Gantt chart with the attached tasklist or not.
Workflows
- Scale X - will zoom the chart on X-axis, minimum value 2, maximum value 24.
- Scale Y - will zoom the chart on Y-axis, with a minimum value of 7, and a maximum value of 100.
- Center Chart - will center the chart on the current date/time.
Changelogs
Update 7.05.2022 - Version: 1.8.0
- fixed - problem with the progress bar
Update 27.10.22 - Version: 1.11.0
- minor fixes
Update 1.12.22 - Version: 1.12.0
- minor fixes
Update 9.12.22 - Version: 1.13.0
- style minor fixes
Update 27.01.23 - Version: 1.14.0
- fixed disclosure of nested tasks on the new responsive version