Gantt Charts

Gantt Charts provide a simple, yet very effective presentation scheme for items arranged (in parallel) along a "time" axis with some possible "slack" time-windows between them.

We assume that you know what they are and how they are used. The sole purpose of this discussion is to tell you something on how we support these beauties at tutOR. In other words, we shall show you how to draw Gantt Charts on board tutOR. The following chart will serve as an example.

Critical Activity

Non-critical activity

Total float

Purchasing

   

Quality Control  

     

Assembling

     

Transporting

   

Training

     

Production

       
Time (days)

1

2

3

4

5

6

7

8

9

1
0

1
1

1
2

1
3

1
4

1
5

1
6

1
7

1
8

1
9

2
0

2
1

2
2

2
3

2
4

2
5

2
6

2
7

2
8

2
9

3
0

3
1

3
2

3
3

3
4

3
5

3
6

3
7

3
8

Now, this should be a straightforward taks had we chosen to use "real" graphics. But since we adhere to the "Light is Beautiful Principle", we cannot do that: we have to draw the chart without using "real" graphics.

We thus divide the task into two subtasks: the first involves using "text" to specify the color of the cells of the table, and then the second merely translate the text "code" into "real" background colors.

In the case of our example, the "text version" will look like this:

Critical Activity

Non-critical activity

Total float

Purchasing

Quality Control

Assembling

Transporting

Training

Production

Time (days)

1

2

3

4

5

6

7

8

9

1
0

1
1

1
2

1
3

1
4

1
5

1
6

1
7

1
8

1
9

2
0

2
1

2
2

2
3

2
4

2
5

2
6

2
7

2
8

2
9

3
0

3
1

3
2

3
3

3
4

3
5

3
6

3
7

3
8

To ease the input chore we attach the colors to radio buttons and add a "Clear" button to the easel. The layout is thus as follows:

Critical Activity
Non-critical activity
Total float
Clear

[1]

Purchasing

[2]

Quality Control

[3]

Assembling

[4]

Transporting

[5]

Training

[6]

Production

Time (days)

1

2

3

4

5

6

7

8

9

1
0

1
1

1
2

1
3

1
4

1
5

1
6

1
7

1
8

1
9

2
0

2
1

2
2

2
3

2
4

2
5

2
6

2
7

2
8

2
9

3
0

3
1

3
2

3
3

3
4

3
5

3
6

3
7

3
8

Click two cells on the easel and JavaScript will fill the rectangle defined by these two cells with the text code for the selected color. We trust that you have figured on your own that c = critical, n = non-critical and f = float.

In any case, once this "text" version is ready for the JavaScript code will translate the text-code colors into proper background color.

Paint your wagon, Leo!