The best library to do gantt graph like this?

Question

I have to do a gantt alike chart in a browser with javascript...

(like this)

Do you know any library to make it easy??

Important features:

• Every resource in must be one line
• The "task" could have a color or a texture as background
• The background line that connect the tasks
• A way to indicate the completition % of any task OR a way to show where a resource is, in his own row

Thank you very much!!!

Answer 1

I hope that you are aware of D3JS, where the D3 stand for " Data-Driven Documents". It is the go-to JS charting librray.

The gallery shows a Gantt chart, with an impressive working, interacitve demo here.

There are also a few code examples at this page on GitHub, although I don't see demos & they may focus on CSS. Probably still worth a look, though.

Answer 2

Check out mermaid which is a JS library that can draw Gantt charts based on markdown style input. It is uses the d3 JavaScript library mentioned in the other answer.

Answer 3

You can try Twoproject Gantt. It's for "normal" Gantt charts, not the Resource time plans you are looking for. But since it's open source, it can in principle be adapted …

• free and open source software under MIT Licence (repo)
• a GUI based Gantt chart editor, so not just a chart renderer
• jQuery based
• can be downloaded, or used online for free as SaaS software

Answer 4

Another option to try is the newly released Scheduler component from Bryntum. It is powerful, interactive and has great performance. More info found here: https://www.bryntum.com/products/scheduler.

Disclaimer: I am one of the authors of the mentioned component

Answer 5

Syncfusion Essential Gantt for JavaScript is an option to consider.

Sample with source code

• Every resource in must be one line: Yes. In Resource view Gantt all the resources are rendered in separate rows.
• The "task" could have a color or a texture as background: Yes. This can be done as shown below:

<script type="text/javascript"> 
$(function () { 
      $("#resourceGantt").ejGantt({ 

            queryTaskbarInfo: function (args) { 
              var obj = $("#resourceGantt").data("ejGantt"); 
                var data = args.data.item; 
                if (data.progress > 80) { 
                    args.progressbarBorder = args.progressbarBackground = "#f5d59c"; 
                    args.taskbarBorder = args.taskbarBackground = "orange"; 
                    $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none"); 
                } 
                else if (data.progress == 50) { 
                    args.progressbarBorder = args.progressbarBackground = "lightGreen"; 
                    args.taskbarBorder = args.taskbarBackground = "Green"; 
                    $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none"); 
                } 
                else if (data.progress < 50) { 
                    args.progressbarBorder = args.progressbarBackground = "lightBlue"; 
                    args.taskbarBorder = args.taskbarBackground = "Blue"; 
                    $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none"); 
                } 
                else { 
                    args.progressbarBorder = args.progressbarBackground = "#9c9cf3"; 
                    args.taskbarBorder = args.taskbarBackground = "Blue"; 
                    $(args.taskbar).find(".e-gantt-childtaskbar-progress").css("background-image", "none"); 
                } 
            }, 
  //..     }); 
    });   </script>

• The background line that connect the tasks: Yes. Can we done as shown below:

<script type="text/javascript"> 
$(function () { 

   $("#resourceGantt").ejGantt({ 
        queryTaskbarInfo: function (args) { 
              var obj = $("#resourceGantt").data("ejGantt"), 
                 startPoint = obj._getTaskLeft(args.data.item.startDate), 
                 left = obj._getTaskLeft(args.data.parentItem.eResourceChildTasks[args.data.parentItem.eResourceChildTasks.length-1].item.endDate);

                var checkElement = $(args.taskbar).closest(".e-chartcell").find(".test"); 
                if (!checkElement.length) { 
                    $(args.taskbar).closest(".e-chartcell").append('<div class ="test" style="height:7px;margin-top: 18px;background-color:blue"></div>'); 
                    $(args.taskbar).closest(".e-chartcell").find(".test").css("width", (left + 20) - startPoint); 
                    $(args.taskbar).closest(".e-chartcell").find(".test").css("margin-left", startPoint); 
                }  },     //..     }); 
    }); 
</script>

• A way to indicate the completion % of any task OR a way to show where a resource is, in his own row: Yes. Progress bar can be enabled by using progressMapping property.

<script type="text/javascript"> 
$(function () { 

   $("#resourceGantt").ejGantt({ 
           progressMapping: "progress", 
    //.. 
    }); 
    }); 
 </script>

The whole product is available for free through the community license if you qualify (less than 1 million USD in revenue).

Note: I work for Syncfusion.