Portfolio roadmap

Hello - I see that you can have more than one Gantt on the screen, but I have a portfolio of projects and would like to have a portfolio roadmap view showing dozens of projects (perhaps only the start/finish of the project, a high-level project timeline). Is that possible. I am looking for something similar to this view (attached image).

Hello @Tim_Washington,

Yeas, such a result can be reached in “dhtmlxGantt”.
It will require some “PRO” functionality, as:
addTaskLayer-to display project milestones on the same row as project.
milestones- tasks with “type: milestone/project” are available in “PRO” versions, and some “configuring”.

Here is a simple demo with configuring to make it “similar” to your picture:
http://snippet.dhtmlx.com/5/f86661157

Of cause, you can customize the “visual” part of a chart through CSS.

Here is the same dataset without any configuring:
http://snippet.dhtmlx.com/5/aec00cb3b

API list used in the demo:
milestones(PRO):
https://docs.dhtmlx.com/gantt/desktop__milestones.html
addTaskLayer(PRO):
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html
grid_open:
https://docs.dhtmlx.com/gantt/api__gantt_grid_open_template.html
grid_folder:
https://docs.dhtmlx.com/gantt/api__gantt_grid_folder_template.html
columns:
https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html

1 Like

Thank you, this is helpful.

Two follow up questions

  1. Since I am creating a portfolio view as described above, is it possible to add a sort command to sort by start or finish date? In other words, can I sort the projects to see the projects with the earliest finish date to the latest finish date (or possible by start date)?
  2. I like the feature to add dependencies via drag and drop - is it possible to create project interdependencies? As an example, this could be where a project might have a finish-start relationship with a milestone (or end date) of another project?

Thank you!

Tim

Hello @Tim_Washington,

Regarding the first question:
Yes, you are able to sort/or filter data as you need. There is internal config for this “gantt.config.sort = true;” which enables us to sort the data by clicking the header cell. Or you can implement your own sorting functionality(server or client-side).
Here is a demo with date sorting:
http://snippet.dhtmlx.com/5/fdd34f5de
You can read more about sorting functionality by the following link:
https://docs.dhtmlx.com/gantt/desktop__sorting.html

Regarding the second question:
It sounds similar to the “autoscheduling” functionality that schedules tasks automatically depending on relations between them.
Here is a link where you can read about this functionality:
https://docs.dhtmlx.com/gantt/desktop__auto_scheduling.html