The seat of your Gantts

ctodx
19 July 2007

I suppose there are two main reasons for talking about Gantt charts in XtraCharts: the first is about breadth of functionality and the other is about elegance; although in the end we found that having to encapsulate the breadth of functionality also meant thinking about and encompassing elegance.

Hmm, that sounds a bit wishy-washy, so let me illustrate. When we wrote the Gantt charts in XtraCharts, we wanted to create something that could stand alongside Microsoft Project, not just be an ordinary range chart that happened to have arrows between ranges.

So that meant embodying the whole concept of time in the chart. We needed to indicate "today". We needed to be able to show not only projected or budgeted time, but also elapsed time. And not only time: we also needed to encapsulate the notion of dependency between items so that we could draw connecting arrows properly.

Take a look at this simple Gantt chart.



Although the data it shows is not that interesting (after all it shows a waterfall view of development, natch), take a moment to look at the various components of the chart, especially with attention to the visual detail.

First thing to realize is that the background of the charts is low contrast. The background shows a grid of lines, but it doesn't hit you over the head with it. The lines are there and can certainly be discerned, however they're just not that important compared with the information the actual chart is showing and so they blend into the background.

Second thing to notice is how we've incorporated the notion of time passing. There's a thin line indicating "today". Each different project has two pieces of information that are displayed: the projected time as a brown bar and the elapsed time as a green, thinner bar superimposed on the brown bar. Both of these colored bars are not painted in flat colors, but as gradients to give that subtle 3D look. It doesn't look like much, but believe me, these days your users will appreciate this effect. They might not be able to articulate exactly why they'd prefer a gradient to a flat look, but prefer it they will.

Now look at the two different ways we're showing dependencies. First of all the "Feature Planning" task must complete before the three features are started. Note how the three arrows descend from a single line in order to reduce visual noise for information that's insignificant. Finally note how the final task of all, "Testing and Bug Fixing", only takes place after the features are all done and so all the arrows join into one. It is attention to detail like this that we feel differentiates our charting product from our competitors.

This attention to detail is everywhere in XtraCharts. I'll be pointing it out in further blog posts as I discuss some of the other new features.

2 comment(s)
James
James

The functionality is fantastic.  And I agree with you that users want that.  What I would like to see is more gripping styles like those provided by dotnetcharting, that grab the user and make them want to just sit there and play with it.

That being said, your functionality is FAR better than dotnetcharting on gantts that's for sure!  We're about to take out our home grown gantt and put yours in in it's place specifically because of the functionality. So well done!

Question though, how does one do "start dependant" items? You've outlined "complete dependant" as in it has to be finished before the others can get started, but not how to do a start dependant (you have to at least started the parent before the children can be started).

Thanks!

20 July, 2007
Alex Danvy
Alex Danvy

Hi,

Is there any end-user interactions out of the box ? Things like touching the end of a task to "see" what happen.

How could I display both time and load ? I only see time on this chart. Example : A task might be planned 5 days and completed 4 days but effectively achieved 30%, meaning it will be late.

What happens when a task is late ? Completed depending tasks should start accordingly.

23 July, 2007

Please login or register to post comments.