Can we create tasks using a loop?

My code is becoming quite bloated as I use a lot of custom layers, it’s not best practice to have to individually declare each layer I want to add. I was wondering if it was possible to create the tasks on the Gantt using a loop from an object array? I have attempted to do this, but I can’t get it to work. There are no errors returned but the various layers don’t render. Can anyone offer some help on this?

//Gantt Initilisation and config
document.addEventListener("DOMContentLoaded", function (event) {

// specifying the date format
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.config.readonly = true;

// initializing gantt

// initiating data loading

// initializing dataProcessor
var dp = new gantt.dataProcessor("/api/");

gantt.attachEvent("onTaskLoading", function (task) {
    task.options_start =, "xml_date");
    task.options_end =, "xml_date");
    task.f2_onhire =, "xml_date");
    task.f2_offhire =, "xml_date");        
    task.f3_onhire =, "xml_date");
    task.f3_offhire =, "xml_date");     
    return true;
gantt.config.show_unscheduled = true;
gantt.config.task_height = 35;
gantt.config.row_height = 35;

//Fixture Layers
gantt.addTaskLayer(function draw_planned(task) {
    var fixtureArray = [
            onhire: task.start_date,
            offhire: task.end_date,
            charterer: task.current_charterer
            onhire: task.f2_onhire,
            offhire: task.f2_offhire,
            charterer: task.f2_charterer
            onhire: task.f3_onhire,
            offhire: task.f3_offhire,
            charterer: task.f3_charterer
    for (i = 0; i < fixtureArray.length; i++) {
        var sizes = gantt.getTaskPosition(fixtureArray, fixtureArray.onhire, fixtureArray.offhire);
        var el = document.createElement('div');
        el.className = 'baseline gantt_task_content event-data';            
        return el;          
    return false;       

gantt.config.columns = [
    { name: "text", tree: false, width: 150, resize: true, align: "left", label: "Vessel" },
    { name: "start_date", align: "center", width: 150, resize: true, align: "left", label: "Onhire" },
    { name: "duration", align: "center", width: 70, resize: true, hide: true }
gantt.templates.tooltip_text = function (start, end, task) {
    var s = moment(start).format("DD/MM/YYYY");
    var e = moment(end).format("DD/MM/YYYY");
    return "<b>Charterer: </b>" + task.current_charterer + "<br/><b>Start: </b>" + s + "<br /><b>End: </b>" + e;
gantt.templates.task_text = function (start, end, task) {
    return "<b>" + task.current_charterer + "</b>";
//Month format
gantt.config.scale_unit = "month";
gantt.config.date_scale = "%M";

gantt.config.start_date = new Date(2019, 01, 01);
gantt.config.end_date = new Date(2020, 01, 01);

// and attaching it to gantt
// setting the REST mode for dataProcessor


Hello Allan,
We received your ticket in the support system. Let’s continue our discussion there.

For everyone else. You can create as many HTML elements as you want within the same task layer.
For example, you can add a baseline and a rescheduled baseline with 2 additional task layers:
But it can be done within one additional task layer: