My team is working on an app in java which is pushing projects through a business process management tool. Each project contains about 25-30 tasks which need to be completed in a certain order.

Among those tasks are about six or seven which represent 'workback date events' which each need to be completed by pre-defined sequential deadlines

So in our database we have about 7 tasks linked to every project, each having a deadline, and a flag which tells us which of the events has been completed.

What the business is interested in is having a graphical interface which shows a user:

  • a list of the projects the user is involved in
  • each list item showing where the project is in the work-back schedule
  • color coding to display which projects are behind, or near behind schedule
  • ideally a way to move the deadlines around with the interface, but we'll call this a nice to have

So far I've been looking into some javascript charting libraries, such as chart.js, although it doesn't look like the interface offers exactly what we want, as many of these libraries seem to be purely mathematical.

I feel like we could accomplish this easily enough with an unaesthetic table, but we'd like to get a pretty good look out of the end feature.


I would suggest using the Google Charts API to create a timeline plot - e.g.:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
<script type="text/javascript">

function drawChart() {
  var container = document.getElementById('example2.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

    [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
    [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
    [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);


<div id="example2.1" style="height: 200px;"></div>

Creates: enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.