How to add vertical line on timeline diagram to indicate phases?

Have anyone managed to do something like this before?

Thanks.

Just create separate Parts holding vertical lines and Parts holding those labels.

Did you want those to shift as the user resized the timeline? If so, the layout has to know about them.
I can extend the sample for you later today.

I’m a bit busy now, but here’s the modified Timeline sample showing labels for “phases”, but without the vertical separator lines:

[EDIT: sample code replaced by enhanced sample at: Zoomable Timeline with Phases]

Thanks for the sample. It really helps. I’m still new in GoJS. How do I create the vertical line? I’ve tried google about it but haven’t found it yet.

Here you go: Zoomable Timeline with Phases

As always, the complete source code is in the page itself.

Thanks for the sample. Really appreciate it.

How do I update the data when the event drag to other date?

The sample depends on TimelineLayout to position nodes according to their node.data.date.

If you want to support users moving nodes, you need to implement a mechanism that calls Model.set on the Node.data with the new Date when a Node has moved. One way is to implement a “SelectionMoved” DiagramEvent listener. Call Panel | GoJS API with each moved Node.location and valueToDate.

Thanks for your help.