Skip to content

Twproject jQuery Gantt editor–new version and service

September 15, 2014

Online Demo/Service and Sources

There are two news for this release:

1) a new “Pupunzi-ed” skin

2) a new service for storing and sharing your Gantts


Stylish and clean skin by Pupunzi

August is the calmest month of the year, most of our customers are in holiday and we had the time to look to our products under a different POV (3D docet Smile). Matteo (alias pupunzi) told me: “your Gantt sucks!”. I replied: “Ok, do it better…..if you can”. And he did it!


In the new skin, task statuses are more visible and everything uses media queries to better fit screen resolutions.

Another improvement is related to the scale and the splitter: positions are now stored on the project, so that you will open the Gantt on the same “visual” state.

We have also introduced a resource editor.

A nice feature is on project loading. Sometimes the json used for feeding the Gantt contains some errors; we made the loading process more robust to errors.

Some small bugs has been fixed too.


But the real great news is:


The on-line service

We worked on this component for a long time and we received lots of requests for implementing a “simple” service.

Here it is!  Now you can test it online, and moreover you can share Gantts with your friends and colleagues and embed as many Gantts you designed.

Nothing changed to the license that was and still remains MIT!

There is a simple login that uses most commons socials: Twitter, Facebook, Google or Linked-in


We use socials for authentication purpose only (no post, e-mail or spam), but you can help us keeping the service free by “spreading the word” Smile. Your project Gantts will be saved  to your account for a private access.


You can save as many Gantts you need. Here is a project list:


Project name is simply the name of the root of your Gantt.

You can show your Gantt to your friends/colleagues by using the “share” button:


Following the link anyone will be able to see your project (in read-only!), no login is required. Click here an example.

Moreover we created a widget to help including the Gantt in any page. Click on “embed”


Choose the size, and then copy and paste the code on your page. The widget will scale the content to adapt to the size.

If you want to export project data copy the share link

and replace “/project/” with “/data/”


Get more from your Gantt

As you know, a project is more than a Gantt, and mostly you get your project done by collaborating in team.
The free online Gantt service, is part of Twproject, a complete and easy to use project management solution where I’m the software architect.

You will find there in use several of my JavaScript components whose development I often describe on this blog.

With Twproject you can manage projects, tasks, issues, time tracking, resources, has powerful reports, shared agendas and lots more.

We have developed an easy to use import from Gantt so that you will see how your project works in a fully featured application.

Give it a try Smile

78 Comments leave one →
  1. Arun permalink
    December 8, 2014 19:20

    We are trying to implement a gantt chart on a sharepoint project and your chart appears perfect. The only issue we have is that we require the end users to be able to see if the milestones changes, what the previous milestone was and why it changed as a popup.Is there a way to add multiple milestones to a single task.

    • December 9, 2014 12:04

      What you need is to keep an history of task dates because for Twproject milestones always match a task start or end.
      In the complete Twproject product we have such feature, but it is maintained server-side.

  2. Bren permalink
    January 27, 2015 14:44

    Does the Twproject jQuery Gantt editor work within Joomla as a component or plugin or module?
    Thanks in advance.

    • January 27, 2015 14:58

      I’m sorry, no idea…. actually it is a javascript component so it should, but I’m not sure Joomla is compatible with jQuery.

  3. Bren permalink
    January 27, 2015 15:44

    I’ve seen quite a few jQuery extensions for Joomla and Joomla has some wiki info on jQuery. So, the question is how to implement Twproject jQuery Gantt editor into my Joomla site. Any suggestions for someone new to jQuery? I’m not afraid to experiment; as I’m a novice coder.
    Also, I actually discovered Twproject jQuery Gantt editor via GitHub related to Fabrik (a very nice Joomla DB management component); which I use within my site. It made me wonder if Twproject jQuery Gantt editor was written to work with Fabrik. Here’s the link:
    Thanks in advance.

    • January 27, 2015 16:02

      I never used Joomla.
      I’m sure you can use my component with it, but you should consider that once the component runs, you need to play with storing data server side somehow.
      If the Fabrik guys forked my component from gitHub, you should refer to them in order to discover the best way to use it with Joomla.
      Hoping this helps,

  4. Bren permalink
    January 27, 2015 16:13

    Thanks Rob. Thant’s a good suggestion. I’ll reach out to Fabrik to see if they can help.

  5. Bren permalink
    January 29, 2015 15:21

    Hello Rob.
    I’ve added the Gantt chart to my Joomla site using an iFrame to the gantt.html. Could I trouble you for any suggestions on how I could map gantt line item fields to my sites related MySQL database?
    Thanks in advance.

  6. January 29, 2015 15:26

    Yes, you can, but I’m not used to PHP programming, so I’ll do my best 🙂

    • Bren permalink
      January 29, 2015 17:59

      Thanks Rob. I look forward to seeing it.

  7. Bren permalink
    January 31, 2015 14:11

    Hi Rob.
    How is the PHP programming coming?
    Sorry, no pressure, I’m just looking forward to interfacing the gantt chart to MySQL DB.
    Thank in advance.

    • January 31, 2015 17:09

      No Bren, PHP will never coming. You have to code in PHP, I’ll try to answer your question 🙂
      Sorry for the missunderstanding.

      • Bren permalink
        January 31, 2015 17:50

        Oh ok.
        On another note; is there a way to add a column with the percentage complete on each task (versus just on the task graphic)?
        Also, can the sum of the percentage complete of sub-task items appear on the parent item? It seems redundant to have to manually adjust the percentage complete of a parent item that is full of sub-items.
        Thanks in advance.

  8. February 2, 2015 11:17

    Next version will have the progress column and tons of new features (estimated release middle March).
    Regarding the “propagation” of progress from children to parent is in general a bad idea for several reasons that can be summed up in this statement: “every child task can have different weight”. Only the PM can have the “feeling” of the progress.

  9. Bren permalink
    February 2, 2015 14:57

    Cool, thanks.
    On another note; I’m planning on adding some PHP for my MySQL DB interface. Could I trouble you to point out what line # is the code is the save button click event located within with gantt.html?
    Also, I changed a couple colors (like the weekends from pick to grey); but I’m having a hard time finding where the color of the orange save button is. Could I trouble you to point out where that in located; as I’d like to change the color to a light blue to match my website better.
    Thanks in advance.

  10. Bren permalink
    February 4, 2015 14:28

    Hi Rob.
    I found the save / load portions of code on the gantt.html file. I should of looked before asking. It would be nice if the JSON was also saved into a text or JSON file within the gantt folder (other than to the browsers local storage). Could I trouble you for some lines of javascript code to do so; as well as load from the saved file? I have experience with saving a JSON file to a MySQL DB via PHP; but Javascript is new for me and I’m trying to learn it fast with an e-course right now.
    Thanks in advance. I hope to hear from you soon.

  11. Bren permalink
    February 5, 2015 14:57

    Hi Rob.
    In regards to the new version in March; it would also be great to see a column for material cost. I look forward to seeing the next version.
    Thanks in advance.

  12. Bren permalink
    February 23, 2015 15:59

    Hi Rob.
    I’m still working on the PHP / MySQL interface; but in the mean time I have the Gantt Chart saving & reading the JSON to a text file on the server to allow for changes from multiple users (obviously not at the same time as the last to save will overwrite the other users changes).
    On another note; I’ve been trying to figure out how to adjust the color Status transition rules. I found where I can change the status pop-up names (like “active” and “completed”); but I can’t figure out how to change the colors. I’ve tried to figure it out with FireBug and searching for Hexcolors; but have not had any luck. Any chance you could steer me in a direction (like to a file and line of code)?
    Still looking forward to your March update.
    Thanks in advance.

  13. Bren permalink
    March 2, 2015 01:22

    Hi Rob.
    I’m still trying to figure out how to adjust the color Status transition rules. I found where I can change the status pop-up names (like “active” and “completed”); but I can’t figure out how to change the colors. I’ve tried to figure it out with FireBug and searching for Hexcolors; but have not had any luck. Any chance you could steer me in a direction (like to a file and line of code)?
    Thanks in advance. I hope to hear from you soon.

  14. March 2, 2015 09:46


    search for .taskStatus[status=STATUS_ACTIVE]

    Hoping this helps,



    • Elton Witbooi permalink
      March 10, 2015 12:26

      Hi Roberto,
      First; apologies for posting here.
      I have a “basic” newbie question about the jquery gantt editor. I would like to use it in my jsf/primefaces application but find that it never gets rendered correctly. I have included all your css and javascript files as per your documentation.
      My questions are:
      1. Can I use it in JSF/Primefaces?
      2. Can you help me have a look at what I may have done wrong. I’ll post the sources as you require them.

      • March 11, 2015 12:34

        Hi Elton,

        please post technical issues on the project page on github.

        1) I don’t know jsf/primefaces
        2) as from 1) probably not. Anyway a suggestion: check carefully that the template part is exactly like the one in gantt.html. Templates are inside the comment tags, so if you introduce line breaks or change the format it may cause the fail.

        Hoping this helps.

  15. Bren permalink
    March 2, 2015 15:34

    Thank you so much, Rob. The task status color changes worked out great.
    One more question, I would really like to change the format of the start and end dates from dd/mm/yyyy to mm/dd/yyyy. Any chance you could steer me in a direction (like to a file and line of code)?
    Thanks in advance. I hope to hear from you soon.

  16. Bren permalink
    March 2, 2015 22:44

    Thank you so much, Rob. That was easy. I really appreciate it.
    I have one more question today. This one might be built into the gannt chart already; but I just don’t know how to do it. Is there a way to link one task to another task; but have a large gap of days, weeks, (etc) between the 2 linked tasks (versus the following day)?
    Thanks in advance. I hope to hear from you soon.

  17. Bren permalink
    March 3, 2015 14:10

    Thank you so much, Rob. I thought there was a way. I just have to remember to add the colon and the same task number to apply it.

  18. Reinder permalink
    March 4, 2015 17:16

    This looks great, I’m testing it to integrate this with an angular project. Just wanted to let you know I could not sign in to the online demo using google plus.

  19. Bren permalink
    March 11, 2015 13:09

    Hi Rob.
    I hope all is well and I’m hoping to see your next version of the gantt chart; which you mentioned you should be done with by mid-March.
    On another note; I’m interested in trying to get the gantt chart print out on 1 large 11×17 page (instead of 2 pages). Any chance you could steer me in a direction (like to a file and line of code)?
    Thanks in advance. I hope to hear from you soon.

    • March 11, 2015 14:50

      We will probably delay the release (we will release it with the new Twproject version) up to June.
      I never printed on a page larger than A4. In order to keep everything on the same page, check the ganttPrint.css, in particular

      page-break-before: always !important;

  20. Bren permalink
    March 11, 2015 15:49

    Bummer on the delay.
    Cool, I’ll check out ganttPrint.css and see what I can do.
    Thank you, Rob. You have a great day.

  21. Bren permalink
    March 12, 2015 03:09

    Hi Rob.
    So, I followed your suggestion; which removed the page break; but the the columns were still above the gantt chart. So, I made a couple other changes to ganttPrint.css and got the printout very close to what I’m wanting; with the chart beside the task columns. There is some slight overlap of the gantt chart on top of the resources column. Any suggestions on how I could show the resources column without the overlap?
    Also, it would be nice if the print out started the gantt chart with today (instead of the start of the 1st task item). Any suggestions on how I can have the print out start the gantt chart from today (like how the gantt.html first displays on load)?
    Thanks in advance. I hope to hear from you soon.

  22. Bren permalink
    March 17, 2015 16:52

    Hi Rob.
    I’m still stuck on how to print out the Gantt Chart (graph portion) starting with today (instead of starting at the begining of the year when the 1st task starts). Any chance you could steer me in a direction (like to a line of code withn the ganttPrint.css)?
    Thanks in advance. I hope to hear from you soon.

    • March 18, 2015 09:24

      Have a look to centerOnToday function and before to print try to set a negative margin (eventually remove from print css the margin override)

  23. Bren permalink
    March 19, 2015 14:00

    Hi Rob.
    So, I found the centerOnToday function within the ganttDrawer.js file. Are you suggesting that I add the following to the gantt.html file?
    var x = Math.round(((new Date().getTime()) – this.startMillis) * this.fx)-30;
    If so, could I trouble your for a suggestion on how do I apply x to the ganttPrint.css to set the negative margin?
    Thanks in advance. I hope to hear from you soon.

  24. Bren permalink
    March 20, 2015 20:33

    Hi Rob.
    So, am I headed in the right direction with trying to get the gantt to print with starting with todays date (as mentioned in my previous reply)? If so, could I trouble your for a suggestion on how do I apply x to the ganttPrint.css to set the negative margin?
    Thanks in advance. I hope to hear from you soon.

  25. Bren permalink
    March 22, 2015 15:00

    Hi Rob.
    I tried something different. I removed a bunch from the ganttPrint.css and only left the following:

    .noprint {
    display:none !important;

    font-family: arial;
    font-size: 12px;
    margin: 0px;
    color: #000;
    overflow: visible!important;


    width:98% !important;

    I like the way this looks; as it provides a nice 3 week look ahead. The problem is that the print out cuts off the rest of the gantt chart and table as it continues down the page.
    I would be perfect if it could continue with the rest of the task items down the page.
    Any chance you could steer me in a direction (like some code to add to the ganttPrint.css)?
    Thanks in advance. I hope to hear from you soon.

  26. Bren permalink
    March 26, 2015 14:11

    Hi Bob.
    I got the print out of the gantt chart to look the way I needed. It looks great; but the grey header row (start, end, dates) and the grey task description that appears after each gantt colored chart line are too light on the print out. Any chance you could steer me in a direction to darken these to something closer to black (like to a line of code withn the ganttPrint.css)?
    Thanks in advance. I hope to hear from you soon.

  27. Bren permalink
    May 25, 2015 13:28

    Hi Bob.
    I’m using the “canWrite” = false for some task rows that the user shouldn’t be changing. It’s working well; but this makes this task row too light of a font color. I would like to do something different and make these rows appear black & bold.
    Any chance you could steer me in a direction to make the “canWrite” = false task rows appear black & bold (like to a line of code within the gantt.css)?
    Thanks in advance. I hope to hear from you soon.

  28. Bren permalink
    May 25, 2015 15:11

    Thanks Bob. That worked great.
    Any news on the next update? You mentioned possibly June.

  29. Garrick permalink
    July 7, 2015 11:01

    Hi Bob,
    Could I separate the gantt.html into two page(one is GridEditor,another is Gantt Chart)?How can I do that?

    • July 7, 2015 12:39

      Hi Garrick
      Uhmmmm. It seems very hard. Grid and gantt are tightly linked.
      Probably the easiest approach could be hiding on part at time.

  30. Garrick permalink
    July 15, 2015 08:29

    Hi Rob
    Is it reasonable to disable Grid scrolling?
    How could I enable Grid scrolling?

  31. December 21, 2015 11:37

    Hi Rob!

    Is there any know issue with the Gantt not loading correctly in a tab that’s not in focus when the page loads?

    • December 21, 2015 12:36

      Indeed not.

      • December 21, 2015 12:40

        Thanks for the reply!

        The thing is that it loads all the resources from the server and there are no console errors, but some part of JS doesn’t work well, for example, the part that sets the table divider in inner HTML. Only when i click the divider, the left part “draws”, but there is no right part of the Gantt. When i zoom in/out, the right part shows… Weird.

  32. December 22, 2015 14:31

    Dear Rob,

    I see there’s a limitation of 30 tasks per project.
    How can I alter that option? Couldn’t find the definition in your source…

    Thanks in advance!

  33. December 22, 2015 15:25

    There is no limit, it you starts with 30 empty lines, but you can add as many sub-task you need.

  34. December 23, 2015 19:17

    Evening Rob,

    I see my Chrome Canary’s console saying “SVGElement.offsetParent’ is deprecated and will be removed in M50, around April 2016. See for more details.
    base.js:3467 SVG’s SMIL animations (, , etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.”

    Does this mean our gorgeous Gantt will simply die in next 4-5 months?

    • January 12, 2016 17:59

      this is not an issue of the Gantt by itself, but it comes from jQuery 1.8.3
      I had a new version that uses jQuery 2.1.3 with no issue, but I’ve not time to release it 😦
      I hope to release a new version soon; stay tuned.

  35. Lucian permalink
    January 14, 2016 17:15

    Does jQuery Gantt support “off days” for resources? or is there a workaround for this?
    PS:I need to modify the program in order to show a Resource graph, where any task is shown as a child of the parent(the resource), any indication where I need to start looking?

  36. guy permalink
    February 9, 2016 12:53

    Does this library support multiple tasks on the same row? This way it could be used as a timeline component as well.

    • February 9, 2016 13:04

      Strange question 🙂
      Usually on Gantt every task is on a different row.
      The answer is: no.
      This is mainly an editor, you cannot adapt it for timeline visualization.

  37. Eric permalink
    April 7, 2016 19:15

    Very cool Gantt chart, however, if you have 50,000 tasks it attempts to render every single row, and draw the entire SVG map!
    Have you considered implementing a simple clipping algorithm so that items not visible are quickly discarded and not rendered??

    • April 11, 2016 11:59

      If you have 50.000 tasks……. this is not the right component.
      Yes, I considered such solution, but considering that our standard project size is less than 100-200 tasks it fits perfectly our needs 🙂
      Anyway is you like to improve the component you could contribute branching it on github.
      If your changes will result well identified and not-invasive I’ll be happy to merge the source code.

      • Shashi permalink
        April 11, 2016 12:37

        How can we add week-end and holidays also.
        i removed some line of code in date.js file but still it is not adding saturday, sunday and holidays too.
        at the time of showing end date is not matching to database actual date

  38. Shashi permalink
    April 11, 2016 12:37

    How can we add week-end and holidays also.
    i removed some line of code in date.js file but still it is not adding saturday, sunday and holidays too.
    at the time of showing end date is not matching to database actual date

  39. April 11, 2016 13:21

    have a look i18n.js file to the isHoliday() function

    • Shashi permalink
      March 9, 2017 08:33

      Hello Vidya,
      i saw that you have continuous conversation with Rob
      can you share one of my problem of Gantt chart to Rob or if you can help. you are mostly welcome.

      issue is,
      I have more than 100 record , but when i am modifying startdate /enddate /duration. it’s taking too much time to update its all parent from last to first.
      I have been modified Gantt chart very much like, I added two dropdown to select assign user to each task,
      Progress and Budget column of each task.
      but only when modifying dates, it’s taking too much time.

  40. Vidya permalink
    August 25, 2016 06:31

    Hi Rob,

    Is there a way I could do filtering based on a column (for Ex: Status) ? I mean , if i have a hover dropdown control in GanttButtons and when i select a status based on that the records in the Gantt to be filtered. It would be great if you can provide direction as to which file I need to look into. Thanks for your help !

    • August 25, 2016 09:21

      filtering is not supported.
      I see a couple of main problems implementing this feature:
      1) row numbering: have a look to collapse feature, probably will give you some hints
      2) children: if a child task match the filter but parent not; what to do?
      2) dependencies: when you filter you will need to hide rows, how to manage links?


      • Vidya permalink
        August 25, 2016 10:57

        Thanks so much for the quick reply Rob. Let me explain the scenario which we are planning to implement,

        Create one task for a Project with different phases/milestone levels for it .Indicate different Phase start and end dates in the same project Gantt rectangle something like

        Project will have a Gantt with 3 colors from Aug 1 to Sep 30
        Phase1 : Aug 1 2016 to Aug 10 (Indicate that portion of Gantt with say Green Color)

        Phase2 : Aug 15 2016 to Aug 30 (Indicate that portion of Gantt with say Purple Color)

        Phase3 : Sep 1 2016 to Sep 30 (Indicate that portion of Gantt with say Yellow Color)

        Instead of having a Parent/Child relationship , can we represent it this way by tweaking the code ? Is this possible at all ?

      • August 25, 2016 11:47

        this could be a solution, but it not a gantt 🙂

        Of course you can tweak the code…. lot of tweak 🙂

        2016-08-25 10:57 GMT+02:00 Eltit Golb :


      • Vidya permalink
        March 8, 2017 15:10

        Hi Rob,

        We have customized this control in such a way that for every task we have multiple gantt bars(min 7) with different colors are drawn.We are having more than 100 tasks for a Project(every project is a row ) and
        While Gantt is getting generated Screen is getting Hang in IE
        Please help us in resolving screen hang issue

  41. Vidya permalink
    September 3, 2016 05:25

    Hi Robert,

    Im trying to understand the Start Date and End Date formating in the sample data given
    For taskid = -1 you have given Start Date as 1396994400000(milliseonds) and end date (1399672799999) duration : 21 days

    When I try to convert dates to normal date format it shows as Wed Apr 09 2014 06:00:00 GMT+0800 but in gantt it shows as 05/09/2016. I’m not really sure how this calculation is done ? It would be great if you give some pointers. I have to work with around 10 datetime fields for each task, this understanding is very important for me.

    Note: My Time Zone is UTC+8 (Kaulalampur,Singapore)

    Thanks much

  42. September 5, 2016 10:04

    In Twproject “duration” is calculated in working days, so, by default, sat and sun are skipped.

  43. nonsaprei permalink
    September 16, 2016 17:52

    there’s something I don’t get: why does the left side only have a maximum number of empty rows? I mean the ones you can edit to add more items.
    wouldn’t it be better to always leave at least 1 blank row? I have a gantt with more than 50 rows and for this reason I can’t add any by hand, because there are no more empty rows at the bottom.
    I know there are two buttons to add a new row but neither of them adds a new one to the bottom, at level 0. it’s either above the current row or below it but at level 1 (or better, “level of the current row” + 1).
    I expected it to act like in SQL Server Management Studio or SQL Developer in which a new empty line is always present at the bottom, to add a new row.

    • September 19, 2016 09:08

      Hi Pietro,
      for my purposes 50 rows are more than necessary :-).
      Moreover, this is a free component released open source, so that everyone can contribute getting it better.
      If you don’t like the behavior, just put your hands on the code and change it.
      P.S.: SQL Server Management studio is developed with a larger team and more budget.

      • nonsaprei permalink
        September 19, 2016 09:23

        yeah I’ll probably edit it but it seemed such a no-brainer to me, that I was surprised that it wasn’t so.
        I hope I didn’t sound aggressive or something.

  44. September 19, 2016 07:52

    Hi Roberto,
    I need to attach files to each task in the gantt,please can you tell me how can i do this?I know it’s like adding a new column and adding a new field to the json data.But can you tell me which all files need to be edited for this to happen?

    • September 19, 2016 08:56

      In order to attach files, you will need to upload them to the server.
      It is not so easy as it seems. You will face with FormData JS object and browser compatibility very soon 🙂
      Have a look to one of the thousands html5 upload components in order to understand how it works.

      Good luck!

  45. September 19, 2016 08:11

    I am facing an issue while loading the saved resources for tasks.The resources added are shown in the listing of all tasks,but when i try the edit of a task,there is no resource selected there and the console shows an error “jquery.JST.js:99 JST error: ASSIGNMENT_ROW is not a function”.Please reply back it’s urgent

    • September 19, 2016 09:00

      Probably task assignment data are corrupted, incomplete or invalid. Check that resources id matches with the one reported on assignment.

  46. Vidya permalink
    December 21, 2016 11:11

    Hi Rob,

    I’m trying to understand what is the exact purpose of these below utility functions . Im sending the inputs in milli seconds ,for ex: start =1481241600000 end = 1482969600000. I want it to display in the same way, but when the code runs, it adjusts the end date and changes it. Could you please help me understand what exactly does these functions do and which scenario this would be useful ?

    function computeStartDate(start) {
    var d = new Date(start+3600000*12);
    d.setHours(0, 0, 0, 0);
    //move to next working day
    while (isHoliday(d)) {
    d.setDate(d.getDate() + 1);
    d.setHours(0, 0, 0, 0);
    return d;

    function computeEndDate(end) {
    var d = new Date(end-3600000*12);
    d.setHours(23, 59, 59, 999);
    //move to next working day
    while (isHoliday(d)) {
    d.setDate(d.getDate() + 1);
    d.setHours(23, 59, 59, 999);
    return d;

  47. December 21, 2016 12:52

    Task duration is in workind days and a task at least last for one day, so the code set the start date to the first millisecond of a day, increment the date in workinf days then set the end to the last millisecond.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: