Ramón Avendaño`s TGantt design

[Antonio Linares]

Class TGantt from Ramón is really simple and such simplicity makes it be very flexible. In fact all the modifications implemented after the original design, are simple details with no relevance and that are not needed really

A TGantt object is a control (inherits from TControl) which manages an array of items. Those items have coordinates and they get painted on the surface of the TGantt. Besides that, we can use the mouse to move those items and to redimension them. Thats all!

What we may want to do with those items is our matter (as programmers). Lets review a first example very easy to use TGantt so we understand it:

testgant.prg

Code: Select all  Expand view

#include "FiveWin.ch"
#include "Gantt.ch"

function Main()

   local oWnd, oGantt

   DEFINE WINDOW oWnd TITLE "Class TGantt test"
   
   @ 1, 1 GANTT oGantt SIZE 300, 300 OF oWnd
   
   AAdd( oGantt:aItems, {  10, 10,  30,  80, CLR_BLUE } )
   AAdd( oGantt:aItems, {  40, 30,  60, 110, CLR_RED } )
   AAdd( oGantt:aItems, {  70, 50,  90,  90, CLR_GREEN } )
   AAdd( oGantt:aItems, { 100, 10, 120,  80, CLR_CYAN } )
   AAdd( oGantt:aItems, { 130, 50, 150, 120, CLR_YELLOW } )
   
   oWnd:oClient = oGantt

   ACTIVATE WINDOW oWnd

return nil

As you can see, we define 5 items for this Gantt, and we assign a color to each one. We could assign much more data, but for now, lets focus on the main idea. The result looks this way:



Moving and resizing the items:


You can download the EXE from here, so you can move and redimension the items with the mouse. Full source code included:
http://code.google.com/p/fivewin-contributions/downloads/detail?name=gantt.zop&can=2&q=

[Rimantas]

Class TGantt from Ramón is really simple and such simplicity makes it be very flexible. In fact all the modifications implemented after the original design, are simple details with no relevance and that are not needed really

A TGantt object is a control (inherits from TControl) which manages an array of items. Those items have coordinates and they get painted on the surface of the TGantt. Besides that, we can use the mouse to move those items and to redimension them. Thats all!

You can download the EXE from here, so you can move and redimension the items with the mouse. Full source code included:
http://code.google.com/p/fivewin-contributions/downloads/detail?name=gantt.zop&can=2&q=

Wowwww ! Thanks to you Antonio ! It's very cool !

[Antonio Linares]

Now lets consider that we want to represent some "month" related data. We have implemented a Method GridMonth() in Class TGantt that shows a usefull grid

Code: Select all  Expand view

METHOD GridMonth() CLASS TGantt

   local n, nWidth := ::nWidth() / 31
   
   MoveTo( ::hDC, 0, 18 )
   LineTo( ::hDC, ::nWidth, 18 )
   
   for n = 1 to 30
      MoveTo( ::hDC, nWidth * n, 0 )
      LineTo( ::hDC, nWidth * n, ::nHeight )
   next  
   
   for n = 1 to 31
      ::Say( 3, 7 + ( ( n - 1 ) * nWidth ),;
             If( n < 10, " ", "" ) + AllTrim( Str( n ) ),,, If( ::oFont != nil, ::oFont,), .T. )
   next    

return nil

We modify our first example this way:

Code: Select all  Expand view

#include "FiveWin.ch"
#include "Gantt.ch"

function Main()

   local oFont, oWnd, oGantt

   DEFINE FONT oFont NAME "Verdana" SIZE 0, -10

   DEFINE WINDOW oWnd TITLE "Class TGantt test"
   
   @ 1, 1 GANTT oGantt SIZE 300, 300 OF oWnd
   
   oGantt:SetFont( oFont )
   oGantt:lGridMonth = .T.
   
   AAdd( oGantt:aItems, {  30, 10,  50,  80, CLR_BLUE } )
   AAdd( oGantt:aItems, {  60, 30,  80, 110, CLR_RED } )
   AAdd( oGantt:aItems, {  90, 50, 110,  90, CLR_GREEN } )
   AAdd( oGantt:aItems, { 120, 10, 140,  80, CLR_CYAN } )
   AAdd( oGantt:aItems, { 150, 50, 170, 120, CLR_YELLOW } )
   
   oWnd:oClient = oGantt

   ACTIVATE WINDOW oWnd

return nil

And here we have the result:


EXE and full source code:
http://code.google.com/p/fivewin-contributions/downloads/detail?name=gantt2.zop&can=2&q=

[TimStone]

Of course you will need a "legend" that defines each bar.

I created a modified chart using xBrowse with arrays. The data columns provide the necessary info on the left, and a color bar fills the "status" chart to the right.

In any case, you will need a descriptor field to define what the chart means, not just the columns.

[James Bott]

Antonio,

Thanks for the tutorial. Very useful.

Regards,
James