01. xGantt

<— Reactor Home

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: JavaScript Gantt Chart Library - DHTMLX Gantt

(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

Parameters

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 } )

Example

xGantt ( 

  Get ( CurrentDate ) - 3 ; 

  Get ( CurrentDate ) + 3 ; 

  "bb_data_schedules::id" ; 

  "bb_data_schedules::description" ; 

  "bb_data_schedules::bar_color" ; 

  "bb_data_schedules::tstamp_start" ; 

  "bb_data_schedules::tstamp_end" ; 

  "bb_data_schedules::sort" ; 

  "bb_data_schedules::progress" ; 

  "bb_data_schedules::id_parent" ; 

  "bb_data_links::id" ; 

  "bb_data_links::id_source" ; 

  "bb_data_links::id_target" ; 

  "gantt.config.readonly = false;" 

) 

The chart_options_js parameter can be used to apply additional settings to the chart. In our example above we are setting the chart to be read-only. The full set of chart properties is available here:

https://docs.dhtmlx.com/gantt/api__refs__gantt_props.html

You can set multiple properties by separating them with a semicolon. For example:

"gantt.config.scale_unit = 'hour';

gantt.config.step = 1;

gantt.config.date_scale = '%M-%d %g%a';

gantt.config.min_column_width = 80;

gantt.config.duration_unit = 'minute';

gantt.config.duration_step = 30;

gantt.config.scale_height = 50;"

This changes the scale of the X-axis, it breaks it up into 1-hour increments, rather than into days - which is the default. It also allows you to increment duration by 30min intervals when editing the task.

With a bit of tweaking you’ll be able to get the calendar scale however you want.

Relationship

The task records included in the calendar will be constrained by the relationship to the table occurrence of your parameter fields. Multi-line keys can be used, but only on the left-hand side of the relationship. In other words, you can use multi-line keys only if they’re on the table that your current context is based on.

Polling

Reactor can poll for any new, deleted or updated records at a regular interval, say every few seconds. This means changes in the FileMaker data will be reflected on the chart in near real-time. 

To enable polling, your task table must have a a zModID field, with an auto-enter set to the Modication Timestamp 

Style Customisations

You can customise the CSS of the chart by using Reactor Core to edit the following CSS document:

You will need to recompile the BlackBox to apply any changes you make.

<— Reactor Home