What's the best way to programatically visualize a roadmap on the web?

Question

We have a list of deliverables in a database across a number of projects with the data points:

• Project
• Function
• Delivery Date

I wanted to figure out the best way of visualizing this on the web in some sort of timeline roadmap view. can anyone suggest any good ways of doing this? I

Ideally i would like to be able to click on item that can then drill down into a details page that we have fore each project description, etc. .

Answer 1

Use timeline web widget. It's free and open source.

Edit: you can play with the control with a Google Doc Spreedsheet if you are not sure to dive in yet http://spreadsheets.google.com/pub?key=pO3Ze62OAU2Ev1xfh3TWsWA

Answer 2

Have you tried Daypilot control? There is a free version, you can try.

Answer 3

Here's some tools that could be good for this kind of task:

Flash

• Flare
  • Something like this could work. You could put a timeline on the x axis. Perhaps you could group projects vertically by function.
  • This could be a good visualization if you wanted to show the number of person hours consumed by each project.
  • There is a timeline view in the demo

Javascript

• Protovis - This library is similar to Flare, but for Javascript
  • Look at this visualization
• ProcessingJS - This library has potential as a general visualization library.

Answer 4

Well it sounds like you are after more of a Gantt chart view, although if you just want to mark the date a milestone should be completed then a timeline would work.

Google Visualization API

First off I would be to take a look at the Google Visualization API. Specifically the annotated timeline visualization. This is actually very similar to the timeline used on the Google finance website. Using this view each project could be a horizontal line across the view, with the relevant milestones marked for each project. Note that the markers are interactive. Since this is all Javascript, you can also have cross-viz controls, so clicking something on the timeline, could alter another visualization on the same page for example.

You can actually try out different configurations of all the visualizations available using the Google Code Playground. This should provide you with an easy way to verify if this (or a different one) would meet your requirements.

I did some experimenting with the code playground. Try the code below if you want. You can copy/paste it into the playground code editor.

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Project');
  data.addColumn('string', 'title1');
  data.addColumn('string', 'text1');
  data.addColumn('number', 'Project');
  data.addColumn('string', 'title2');
  data.addColumn('string', 'text2');
  data.addRows(7);
  data.setValue(0, 0, new Date(2008, 1 ,1));
  data.setValue(0, 1, 1);
  data.setValue(0, 2, 'P1:MS1');
  data.setValue(0, 3, 'Project begins');
  data.setValue(1, 0, new Date(2008, 1 ,2));
  data.setValue(1, 1, 1);
  data.setValue(1, 4, 2);
  data.setValue(1, 5, 'P2:MS1');
  data.setValue(1, 6, 'Project begins');
  data.setValue(2, 0, new Date(2008, 1 ,3));
  data.setValue(2, 1, 1);
  data.setValue(2, 4, 2);
  data.setValue(3, 0, new Date(2008, 1 ,4));
  data.setValue(3, 1, 1);
  data.setValue(3, 4, 2);
  data.setValue(3, 5, 'P2:MS2');
  data.setValue(3, 6, 'Completed development');
  data.setValue(4, 0, new Date(2008, 1 ,5));
  data.setValue(4, 1, 1);
  data.setValue(4, 2, 'P1:MS2');
  data.setValue(4, 3, 'Completed testing');
  data.setValue(4, 4, 2);
  data.setValue(5, 0, new Date(2008, 1 ,6));
  data.setValue(5, 1, 1);
  data.setValue(5, 4, 2);
  data.setValue(6, 0, new Date(2008, 1 ,7));
  data.setValue(6, 4, 2);

  var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
    document.getElementById('visualization'));
    annotatedtimeline.draw(data, {
                            'displayAnnotations': true,
                            'displayExactValues': true,
                            'displayRangeSelector' : false,
                            'displayZoomButtons': false,
                            'legendPosition': 'newRow',
                            'max': 3,
                            'min': 0,
                            'scaleType': 'allfixed',
                            'thickness': 2,
                           });
}

Google Charts API

Another option would be to use the Google Charts API to generate a Gantt chart. This is a bit more complicated since it doesn't have a visualization for this out of the box. However, using a horizontal bar chart it would be possible to spin your own. This article takes you through the steps required to make a gantt chart that looks something like this:

The interesting point here is that the gantt chart above is dynamically generated via the charts API using a URL. Try clicking on the URL below:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=Hello|World

Well i think thats pretty cool.

FusionWidgets v3

As a final suggestion you could look at FusionWidgets, which has some very powerful visualization options. All of their widgets are flash based. This is listed last because its not opensource and not free. I haven't used it personally, unlike the above two, but the examples look great.

I hope these suggestions help.