Projects

Three views of one plan. A Gantt chart for when the work happens, a PERT chart for the order it has to happen in, and a task board for where each piece of it has got to. All three read the same list of tasks and links and schedule it with the same arithmetic — the critical-path method over a working calendar — so wherever you change the plan, the other two agree.

The same scheduling engine is in the WPF and Windows Forms editions of these charts, held to the same test cases, so one plan gives the same dates in a browser and on the desktop.

One plan, three views

An office move, planned. Drag a bar on the Gantt chart, stretch it by its end, or draw a link from the dot at its end to another bar; drag a card on the board to another column or person. Everything that depends on what you moved moves with it, and the critical path — the tasks with no room to slip — is redrawn in all three views.

The keyboard does all of it. Tab into the task list once. The arrows move between rows; F2 edits a cell; Shift+→ moves a task a working day and Ctrl+Shift+→ makes it a day longer; and links are typed in the Predecessors column — 2, 3SS+1, 1.4FF-2 — so a reader who cannot drag a line can still draw one.

The same plan as a task board, split by who is doing it

A column is a status and a lane is a person. Moving a card changes those fields on the task, so the Gantt chart above, given the same list, sees the move. In progress has a limit of three and shows its count against it. Space picks a card up from the keyboard; the arrows carry it, with Shift between lanes; Space drops it and Esc puts it back.

None of the three owns the plan. Every edit is a cancelable event — bmxTaskChange, bmxLinkChange, bmxCardMove — that carries the whole list as it would be. This page listens for them and assigns that list to all three components, which is the whole of the script that keeps them in step. A page that wants to refuse a change calls preventDefault(); a rule that should refuse a drag while it is still in the reader's hand goes in canChange.

The order the work happens in

The PERT chart of the plan above, kept in step with it. Each box carries its critical-path arithmetic: earliest start, length and earliest finish across the top, latest start, float and latest finish across the bottom. Change the plan above and watch the float change here.

The arrows are a picture, so each box says what they mean. A box is announced with its dates, its float, what it follows and what it leads to. Tab in once; → goes to the next piece of work, ← to the one before, and ↑ and ↓ along a column. Drag the background to pan and hold Ctrl with the wheel to zoom.

Eight hundred tasks, no waiting

A generated programme of forty workstreams and eight hundred linked tasks. Only the rows and the header dates in view are rendered, so it scrolls as smoothly as ten, and the schedule behind it is worked out in a few milliseconds. Try the zoom, then export or print the whole plan — every row, not just the ones on screen.

Export SVG

Export PNG

Dates are calendar dates, not instants. Every date in and out of these components is a plain YYYY-MM-DD, with no time of day and no time zone anywhere in it, so a task that starts on 3 March starts on 3 March in London, in Sydney and on a server rendering in UTC — across a clock change and in a browser whose clock is wrong. Durations and lags count working days, which is what a planner means by them.