« SuperNTF 0.9.5 Released! | Main| Blogger Update: "Real" Gantt Charts in Notes Views »

Blogger Recap: Gantt Charts in Notes Views

QuickImage Category   

Updated: As Theo points out in the comments to this post, he has improved on his technique a bit lot, doing things like embedding percentage text into the actual graphic images.  I've edited the post slightly to reflect this...

Chris Blatnick started it with his very clever view column trick for displaying rudimentary gantt charts in Notes views. Chris' approach involved the use of color columns, and no image resources.

A picture named M2

Theo Heselmans then followed up with an alternate approach using 10 different image resources (for 10%, 20%, etc.).  Theo's approach doesn't allow for the *exact* percentage to display as text *inside* the colored bar as Chris' does, but he can embed text in the actual graphic, as you can see in the thrid example below.  His image resource technique can also be enhanced slightly to do something Chris's apprach can't.  But more on that in a moment.

A picture named M3

Vitor Pereira then picks up the thought and shows a technique that also uses image resources, but instead of 10 different ones, requires only one and repeats the image based on the corresponding percentage number.  If nothing else, Vitor's technique highlights a little known capability of view icon columns.  Namely, that you can specify a list of values in the column and make multiple images appear in a SINGLE column.  Amazing, but...

A picture named M4

Unfortunately, the multiple-image-in-a-single-column technique is rendered all but useless because when you mouseover the image(s), up pops a LIST of values for all icons, not just the one your mouse happens to actually be pointing to.

A picture named M5

Even if you rename the image resources to something human-friendly like "Person", "ACL", and "Documents" in the above example, your mouseover would still be highly confusing to users.

To see some ways to improve on these techniques, click "Read More".

So my humble contribution to the enlightened discussion of this topic is simply a take off on Theo's multi-image technique.  I would suggest renaming the images from "Bar0.gif", "Bar8.gif", etc. to "0%", "0-10%", "70-80%", so that you at least get meaningful mouseovers (if a little imprecise).  I suppose you *could* create ~100 images for each of the percentage numbers, and get better precision, although I would be reluctant to pursue such a "brute force" approach.

Looking at these various approaches to the same problem, I think Chris has come up with a real winner of a technique, the advantages of which are:

  • No dependencies on other design elements - highly portable
  • Printable - sometimes view icons print funny, and mouseover text won't print
  • Showing the percentage figure inside the graphic presentation is pretty slick

The only downside I can see to Chris' color column approach is that if you do employ the inline percentage text, then the "50%" bar is the same length as the "40%" bar, which could be misleading for those doing an "at a glance" assessment of progress.  It might be worth experimenting with putting the first two digits in one column (right justified), and the "%" (or "0%" in the 100% case) in the next column (left justified).  That way the text could "straddle" the color change.  This would make the column sizing a bit less forgiving, but not too much so.

Then again, if you don't care about the inline percentage text thing and just want the most attractive 3D/gradient/shaded bars you can find, Theo's technique will fit the bill very nicely, assuming you include some variation of my image resource naming suggestion.


1 - Nice recap!
I'm sure there are some more solutions out there I would certainly like to hear about.

2 - Kevin, I updated by blog entry a bit, showing some more attractive images. In Notes 6, there is no mouseover-text, and they print nice too. But I agree, putting the real % on top of the bar is cool.

3 - Bruce Elgort just made me aware of this - amazing example of community collaboration. And, a valuable addition to the bag of tricks for Notes Developers trying to wring everything they can out of the client. Thanks everbody!

Tools I Use

Idea Jam

Subscribe to This Blog

 Full Posts  Comments

netvibes Add to Netvibes


Hosted by



This site is in no way affiliated, endorsed, sanctioned, supported, nor blessed by Lotus Software nor IBM Corporation, nor any of my past or future clients (although they are welcome to do so). The opinions, theories, facts, etc. presented here are my own and in no way represent any official pronouncement by me on behalf of any other entity.

© 2005-2021 Kevin Pettitt - all rights reserved as listed below.

Creative Commons License
Unless otherwise labeled by its originating author, the content found on this site is made available under the terms of an Attribution / NonCommercial / ShareAlike