{"id":12938,"date":"2024-09-24T11:11:53","date_gmt":"2024-09-24T08:11:53","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=12938"},"modified":"2024-10-31T16:30:15","modified_gmt":"2024-10-31T13:30:15","slug":"enhancing-project-workflow-visibility-javascript-gantt-chart-mind-map","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/enhancing-project-workflow-visibility-javascript-gantt-chart-mind-map\/","title":{"rendered":"Enhancing Project Workflow Visibility in a JavaScript Gantt Chart with a Mind Map"},"content":{"rendered":"<p>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 <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxGantt\/\" rel=\"noopener\" target=\"_blank\">JavaScript Gantt component<\/a> 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 <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram library<\/a>.<\/p>\n<p>In this tutorial, you will learn how to integrate a JS Gantt chart with a JS mind map and synchronize them. <\/p>\n<h5>Benefits of Using a Mind Map in PM Tools Like Gantt Chart<\/h5>\n<p>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.<\/p>\n<p>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.<\/p>\n<p><iframe data-src=\"https:\/\/snippet.dhtmlx.com\/niwqtjeo?mode=mobile\" frameborder=\"0\" width=\"100%\" height=\"560\"class=\"snippet-container js-iframe\"><\/iframe> <a href=\"https:\/\/snippet.dhtmlx.com\/8tehx59v?tag=gantt&#038;mode=wide rel=\"noopener\" target=\"_blank\">Check the sample ><\/a><\/p>\n<p>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. <\/p>\n<p>Now, we can proceed to the step-by-step instructions to help you implement a similar integration in your scenarios.<\/p>\n<h5>Guide on Integrating DHTMLX Gantt with Mind Map<\/h5>\n<h6>Step 1: Initializing Diagram<\/h6>\n<p>We start with the <a href=\"https:\/\/docs.dhtmlx.com\/diagram\/guides\/diagram\/initialization\/#initializing-diagram\" rel=\"noopener\" target=\"_blank\">initialization<\/a> of the JavaScript diagramming component. It should be initialized in the <strong>mindmap<\/strong> container. You should set &#8220;mindmap&#8221; in the <strong>type<\/strong> parameter to get this type of diagram.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> diagram <span class=\"sy0\">=<\/span> <span class=\"kw1\">new<\/span> dhx.<span class=\"me1\">Diagram<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;mindmap&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; type<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;mindmap&quot;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<h6>Step 2: Synchronizing Data Changes<\/h6>\n<p>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 <strong>syncData<\/strong> function responsible for the synchronization of changes.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> syncEvents <span class=\"sy0\">=<\/span> <span class=\"br0\">&#91;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;onAfterTaskAdd&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;onAfterTaskDelete&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;onAfterTaskUpdate&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n&nbsp; &nbsp; <span class=\"st0\">&quot;onParse&quot;<\/span><span class=\"sy0\">,<\/span><br \/>\n<span class=\"br0\">&#93;<\/span><br \/>\nsyncEvents.<span class=\"me1\">forEach<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>eventName<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span>eventName<span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; syncData<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p>In the <strong>syncData<\/strong> function, you need to remove the existing data.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">function<\/span> syncData<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; diagram.<span class=\"me1\">data<\/span>.<span class=\"me1\">removeAll<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>After that, you have to save the Gantt data in the text format (<strong>mindData<\/strong> variable).<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> mindData <span class=\"sy0\">=<\/span> gantt.<span class=\"me1\">serialize<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span>.<span class=\"me1\">data<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>The next step is to declare three variables (<strong>rootItem<\/strong>, <strong>addRootIem<\/strong>, <strong>firstRootParent<\/strong>) that will be needed in the <strong>syncData<\/strong> function. The <strong>rootItem<\/strong> element is for the Diagram component. If there are several root tasks in the Gantt chart, this element will be added to the data.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">const<\/span> rootItem <span class=\"sy0\">=<\/span> <span class=\"br0\">&#123;<\/span> id<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;root&quot;<\/span><span class=\"sy0\">,<\/span> text<span class=\"sy0\">:<\/span> <span class=\"st0\">&quot;My project&quot;<\/span> <span class=\"br0\">&#125;<\/span><span class=\"sy0\">;<\/span><br \/>\nlet addRootItem <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><span class=\"sy0\">;<\/span><br \/>\nlet firstRootParent <span class=\"sy0\">=<\/span> <span class=\"kw2\">null<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>Next, you iterate through the array with tasks. If you detect that the task has no parent and nothing is saved to the <strong>firstRootParent<\/strong> variable, you save the task there.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">mindData.<span class=\"me1\">forEach<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>task<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"sy0\">!<\/span>task.<span class=\"me1\">parent<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span><span class=\"sy0\">!<\/span>firstRootParent<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; firstRootParent <span class=\"sy0\">=<\/span> task<span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>If the variable is not empty, it means that there are several root tasks. You should modify the <strong>parent<\/strong> parameter for the current task and for the one stored in the <strong>firstRootParent<\/strong> variable.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; firstRootParent.<span class=\"me1\">parent<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;root&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; task.<span class=\"me1\">parent<\/span> <span class=\"sy0\">=<\/span> <span class=\"st0\">&quot;root&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; addRootItem <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>Gantt allows values \u200b\u200bin the <strong>id<\/strong> and <strong>parent<\/strong> parameters to be of string or number type, but Diagram expects only strings. So, you should convert these parameters to string type.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">task.<span class=\"me1\">id<\/span> <span class=\"sy0\">+=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>task.<span class=\"me1\">parent<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; task.<span class=\"me1\">parent<\/span> <span class=\"sy0\">+=<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<p>It should be noted that the <strong>type<\/strong> 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 <strong>type<\/strong> parameter.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">delete<\/span> task.<span class=\"me1\">type<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>After that, you check the value of the <strong>addRootItem<\/strong> variable. If it is necessary to add a root element, you add <strong>rootItem<\/strong> to the array with data.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\"><span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>addRootItem<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; mindData.<span class=\"me1\">push<\/span><span class=\"br0\">&#40;<\/span>rootItem<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><\/div><\/div>\n<h6>Step 3: Synchronizing Open and Close States in Both Components<\/h6>\n<p>The next step is to load data into Diagram and run the <strong>syncOpenState<\/strong> function.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">diagram.<span class=\"me1\">data<\/span>.<span class=\"me1\">parse<\/span><span class=\"br0\">&#40;<\/span>mindData<span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\nsyncOpenState<span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>In this function, you iterate through all the Gantt tasks. If the hierarchy of tasks is expanded, you call the <strong>expandItem()<\/strong> method of the Diagram component to expand the branch in the mind map. If the hierarchy of tasks is collapsed, you call the <strong>collapseItem()<\/strong> method.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">gantt.<span class=\"me1\">eachTask<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>task<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">if<\/span> <span class=\"br0\">&#40;<\/span>task.$open<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; diagram.<span class=\"me1\">expandItem<\/span><span class=\"br0\">&#40;<\/span>task.<span class=\"me1\">id<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"kw1\">else<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; diagram.<span class=\"me1\">collapseItem<\/span><span class=\"br0\">&#40;<\/span>task.<span class=\"me1\">id<\/span> <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><\/div><\/div>\n<p>You don\u2019t need to call the <strong>syncOpenState<\/strong> 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 <strong>expandItem()<\/strong> and <strong>collapseItem()<\/strong> methods using the same ID (better to convert it into a string). <\/p>\n<p>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 <strong>expandItem()<\/strong> method.<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">gantt.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onTaskOpened&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; diagram.<span class=\"me1\">expandItem<\/span><span class=\"br0\">&#40;<\/span>id <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;left&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n&nbsp; &nbsp; diagram.<span class=\"me1\">expandItem<\/span><span class=\"br0\">&#40;<\/span>id <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">&quot;right&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\ngantt.<span class=\"me1\">attachEvent<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;onTaskClosed&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; diagram.<span class=\"me1\">collapseItem<\/span><span class=\"br0\">&#40;<\/span>id <span class=\"sy0\">+<\/span> <span class=\"st0\">&quot;&quot;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>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:<\/p>\n<div class=\"codecolorer-container javascript default\" style=\"overflow:auto;white-space:nowrap;\"><div class=\"javascript codecolorer\">diagram.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;afterExpand&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> dir<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">silent<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">const<\/span> task <span class=\"sy0\">=<\/span> gantt.<span class=\"me1\">getTask<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; task.$open <span class=\"sy0\">=<\/span> <span class=\"kw2\">true<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">render<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><br \/>\n<br \/>\ndiagram.<span class=\"me1\">events<\/span>.<span class=\"me1\">on<\/span><span class=\"br0\">&#40;<\/span><span class=\"st0\">&quot;afterCollapse&quot;<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">&#40;<\/span>id<span class=\"sy0\">,<\/span> dir<span class=\"br0\">&#41;<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">silent<\/span><span class=\"br0\">&#40;<\/span><span class=\"kw1\">function<\/span> <span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span> <span class=\"br0\">&#123;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; <span class=\"kw1\">const<\/span> task <span class=\"sy0\">=<\/span> gantt.<span class=\"me1\">getTask<\/span><span class=\"br0\">&#40;<\/span>id<span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; &nbsp; &nbsp; task.$open <span class=\"sy0\">=<\/span> <span class=\"kw2\">false<\/span><br \/>\n&nbsp; &nbsp; <span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n&nbsp; &nbsp; gantt.<span class=\"me1\">render<\/span><span class=\"br0\">&#40;<\/span><span class=\"br0\">&#41;<\/span><br \/>\n<span class=\"br0\">&#125;<\/span><span class=\"br0\">&#41;<\/span><span class=\"sy0\">;<\/span><\/div><\/div>\n<p>It is required to change the <strong>$open<\/strong> property of the task. This property shows the expanded state of the task. It is better to do it inside the <strong>silent<\/strong> 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. <\/p>\n<p>And lastly, you call the <strong>render()<\/strong> method to render changes in the Gantt chart.<\/p>\n<h6>Step 4: Gantt initialization<\/h6>\n<p>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 <a href=\"https:\/\/docs.dhtmlx.com\/gantt\/desktop__general_gantt_chart.html\" rel=\"noopener\" target=\"_blank\">page<\/a> of the Gantt documentation.<\/p>\n<p>As a result, you should get a combination of tools for managing project workflows as in this <a href=\"https:\/\/snippet.dhtmlx.com\/niwqtjeo?mode=wide\" rel=\"noopener\" target=\"_blank\">sample<\/a>.<\/p>\n<h5>Conclusion<\/h5>\n<p>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 <a href=\"https:\/\/dhtmlx.com\/docs\/download\/\" rel=\"noopener\" target=\"_blank\">free 30-day trial versions<\/a> of both products.  <\/p>\n<h5>Related Materials<\/h5>\n<ul>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/gantt\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt documentation<\/a><\/li>\n<li><a href=\"https:\/\/docs.dhtmlx.com\/diagram\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram documentation<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/blog\/tutorials\/?tag=gantt\" rel=\"noopener\" target=\"_blank\">DHTMLX Gantt tutorials<\/a><\/li>\n<li><a href=\"https:\/\/dhtmlx.com\/docs\/download\/\" rel=\"noopener\" target=\"_blank\">Free 30-day trial version<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":12946,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[33,58,20],"class_list":["post-12938","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-all-posts","tag-diagram","tag-gantt"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12938","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=12938"}],"version-history":[{"count":10,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12938\/revisions"}],"predecessor-version":[{"id":13070,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/12938\/revisions\/13070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/12946"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=12938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=12938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=12938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}