Adding Milestone line to the timeline?

Gantt
#1

Hey I’ve created a timeline with dhtmlx for project managment and I got a issue. I want to add a labeled event line like the ‘actual date line’ in order to use it for showing the Milestones in my Timeline. What can I do to get it ? .

Capturef
Capturef100×598 1.7 KB

#2

I was wondering what if I use the ‘Marker’ script from the dhtmlx Gantt chart script to implement it in the Timeline. Will it be working ?

#3

Hi @sko_pipas,
Yes, you can implement this vertical line, using the “addMarker” functionality(which is available in the extension “ext/dhtmlxgantt_marker.js”), the code may look like this fragment:

var milestoneDate = new Date(2020, 0, 18);
var milestoneText = "Beta release";
 var markerId = gantt.addMarker({
    start_date: milestoneDate , // setting the stard date of the milestone
    css: "today", //a CSS class applied to the marker
    text: milestoneText , //the marker title
});

Out of a box, you can add this marker to the task, but it won’t be updated on task drag. So you should implement some update functionality, I can suggest using built-in events.
Here is a demo:
http://snippet.dhtmlx.com/127b22fcf

Markers will be added for each task with “type:milestone”. The logic of creating markers is placed in the addMilestoneMarker function.

Note, you can read about used events in our documentation:
https://docs.dhtmlx.com/gantt/api__refs__gantt_events.html