{"id":3941,"date":"2017-03-14T14:00:28","date_gmt":"2017-03-14T10:00:28","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=3941"},"modified":"2023-05-05T13:08:26","modified_gmt":"2023-05-05T10:08:26","slug":"custom-elements-gantt-chart-component","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/custom-elements-gantt-chart-component\/","title":{"rendered":"Custom Elements of Gantt Chart Component"},"content":{"rendered":"

Since the 1910s when the Gantt Chart<\/a> was initially devised, it has undergone many changes. Different types of projects, relationships between the tasks, and possible unexpectedness that you should be prepared while managing the working process, have led to the creation of more and more new custom elements, tricks, and approaches.<\/p>\n

Download dhtmlxGantt – JavaScript Gantt Chart<\/a><\/strong><\/p>\n

One of the simplest examples of such elements is a Milestone<\/strong>, a mark that shows an important part of the project.<\/p>\n

For example, the milestone can show the moment when one of the important phases of the project such as design is finished. It helps define the most important dates at first sight. Moreover, completing a milestone is also a great achievement from a psychological point of view since it gives your team a great sense of accomplishment.<\/p>\n

\"milestones\"<\/p>\n

In this article, we’ll describe two types of custom elements that you can build with our js\/html Gantt Chart: Deadlines<\/strong> and Baselines<\/strong>.<\/p>\n

Note: dhtmlxGantt functionality is not limited to these two types of custom elements. In this blog post we use them as an example. Also, they can be designed based on your needs.<\/strong><\/p><\/blockquote>\n

Using Deadlines<\/h4>\n

Without a doubt, meeting your deadlines is one of the key indicators that shows how well the work on the project goes. Missing your deadlines means additional losses and questions your ability to manage the working process successfully. Thus, it’s pretty important always to keep in mind your deadlines or, what’s even better, see them before your eyes. It’s an easy way to alert some possible problems in your schedule. But sometimes deadlines can be overlooked.<\/p>\n

Starting from version 3.0<\/a>, dhtmlxGantt allows you to add custom elements such as deadlines to your apps. Deadline dates are displayed next to each task, and if a task lasts too long and overlaps a deadline marker, you’ll see a notification icon in the list of tasks at the right side of the app. Here’s how it can look like:<\/p>\n

\"deadlines-dhtmlxgantt\"<\/p>\n

To check how it works, you can visit this demo page<\/a>. If you change the duration of a proper task, you’ll see that a notification icon appears or disappears.<\/p>\n

In dhtmlxGantt, displaying additional elements, such as a deadline or baseline, is usually done by creating a displayable layer and placing custom elements there. To add one more layer to the timeline area, use theaddTaskLayer<\/em> method. As a parameter, the method takes a function that takes a task’s object and returns a DOM element that will be displayed or false.<\/p>\n

Here’s an example of how you can use this method in case you want to add deadlines to your project:<\/p>\n

gantt.init<\/span>(<\/span>"gantt_here"<\/span>)<\/span>;<\/span>
\ngantt.addTaskLayer<\/span>(<\/span>function<\/span> draw_deadline(<\/span>task)<\/span> {<\/span>
\n    if<\/span> (<\/span>task.deadline<\/span>)<\/span> {<\/span>
\n        var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n        el.className<\/span> =<\/span> 'deadline'<\/span>;<\/span>
\n        var<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.deadline<\/span>)<\/span>;<\/span>
\n
\n        el.style<\/span>.left<\/span> =<\/span> sizes.left<\/span> +<\/span> 'px'<\/span>;<\/span>
\n        el.style<\/span>.top<\/span> =<\/span> sizes.top<\/span> +<\/span> 'px'<\/span>;<\/span>
\n
\n        el.setAttribute<\/span>(<\/span>'title'<\/span>,<\/span> gantt.templates<\/span>.task_date<\/span>(<\/span>task.deadline<\/span>)<\/span>)<\/span>;<\/span>
\n        return<\/span> el;<\/span>
\n    }<\/span>
\n    return<\/span> false<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Here’s how everything works. After you call the method, dhtmlxGantt adds a container to the timeline area and calls addTaskLayer<\/em> method for each task. The returned DOM element will be appended to the container. When a task is updated, the custom layers will be updated as well.<\/p>\n

Using Baselines<\/h4>\n

First of all, let’s define what a baseline is and what are the possible reasons to use it in the chart. You can think of the baseline as an original plan of the project that can be used by a project manager to compare it to the actual state of affairs. As a result, you’ll be able to understand if the initial understanding of the project was right and how effective were the chosen approaches.<\/p>\n

\"baselines-dhtmlxgantt\"<\/p>\n

The baseline is a snapshot of your project at a given time. To better monitor the progress of a project, you can create more than one baselines. Those timeline projections could be compared to the actual timeline of a project to define the activities that were delayed, completed ahead of schedule, or performed on time. Such approach allows learning from the previous experience and developing a new strategy of scheduling.<\/p>\n

To see how baselines can look in dhtmlxGantt, check this demo page<\/a>.<\/p>\n

The process of creation of the baselines in case of dhtmlxGantt consists of several tasks. We assume that you already know how to create a Gantt chart. If not, follow our guides<\/a>.<\/p>\n

To add a baseline to the existing chart, you should free some space under the task bar from the baseline first:<\/p>\n

gantt.config<\/span>.task_height<\/span> =<\/span> 16<\/span>;<\/span>
\ngantt.config<\/span>.row_height<\/span> =<\/span> 40<\/span>;<\/span><\/div><\/div>\n

Then, move task line to the top of the row using the following code:<\/p>\n

.gantt_task_line<\/span>,<\/span> .gantt_line_wrapper<\/span> {<\/span>
\n    margin-<\/span>top:<\/span> -<\/span>9px;<\/span>
\n}<\/span>
\n.gantt_side_content<\/span> {<\/span>
\n    margin-<\/span>bottom:<\/span> 7px;<\/span>
\n}<\/span>
\n.gantt_task_link<\/span> .gantt_link_arrow<\/span> {<\/span>
\n    margin-<\/span>top:<\/span> -<\/span>12px
\n}<\/span>
\n.gantt_side_content<\/span>.gantt_right<\/span> {<\/span>
\n    bottom:<\/span> 0<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

After that, you need to add additional data properties to the task object. They’ll to the start and end values of the snapshot. For, example, planned_start<\/em>, and planned_end<\/em>.<\/p>\n

dhtmlxGantt automatically parse the start_date and end_date data properties to Date objects. Any other date properties require additional processing. To make the recently added planned_start<\/em> and planned_endproperties<\/em> recognizable by dhtmlxGantt, we should parse them to Date objects using the parseDate()<\/em> method within the onTaskLoading event handler:<\/p>\n

gantt.attachEvent<\/span>(<\/span>"onTaskLoading"<\/span>,<\/span> function<\/span>(<\/span>task)<\/span>{<\/span>
\n    task.planned_start<\/span> =<\/span> gantt.date<\/span>.parseDate<\/span>(<\/span>task.planned_start<\/span>,<\/span> "xml_date"<\/span>)<\/span>;<\/span>
\n    task.planned_end<\/span> =<\/span> gantt.date<\/span>.parseDate<\/span>(<\/span>task.planned_end<\/span>,<\/span> "xml_date"<\/span>)<\/span>;<\/span>
\n    return<\/span> true<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Now, we should call the addTaskLayer<\/em> method to display planned time for tasks:<\/p>\n

gantt.addTaskLayer<\/span>(<\/span>function<\/span> draw_planned(<\/span>task)<\/span> {<\/span>
\n    if<\/span> (<\/span>task.planned_start<\/span> &&<\/span> task.planned_end<\/span>)<\/span> {<\/span>
\n        var<\/span> sizes =<\/span> gantt.getTaskPosition<\/span>(<\/span>task,<\/span> task.planned_start<\/span>,<\/span> task.planned_end<\/span>)<\/span>;<\/span>
\n        var<\/span> el =<\/span> document.createElement<\/span>(<\/span>'div'<\/span>)<\/span>;<\/span>
\n        el.className<\/span> =<\/span> 'baseline'<\/span>;<\/span>
\n        el.style<\/span>.left<\/span> =<\/span> sizes.left<\/span> +<\/span> 'px'<\/span>;<\/span>
\n        el.style<\/span>.width<\/span> =<\/span> sizes.width<\/span> +<\/span> 'px'<\/span>;<\/span>
\n        el.style<\/span>.top<\/span> =<\/span> sizes.top<\/span> +<\/span> gantt.config<\/span>.task_height<\/span>  +<\/span> 13<\/span> +<\/span> 'px'<\/span>;<\/span>
\n        return<\/span> el;<\/span>
\n    }<\/span>
\n    return<\/span> false<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n

Next, choose how your baselines will look like by using some CSS code:<\/p>\n

.baseline<\/span> {<\/span>
\n    position<\/span>:<\/span> absolute<\/span>;<\/span>
\n    border-radius<\/span>:<\/span> 2px<\/span>;<\/span>
\n    opacity<\/span>:<\/span> 0.6<\/span>;<\/span>
\n    margin-top<\/span>:<\/span> -7px<\/span>;<\/span>
\n    height<\/span>:<\/span> 12px<\/span>;<\/span>
\n    background<\/span>:<\/span> #ffd180<\/span>;<\/span>
\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> rgb<\/span>(<\/span>255<\/span>,<\/span>153<\/span>,<\/span>0<\/span>)<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

And, finally redefine the Lightbox structure if you want to provide a possibility to edit the newly added properties from UI:<\/p>\n

gantt.config<\/span>.lightbox<\/span>.sections<\/span> =<\/span> [<\/span>
\n    {<\/span>name:<\/span> "description"<\/span>,<\/span> height:<\/span> 70<\/span>,<\/span> map_to:<\/span> "text"<\/span>,<\/span> type:<\/span> "textarea"<\/span>,<\/span> focus:<\/span> true<\/span>}<\/span>,<\/span>
\n    {<\/span>name:<\/span> "time"<\/span>,<\/span> height:<\/span> 72<\/span>,<\/span> map_to:<\/span> "auto"<\/span>,<\/span> type:<\/span> "duration"<\/span>}<\/span>,<\/span>
\n    {<\/span>name:<\/span> "baseline"<\/span>,<\/span> height:<\/span> 72<\/span>,<\/span> map_to:<\/span> {<\/span>
\n        start_date:<\/span> "planned_start"<\/span>,<\/span> end_date:<\/span> "planned_end"<\/span>}<\/span>,<\/span> type:<\/span> "duration"<\/span>}<\/span>
\n]<\/span>;<\/span>
\ngantt.locale<\/span>.labels<\/span>.section_baseline<\/span> =<\/span> "Planned"<\/span>;<\/span><\/div><\/div>\n

For more detailed information you can check the documentation page<\/a>.<\/p>\n

\"download<\/a><\/p>\n

That’s it for today. We hope you find these new features handy and they’ll help you to improve the management process. To learn more about how customizing of the Gantt Chart can help with your work, you can check some of our recent posts. For example, What Is Critical Path Method<\/a> or Leads and Lags.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Since the 1910s when the Gantt Chart was initially devised, it has undergone many changes. Different types of projects, relationships between the tasks, and possible unexpectedness that you should …<\/p>\n","protected":false},"author":2,"featured_media":3811,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1,38],"tags":[33,20],"class_list":["post-3941","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","category-visible","tag-all-posts","tag-gantt"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3941","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=3941"}],"version-history":[{"count":1,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3941\/revisions"}],"predecessor-version":[{"id":11373,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/3941\/revisions\/11373"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3811"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=3941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=3941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=3941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

To learn more about displaying additional elements in the timeline area, check the following documentation page<\/a>.<\/p>\n