Multiple Charts on a Page

info

This functionality is available in the Gantt PRO version under the Commercial (since October 6, 2021), Enterprise and Ultimate licenses

Basically, DHTMLX Gantt is a static object and the default instance of it continually exists on the page. You may access it via the global gantt object at any time. But you can also create a new gantt object if needed.

Gantt Instance Configuration

To create a new instance of DHTMLX Gantt, use the Gantt.getGanttInstance() method:

// beware, "Gantt" in the command goes with the capital letter
const ganttChart = Gantt.getGanttInstance();

The method can take a configuration object as a parameter:

const ganttInstance = Gantt.getGanttInstance({
    plugins: {
        auto_scheduling: true,
    },
    container: "gantt_here",
    config: {
        work_time: true,
        duration_unit: "minute",
        auto_scheduling_compatibility: true,
        auto_scheduling: true,
        auto_scheduling_strict: true,
        auto_scheduling_initial: true,
        start_date: new Date(2027, 0, 1),
        end_date: new Date(2028, 0, 1),
    },
    calendars: [
        {
            id: "global",
            worktime: {
                hours: ["8:00-17:00"],
                days: [0, 1, 1, 1, 1, 0, 0],
                customWeeks: {
                    lastMonthOfYear: {
                        from: new Date(2027, 11, 1),
                        to: new Date(2028, 0, 1),
                        hours: ["9:00-13:00"],
                        days: [0, 1, 1, 1, 1, 1, 0]
                    },
                    firstMonthOfNextYear: {
                        from: new Date(2028, 0, 1),
                        to: new Date(2028, 1, 1),
                        hours: ["14:00-16:00"],
                        days: [1, 1, 1, 1, 1, 0, 1]
                    }
                }
            }
        }
    ],
    data: {
        tasks: [
            { id: 11, text: "Project #1", type: "project", "open": true, "parent": 0 },
            { id: 1, text: "1", start_date: "2027-04-05", duration: 1, parent: "11" },
            { id: 2, text: "2", start_date: "2027-04-05", duration: 3, parent: "11" },
            { id: 3, text: "3", start_date: "2027-04-05", duration: 3, parent: "11" },
            { id: 4, text: "4", start_date: "2027-04-05", duration: 3, parent: "11" },
            { id: 5, text: "5", start_date: "2027-04-05", duration: 1, parent: "11" }
        ],
        links: [
            { source: "1", target: "2", type: "0", id: 1 },
            { source: "1", target: "3", type: "0", id: 2 },
            { source: "1", target: "4", type: "0", id: 3 },
            { source: "2", target: "4", type: "0", id: 4 },
            { source: "3", target: "4", type: "0", id: 5 },
            { source: "4", target: "5", type: "0", id: 6 }
        ]
    }
});

As a result, you will get an initialized Gantt chart with the specified settings.

The config object can contain the following properties:

• container - (string|HTMLElement) an HTML container or its ID where the Gantt chart will be displayed. If not specified, Gantt will be initialized without a container.
• config - (object) an object with Gantt chart configuration settings
• calendars - (array) an array of worktime calendars to be loaded into the gantt instance. Calendars must be specified in the format supported by the gantt.addCalendar() method
• templates - (object) an object with templates
• events - (object) an object with event handlers

You need to use the following format while specifying event handlers for a new Gantt instance:

const ganttInstance = Gantt.getGanttInstance({
    events: {
        onTaskCreated: (task) => {
            task.owner = null;
            return true;
        },
        onTaskClick: (taskId) => {
            alert(ganttInstance.getTask(taskId).text);
            return true;
        }
    }
});

• data - (object|string) an object with data to load or the URL to load data from
• plugins - (object) extensions that need to be activated
• locale - (string|object) a two-letter language code or an object of the locale that needs to be activated

Note that calling the Gantt.getGanttInstance() method without parameters will return a gantt object with the default configuration settings. Therefore, you will need to configure your new instance, initialize it, and populate it with data, as usual.

Let's take a simple example: two Gantt charts, one under another:

window.addEventListener("DOMContentLoaded", () => {
    const firstGantt = Gantt.getGanttInstance();
    firstGantt.init("gantt_here");
    firstGantt.parse(tasksA);

    const secondGantt = Gantt.getGanttInstance();
    secondGantt.init("gantt_here_2");
    secondGantt.parse(tasksB);
});

<body>
    <div id="gantt_here" style="width: 100%; height: 50%;"></div>
    <div id="gantt_here_2" style="width: 100%; height: 50%;"></div>
</body>

Integration with DHTMLX Layout

A good way to place multiple Gantt charts on the page is using DHTMLX Layout. It not only provides a convenient layout frame, but also ensures correct interaction with other elements on the page and responds to page size changes.

note

Note that DHTMLX Layout is a separate product, not a part of the DHTMLX Gantt library. If you would like to use DHTMLX Layout in your application, you should purchase the license. Please check the licensing options.

A DHTMLX Gantt instance can be placed into a layout cell by defining a container in the cell and initializing Gantt in it.

new dhx.Layout("layout_container", {
    rows: [
        {
            id: "top",
            height: "50%",
            html: '<div id="gantt_here" style={{width: '100%', height: '100%'}}></div>'
        },
        {
            id: "bottom",
            height: "50%",
            html: '<div id="gantt_here_2" style={{width: '100%', height: '100%'}}></div>'
        }
    ]
});

const firstGantt = Gantt.getGanttInstance();
firstGantt.init("gantt_here");
firstGantt.parse(tasksA);

const secondGantt = Gantt.getGanttInstance();
secondGantt.init("gantt_here_2");
secondGantt.parse(tasksB);

Destructor of Gantt and DataProcessor instances

Starting from version 5.1, the DHTMLX Gantt object has a destructor() method that can be used to dispose unnecessary Gantt instances.

The destructor() method of a gantt instance can be used as follows:

const ganttInstance = Gantt.getGanttInstance();
ganttInstance.destructor();

The destructor will perform the following tasks:

• clear the data loaded into a gantt instance
• destroy the data processor if it is attached to the gantt
• detach the gantt from DOM
• detach all DOM events attached via the gantt.event() method

Note that the destructor will not destroy the data stores created by the gantt.createDatastore() method. You have to destroy them manually, like this:

// creating a datastore
const ganttInstance = Gantt.getGanttInstance();
const resourcesStore = ganttInstance.createDatastore({
    name: "resource",
    initItem: (item) => {
        item.id = item.key || ganttInstance.uid();
        return item;
    }
});

// destroying the datastore later
resourcesStore.destructor();

Using destructor with Angular

Here is an example of using the destructor to dispose a gantt instance while using the Angular framework:

@Component({ template: '...' })
class MyGanttComponent implements OnInit, OnDestroy {
    private ganttInstance;

    ngOnInit() {
        this.ganttInstance = Gantt.getGanttInstance();

        // configure and init
    }

    ngOnDestroy() {
        if (this.ganttInstance) {
            this.ganttInstance.destructor();
        }
    }
}

Detaching the dataProcessor

Calling the destructor of a data processor will clear the data processor instance and detach it from the gantt. For example:

const ganttInstance = Gantt.getGanttInstance();
const dataProcessor = ganttInstance.createDataProcessor({
    url: "url",
    mode: "REST"
});

// destroys data processor and detaches it from the gantt
dataProcessor.destructor();

note

If you use a package that does not allow creating multiple instances of the gantt object (GPL or Commercial editions), calling the gantt destructor will make the gantt inaccessible until the page is reloaded.