Flex Gantt Chart Application

Filed under: Flash — Wrote by Campbell on Saturday, July 5th, 2008 @ 2:39 pm

Well for the past few months I have been contracting out on an interesting and challenging Flex application that is a part of a bigger site, projectmanager.com (not live yet). I was asked to build a Gantt Chart/Datagrid of the site allowing the viewing and editing of tasks in a project very similar to Microsoft’s Project. Infact one of the biggest challenges I faced was overriding Flex’s default behaviors to match MS Projects (especially key navigation for the data entry types).

This is why my blog has seen less posts than usual, and the New Zealand Flex User group meetings have been delayed a bit, and my girlfriend has been……..

The complete Application

Another Issue which has been raised on other blogs was the performance of the advanced data grid. And as you can see I have two instances to worry about (with linked selection, scrolling etc) Now this is by no means a simple application, but I found the performance barriers and had to work ways around them which led to the paging of the data. And I can tell you paging a Hierarchical collection (think a tree of tasks) is no easy feat. I look forward to the reports that <vector>’s in Flash player 10’s VM have a huge increase on performance and I may be pushing for the new player to be considered.

The control itself is tied into a much larger .NET website/application using WebOrbs .Net remoting, which bar a few hassles with earlier versions has been hugely successful, allowing me to work alongside the developers and deal with objects and structures in a common way and forgetting about the ushal serialization hassles or the prospect of having to deal with xml. Being RTMP and amf the comunications with the server are tiny in size and very fast to deal with once in the Flex application itself.

All of that out of the way it has some really cool features:

Changing the Datagrid columns

Picking the columns to display, all held in settings

Custom right clickCustom right clickCustom Right click

Custom right click menus for indenting, copying pasting tasks etc

Multi view Gantt Chart

Planned, actual and baseline data view

The Gantt Chart can have multiple views showing data for comparison ie the planned data verses the Actual data and the baseline (snapshot at a point of time) data.

Gantt Graph

The graph itself renders linked tasks, milestones and has drag linking

Dragging Task sliders

And as you would expect the tasks in the graph are all slider to adjust the timeframes and percent complete, and these all take into account resources holidays and Company working days (project Calendars) for calculations

Just the Data grid

Just the Gantt Chart

You can also pull the separators around that separate the Two data views and show just the Gantt Chart or the Data grid, if your just after data entry.

Assigning Risk Issues and Changes

And theres a “Task Information” panel with tabs for manipulating the data that corresponds to tasks.

All very cool Stay tuned for Beta releases soon :)

Update: Check out http://blog.projectmanager.com/ for more up to date news :)

14 Comments   -
  • Comment by Mitch Olson | July 6, 2008 @ 11:27 am

    Looks sweet matey – well done! I look forward to having a play. Another small step for Flex – giant step for Flexkind.

  • Comment by Tim Wilson | July 6, 2008 @ 1:01 pm

    Wow, looks amazing. Great functionality and great looking GUI design, well done :-)

  • Comment by Campbell | July 6, 2008 @ 1:16 pm

    Cheers Tim, though I cant take all the credit there, I was supplied with psd’s for the design (though took some artistic licsense in some areas when making the skin). The CEO on this project actually went down to pixel by pixel comparisons (psd vs flex skin) to check it.

  • Comment by Brett Rampata | July 6, 2008 @ 4:46 pm

    So nice to see. Would love to take a test drive!

  • Comment by Gareth Edwards | July 7, 2008 @ 10:02 am

    I like the interface, would be interested in having a chat about challenges you had building the UI, how many times did you have to refactor your layout? did you have it right from the start? Would be interested in the giving the UI a test drive for sure.

    Cheers
    Gareth Edwards

  • Comment by Campbell Anderson | July 7, 2008 @ 10:44 am

    Hi Gareth, I did alot of planning for the layout, and having spent alot of time in components I managed to know what to expect and nailed the layout very quickly. Skinning was pretty quick too as that has become a bit of a fortee’ of mine :)

    It was the hierarchical collections that gave me the headache’s.

  • Comment by eli | July 22, 2008 @ 8:49 am

    What you think of Gantt chart at http://www.yutiti.com?

  • Comment by John | September 24, 2008 @ 12:53 am

    Gantt chart looks great!
    Will it be available for others to use, or will your customer keep it for themselves only?

  • Comment by bona.shen | September 27, 2008 @ 10:16 pm

    It’s very nice.
    Hope the beta version for everyone.

  • Comment by Jonny Reid | October 21, 2008 @ 2:13 am

    Really nice looking implementation of a Scheduling Gantt chart :) . I have just been tasked with doing the exactly the same thing for my company and was wondering if you would mind me hitting you up for some advice some questions?

  • Comment by Campbell | November 22, 2008 @ 10:39 am

    John:
    Yep they will keep it for themselves. They are releasing a product with it.

    Bona:
    Yep Beta for free at projectmanager.com :)

    Johhny:
    Contacted you off list :) Cant say too much as its NDA area, but can point you in the right direction

    ELI:
    Awsome mate. Looks great. You made it for your own product?

  • Comment by heladio | August 3, 2009 @ 2:34 pm

    Hi, campbell. This is heladio from Mexico. Is the application ready? is a beta test available?

  • Comment by Campbell | August 8, 2009 @ 12:35 am

    Yep it has been live for a while now projectmanager.com :) New version of the Gantt (2.0ish soon)

  • Comment by Arturas | November 6, 2009 @ 11:43 pm

    Let me say you did a wonderful job with that Gantt component! it really looks, feels and actions superb. We are using some components by http://www.flexmonster.com I must show them your component :)

Leave your comment

© Flex developer, Campbell Anderson, from New Zealand – xsive blog -