Hello everyone and welcome to a new tutorial that will help you further explore the customization capabilities of DHTMLX Gantt. Previously, we shared with you several scenarios of using our JavaScript Gantt component with various UI widgets from the Suite library, and now it is time to show you the Gantt integration case with another DHTMLX product, namely the DHTMLX Diagram library.
In this tutorial, you will learn how to integrate a JS Gantt chart with a JS mind map and synchronize them.
Benefits of Using a Mind Map in PM Tools Like Gantt Chart
Gantt charts built with DHTMLX are used to efficiently manage various complex workflows. In projects with complex task hierarchies and dependencies, it can be convenient for end-users to have a visualization tool like a mind map that can streamline the project planning and its execution progress. With a mind map, it becomes easier to get a holistic view of the overall structure of tasks, detect potential bottlenecks, and improve the workflow.
In the sample below, you can see the result of the integration of DHTMLX Gantt and Diagram components. The mind map shows project tasks scheduled in the Gantt chart. Since the Gantt data is synchronized with the mind map, any changes introduced in the Gantt chart will be displayed in the mind map. In other words, you can create, update, delete, expand/collapse chains of tasks, and all these actions will be visualized in the mind map. Try it in the sample below.
It should be noted that the diagramming component allows for only one root element, while Gantt can have several elements (tasks) at the root level. Therefore, in our sample, when Gantt has only one task at the root level, it will be the root element in the mind map. If there are more tasks at the root level of the Gantt chart, the mind map will be complemented with an additional element, which combines all the elements at the root level.
Now, we can proceed to the step-by-step instructions to help you implement a similar integration in your scenarios.
Guide on Integrating DHTMLX Gantt with Mind Map
Step 1: Initializing Diagram
We start with the initialization of the JavaScript diagramming component. It should be initialized in the mindmap container. You should set “mindmap” in the type parameter to get this type of diagram.
type: "mindmap"
});
Step 2: Synchronizing Data Changes
To synchronize changes, you need to remove the current diagram data and load new ones. Since there are several tasks, you include them all in the array, and then add event handlers, in which you call the syncData function responsible for the synchronization of changes.
"onAfterTaskAdd",
"onAfterTaskDelete",
"onAfterTaskUpdate",
"onParse",
]
syncEvents.forEach(function (eventName) {
gantt.attachEvent(eventName, function () {
syncData();
});
})
In the syncData function, you need to remove the existing data.
diagram.data.removeAll();
After that, you have to save the Gantt data in the text format (mindData variable).
The next step is to declare three variables (rootItem, addRootIem, firstRootParent) that will be needed in the syncData function. The rootItem element is for the Diagram component. If there are several root tasks in the Gantt chart, this element will be added to the data.
let addRootItem = false;
let firstRootParent = null;
Next, you iterate through the array with tasks. If you detect that the task has no parent and nothing is saved to the firstRootParent variable, you save the task there.
if (!task.parent) {
if (!firstRootParent) {
firstRootParent = task;
}
If the variable is not empty, it means that there are several root tasks. You should modify the parent parameter for the current task and for the one stored in the firstRootParent variable.
firstRootParent.parent = "root";
task.parent = "root";
addRootItem = true;
}
Gantt allows values in the id and parent parameters to be of string or number type, but Diagram expects only strings. So, you should convert these parameters to string type.
if (task.parent) {
task.parent += "";
}
It should be noted that the type parameter in Diagram sets the shape of the elements. If something is already specified in this parameter, elements will have the shape of a rectangle. To save space and make all the elements look more compact, you need to remove the type parameter.
After that, you check the value of the addRootItem variable. If it is necessary to add a root element, you add rootItem to the array with data.
mindData.push(rootItem);
}
Step 3: Synchronizing Open and Close States in Both Components
The next step is to load data into Diagram and run the syncOpenState function.
syncOpenState();
In this function, you iterate through all the Gantt tasks. If the hierarchy of tasks is expanded, you call the expandItem() method of the Diagram component to expand the branch in the mind map. If the hierarchy of tasks is collapsed, you call the collapseItem() method.
if (task.$open) {
diagram.expandItem(task.id + "");
}
else {
diagram.collapseItem(task.id + "");
}
})
You don’t need to call the syncOpenState function to iterate through all the tasks to synchronize changes, when tasks in the Gantt chart are expanded and collapsed. Since the IDs of objects are the same, it is enough to call the expandItem() and collapseItem() methods using the same ID (better to convert it into a string).
The root task in the mind map has child tasks on the left and right sides. Thus, when expanding branches in the mind map, you need to know from which side it should be done. You need to specify both sides for the expandItem() method.
diagram.expandItem(id + "", "left");
diagram.expandItem(id + "", "right");
});
gantt.attachEvent("onTaskClosed", function (id) {
diagram.collapseItem(id + "");
});
When tasks are expanded and collapsed in the mind map, you may want to synchronize these changes with the Gantt chart. To do that, you need to add the following piece of code:
gantt.silent(function () {
const task = gantt.getTask(id)
task.$open = true
})
gantt.render()
});
diagram.events.on("afterCollapse", (id, dir) => {
gantt.silent(function () {
const task = gantt.getTask(id)
task.$open = false
})
gantt.render()
});
It is required to change the $open property of the task. This property shows the expanded state of the task. It is better to do it inside the silent function to ensure that event handlers are not called when the task is expanded/collapsed. Otherwise, an infinite loop will be created, where expand/collapse events will be called one by one in the Gantt chart and the mind map.
And lastly, you call the render() method to render changes in the Gantt chart.
Step 4: Gantt initialization
There is one more step left to complete the tutorial. You need to initialize the Gantt chart. All the initialization details are clearly explained on this page of the Gantt documentation.
As a result, you should get a combination of tools for managing project workflows as in this sample.
Conclusion
Visualization tools like mind maps can be a great addition to a Gantt chart when managing complex projects with multiple interconnected tasks. It provides project teams with a more comprehensive perspective on how things will unfold and make adjustments if needed. For those who want to try the combination of our Gantt and Diagram components in your project, download free 30-day trial versions of both products.