1

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

(like this) enter image description here

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!!!

1
0

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.

5
  • 1
    Thank you!! I know D3 and I'd seen these examples. Is a wonderful library and Gantt chart, but there is a gap between what exactly I want an this implementation. Thank you anyway!! (I accept this answer because is the best almost-perfect library) Jan 13 '17 at 14:59
  • If you can explain the gap in the this question, or a new one, or maybe even on S.O, you might get exactly what you want Jan 13 '17 at 16:09
  • 1
    The main gap is this two features - The "task" could have a color or a texture as background - The background line that connect the tasks and a good thing would be a popup when click or put the mouse over a task Jan 13 '17 at 16:13
  • Can't you do that with CSS? I would be very surprised if you could not. If you can't figure it out, ask on. S.O Jan 13 '17 at 16:16
  • Or email the author, or ask on a D3JS forum? May 12 '17 at 8:07
1

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.

2
  • I didn't know this one. It looks interesting. I'll play with it and tell you. Thank you very much! Jan 13 '17 at 15:00
  • Wow! I just checked this out, and it looks excellent!! (+1) I especially like that there is an AngulrJs wrapper May 12 '17 at 8:12
1

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
0

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

3
  • 1
    Welcome aboard. Since you are one of the developers, I would have hoped for more information on why/how this solved the PO's question, and why, at this late date, it is better than the accepted answer. You might also mention that the cheapest version costs $600, although the OP did not state a budget. Sep 4 '18 at 9:07
  • 1
    I recognise I am answering late, though I thought it might be useful with more options for others finding this question. D3 is a great visualization library but not specifically tailored to scheduling as seen in the screenshot above. A component designed for similar tasks will probably be easier to use, with support for more schedule related functionality built in. And while ours might be considered costly, it will probably cut your development costs since much is already in place. It might not be a perfect fit for everyone, but it costs nothing to try and evaluate it. Sep 4 '18 at 11:30
  • All great points, thanks. That's the sort of thing that we like to see in answers :-) Although I am not the OP, I will certainly give your s/w a try. Thanks for letting us know of it. Sep 4 '18 at 12:23
0

Syncfusion Essential Gantt for JavaScript is an option to consider.

Syncfusion Resource Gantt

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.