Live demo: dynamic time scale for the Gantt view

After this week’s live online workshop dedicated to sparklines, next week will be the turn of the Gantt view.

I am still working to finalize the customizations, but here is a preview to show you what you can expect: 

On this mockup, play with the slider to change the time scale. There are three levels: the default day and week levels, plus a custom month bar. The day and week levels are only displayed when the scale is big enough (x10 for weeks, x15 for days).

You’ll also notice a red bar in the Gantt, this is to indicate an overdue task (not completed, and due date before today).

Anything else you’d like to see on Gantt charts? Let me know!

23 thoughts on “Live demo: dynamic time scale for the Gantt view

  1. Pingback: Tweets that mention Live demo: dynamic time scale for the Gantt view « Path to SharePoint --

  2. Pingback: uberVU - social comments

  3. Is there a way to look at over all project progress rather than individual task progress. What I mean is, in the Gantt chart view, the title shows all tasks in all projects, I was wondering if there is a way just to look at the project progress and then when you click on the project you can look at the task progress in each project. I would love to see if that is possible with customizing OOTB sharepoint and without using code.


    • Priya: this is not available OOTB. You would need to go through all individual tasks to sum all completed vs. not completed days.
      This could be done on the Gantt view for example, by calculating for each task the size of the task bars (dark blue for the completed part vs. light blue).

  4. WOW! Your work is really smashing!! This is what I really want for my website. By the way, is it possible to add and show a note for each event / each project when I point the visual status. Now when I point the visual status on your preview site, it only shows the title but I would like it to show a summary of project etc which I can customize. Thank you,

  5. Pingback: Links (12/3/2009) « Steve Pietrek-Everything SharePoint/Silverlight

  6. I had a jQuery time scale already but I like this implementation better as it improves the time scale definition vs. mine which only increases the cell width. Nice!

    My only other complaint about Sharepoint gantt web parts is you cannot pass a filter or apply a filter in the gantt view (other than on the enumerated task list below the graph). If there was some way of fixing this, I’d be forever grateful.

    • Chris, I have added a dynamic filter to the demo (the input field is above the task names). Let me know what you think!
      Note that such dynamic filtering is heavy, and will work better in recent browsers (IE 8 for example).

      • I think it has potential to do what I want. For my application, I am trying to finalize a centralized project review system. All the project lists are on one page and the goal is to have a filter that allows distillation of project data in each list.

        Unfortunately, the OOTB Gantt chart does not take any external filters. Is it possible to use the jQuery dynamic filter to pull data from the external filter? Can the dynamic filter work against any of the task fields (rather than just the task description)?

  7. Pingback: Gantt demos – Update « Path to SharePoint

  8. Pingback: Live-demo-dynamic-time-scale-for-the-Gantt-view : Sysmaya - Blogs do Brasil

  9. Are there code examples for the GanttTimeScale view? This is a perfect solution for my current Gantt view display problems.

  10. Great customization. Just what I was looking for. I need to change our Gantt view to show only moths. The slider is not a requirement. Could you tell me where I can find the code to make the dates change to moths? Did you apply the change using content editor webpart? When I look in the code I can see that the moth labels are already in the souce so I thinkthat this is not done using javascript?

  11. Hi Christophe,

    First a big up for the job done, this is terrific 🙂
    I’d like to know if by any chance you’ve planned to release the code as for your previous GANTT projects ?
    Next gen tip: You should allow to choose the displayed start month (/week) for long running tasks/projects…

  12. Hey Christophe. I was hoping this dynamic time scale could solve my gantt problems. Im looking to display a year (maybe more) on my gantt chart by month, like shown above. I see that you have the code for purchase. Can you give me some more details? Thanks.

  13. Hello Christophe,

    This is perfect example for one of my implementation. It would be really good if you could share the code for MOSS 2007 version?

    Waiting for an earnest reply,

  14. Hi Cristophe,

    Your cewp script look excellent! There is a way to recieve the one related to dynamic time scale for sharepoint 2007. I am looking for this


Comments are closed.