01. xGantt

The xGantt BlackBox is used to display an interactive Gantt chart, pulling in events from FileMaker data - and writing back when applicable. It utilises the dhtmlxGantt library: https://dhtmlx.com/docs/products/dhtmlxGantt/

(Please scroll down to the bottom of the above link to view licensing details)

Our BlackBox xGantt demo utilises the Free GNU GPL v2 license, which provides the following:
  • Group items together under a ‘parent’ item
  • The ability to move items, and add/edit/delete, using an interactive edit box
  • Represent dependencies between items by linking together a sequence

There is a Pro license available, that allows such things as multiple charts on a single page, the ability to export to PDF/PNG and integration with MS Project.

The following interactions are included:
  • Creating a task record by clicking the + button
  • Modifying a task record (including deletion) by double clicking onto any task, it opens a dialog where you can change the description, start date and duration (see below screenshot)
  • Scrolling left or right within the date range
  • Tasks can be dragged to change start date date
  • Tasks can be resized to change duration
  • You can create sequences between tasks by dragging from one to another
  • Remove a link between two tasks by double clicking it and clicking Delete
  • You can click the + next to any task along the left, which will create a new task with a dependency on it
  • You can slide an arrow across a task to set how far the task has progressed as a percentage


The parameters are as follows:

xGantt ( ChartStartDate ; ChartEndDate ; id_field ; description_field ; barcolour_field ; startts_field ; endts_field ; order_field ; progress_field ; parentid_field ; linksid_field ; linkssource_field ; linkstarget_field ; linkstype_field { ; chart_options_js } )
A FileMaker date that tells the chart where to start
Eg, Get ( CurrentDate )
A FileMaker date that tells the chart where to end
Eg, Get ( CurrentDate ) + 7;
A unique identifier used for each task record
Eg, "bb_data_schedules::id"
A field with some text content that will appear as the label for the task
Eg, "bb_data_schedules::description"
A field that determines the colour an task is given on the calendar, contents can be text (eg, Blue) or a hex-code (eg, #ff0000)
Eg, "bb_data_schedules::bar_color"
A field indicating the start date/time of a task record, can be a Date or Timestamp field
Eg, "bb_data_schedules::tstamp_start"
A field indicating the end date/time of an task record, can be a Date or Timestamp field
Eg, "bb_data_schedules::tstamp_end"
A field with a number that represents its order when tasks take place at the same time