Showing dependency lines in ScheduleChartView (JavaScript)

Did you know? Not only GanttChartView (from DlhSoft Gantt Chart Hyper Library for JavaScript) is able to show dependency lines between task bars. ScheduleChartView can do that, too, even between bars on the same resource row!

ScheduleChartView in action, in our Demos app

How do you enable this behavior? Actually, it’s quite simple. First, let’s assume you defined the items for the component — including collections of ganttChartItems for each of them — like this:

var date = new Date(), year = date.getFullYear(), month = date.getMonth();
var scheduleChartItems = [{ content: 'Resource 1', ganttChartItems: [{ content: 'Task A (Resource 1)', label: 'Task A',  start: new Date(year, month, 2, 8, 0, 0), finish: new Date(year, month, 8, 16, 0, 0), completedFinish: new Date(year, month, 5, 16, 0, 0) }] },
                          { content: 'Resource 2', ganttChartItems: [{ content: 'Task A (Resource 2)', label: 'Task A',  start: new Date(year, month, 2, 8, 0, 0), finish: new Date(year, month, 8, 16, 0, 0), completedFinish: new Date(year, month, 5, 16, 0, 0), assignmentsContent: '50%' },
                                                                     { content: 'Task B (Resource 2)', label: 'Task B',  start: new Date(year, month, 11, 8, 0, 0), finish: new Date(year, month, 12, 16, 0, 0), completedFinish: new Date(year, month, 12, 16, 0, 0) },
                                                                     { content: 'Task C (Resource 2)', label: 'Task C',  start: new Date(year, month, 14, 8, 0, 0), finish: new Date(year, month, 14, 16, 0, 0) }] },
                          { content: 'Resource 3', ganttChartItems: [{ content: 'Task D (Resource 3)', label: 'Task D',  start: new Date(year, month, 12, 12, 0, 0), finish: new Date(year, month, 14, 16, 0, 0) }] }];
for (var i = 4; i <= 16; i++)
    scheduleChartItems.push({
        content: 'Resource ' + i, ganttChartItems: [{ content: 'Task X (Resource ' + i + ')', label: 'Task 1.' + (i-3), start: new Date(year, month, 2, 8, 0, 0), finish: new Date(year, month, 5, 16, 0, 0) },
                                                    { content: 'Task Y (Resource ' + i + ')', label: 'Task 2.' + (i-3),  start: new Date(year, month, 7, 8, 0, 0), finish: new Date(year, month, 8, 16, 0, 0) }]
    });

Now, to add dependencies between Gantt chart item, simply define predecessors collections at their level:

scheduleChartItems[3].ganttChartItems[0].predecessors = [{ item: scheduleChartItems[0].ganttChartItems[0], dependencyType: 'SS' }];
scheduleChartItems[1].ganttChartItems[1].predecessors = [{ item: scheduleChartItems[1].ganttChartItems[0] }];
scheduleChartItems[2].ganttChartItems[0].predecessors = [{ item: scheduleChartItems[1].ganttChartItems[1] }];
scheduleChartItems[3].ganttChartItems[1].predecessors = [{ item: scheduleChartItems[3].ganttChartItems[0] }];

Each predecessor item is defined by an item reference — indicating another Gantt chart item (from the same or a different Schedule chart row), and optionally a dependencyType string that can be: FS (finish-to-start, the default value), SS (start-to-start), FF (finish-to-finish), or SF (start-to-finish), of course.

However, you need to also set up the ScheduleChartView component to display the dependencies as by default it doesn’t do that (like GanttChartView does):

settings.areTaskDependenciesVisible = true;

Finally, initialize the component providing the items and settings you’ve defined, and that’s all!

DlhSoft.Controls.ScheduleChartView.initialize(scheduleChartView, scheduleChartItems, settings);

Note that these item fields and settings would work in all environments, either JavaScript or TypeScript based. Specifically, Angular, React, and Vue.js would all support them (each in their own wrapper/way) since the features needed are provided by the core JavaScript component, of course.

Enjoy!