Tags

, , , , , ,

Overview

I manage my projects using my own ElephantPM project management methodology. This is a similar in many ways to PRINCE2 but is greatly simplified so that it is suitable for use by smaller organisations.

My needs

ElephantPM divides the Start-up stage into an analysis step and a planning step. During the analysis step it is necessary to create several diagrams,

  • A mind map showing the output of the Discovery Workshop
  • An “org chart” showing the breakdown of the project into Business Deliverables
  • A flow chart showing the order in which Business Deliverables should be made
  • A diagram showing the relationship between stages and the production of Business Deliverables

During the planning step it is necessary to produce

  • Gantt Charts showing the Project Schedule and Stage Schedules

Current solution

Over the years I have used various tools to produce these charts but I have now settled on Freemind and Microsoft Project 2010.

Freemind is my preferred mind mapping tool. It is free, very powerful and runs locally in Java. It has far more features than I ever use.

I have spent many hours creating custom templates for Microsoft Project so that making the diagrams is reasonably efficient but there are still some hassles and at over £ 500 a copy it is very expensive drawing package. I use custom views to produce,

  • Network diagrams
    • Business Deliverable Breakdown
    • Business Deliverable Work Flow
    • Stage Contribution to Business Deliverables
  • Timeline
  • Gantt charts
    • Project Schedule
    • Stage Schedule
    • HerdPM (programme view)
    • NurseryPM (programme view)

JavaScript alternatives

Could I create my own tools to draw these diagrams? These would have the advantage of a very slick workflow. Information could be entered once and then flow down between the diagrams. Standard templates could remove most of the actual drawing. My preferred user interface technology is JavaScript so I have done a review of available technologies.

JavaScript mind maps

  • A useful review (lots of problems but no solutions)
  • Mindmeister online service. Simple, ugly and popular. It would probably be relatively easy to copy.
  • http://drichard.org/mindmaps/. He has done a nice job but does not use the keyboard well. (GPL)
  • https://github.com/mindmup This is a beautiful application. It is open source and it used to be MIT licensed but is now custom. I have corresponded with the author and he has confirmed that the license change is only to discourage abuse not impede commercial reuse.

Flowcharts

There are no purpose built flowchart libraries. The only choice is to use a general purpose JavaScript drawing library and specialise it.

Timelines (none are Microsoft Project 2013 like)

Quote from okfnlabs.org:

Propublica Timeline Setter

Verite Timeline

  • http://timeline.verite.co/
  • Very elegant frontend design
  • 2 bands in timeline segment and tight integration of item display
  • Includes much more than Timeline (e.g. sourcing data from google docs etc)
  • Mozilla Public License (was GPL)

Simile Timeline

Chronoline

Timeglider

CHAPS Timeline

Gantt Charts

The Gantt chart implementation in Microsoft Project 2010 is very sophisticated  features include,

  • It is editable,
  • editing the start date and duration by dragging
  • edit dependencies by dragging
  • show one or more columns of data to left
  • editing columnar data changes the chart
  • zooming
  • time scale management

Possible solutions include

and from this review

  • http://www.bryntum.com/products/gantt/(OEM Price on application, need Ext js licence).
    • Very beautiful and fully featured
  • jsGantt (BSD)
    • Read-only but very clean. could possibly be extended. No checkins for 2 years
  • jquery.ganttView
    • read-only
  • gantter – free cloud based scheduling
    • they don’t sell their component
  • TreeGrid Gantt (about 900 USD)
    • Completely awesome chart. “TreeGrid Gantt chart is an application core for building online (web based) project management software like MS Project or Primavera. Is also used to display and control any data in row and bar based chart.It is the most complex web Gantt chart on the Internet.”
  • (update 2014-04-25) http://www.dhtmlx.com/docs/products/dhtmlxGantt/index.shtml
    • Available under GPL and commercial licenses. A very nice Gantt component that I am trialling at the moment.

(–update 2016-04-09– full disclosure, given licence, see comments)

  • Radiantq – jQuery Gantt Package
    • Commercial licence. “jQuery Gantt Package 5.0 is a truly cross-platform, native HTML5/jQuery based implementation with 2 distinct gantt widgets.”
    • This is a very rich application that is squarely aimed at developers who want to build a rich Microsoft Project-like scheduling UI.  The challenge faced by the developers of scheduling software is how to build a screen that is less complicated than Microsoft Project but sophisticated enough to do the job. This package seems to be well suited to this challenge. I do a lot of WordPress development so I also like the PHP support this product offers.

(–/)

General purpose libraries

MIT or LGPL licences

  • jsplumb (GPL, MIT)
  • jsPlumb provides a way to “plumb” elements of a UI together using connectors. It is a really fully featured and the author is an active committer to GitHub
  • jointjs (MIT)
  • Joint is a JavaScript library for creating diagrams. The diagrams can be fully interactive. Joint library is suitable for both implementing a diagramming tool as well as simply for publishing your diagrams.
  •  JavaScript Infoscript toolkit (licence unclear – probably
    MIT)
  • beautiful renders
  • diagramo GPL
  • good general purpose diagramming plugin using PHP, MySQL and JavaScript. GPL but a commercial version is available.
  • wireit (MIT)
  • Demos only show simple features not complete drawing applications
  • raphael (MIT)
  • Really vector graphics rather and diagramming. Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Part of Sencha Labs

Commercial licences

  • MindFusion ($300)
    • The library is written 100% in JavaScript and uses the HTML5 Canvas for drawing. JsDiagram depends on the Microsoft Ajax® library for type system implementation and browser independence
  • Draw2D touch (499 EUR)
    • Create Visio like drawings, diagrams or an workflow editor with the Javascript library.The User interface allows interactive drawing by using your standard browser. No additional software; no third party plug ins. Just run it and use it.
  • GoJS HTML5 Canvas (from $2795)
    • GoJS is a fast and powerful JavaScript library for implementing interactive diagrams in HTML5 web
      application. The design of GoJS is similar to the design of our other diagramming controls and to GoXam
      in particular. The design includes support for templated definitions of complex parts and data-binding
      of graphical object properties to model data. Many good diagramming examples including flow charts, mind
      maps and UML diagrams.
  • yworks ($5000)
    • Files for HTML brings the proven power and ease of yFiles diagramming to your cutting-edge HTML5 applications.
  • jGraph Mx graph ($5,500)
    • mxGraph is simple, you include it as a JavaScript link in your HTML file and you instantly have access
      to the cleanest, most functional native browser diagramming component available.

Conclusion

The starting point is a mind map application. There are no suitable open source or commercial applications and there are very few features that have to be implemented to make a usable tool. The two most suitable free libraries seem to be jsPlumb and Joint, jit is very pretty but orientated towards visualisation rather than editing.  I think that either of these free libraries would be suitable to build a simple mind map application.

Moving on to the need for flowchart software, this is somewhat more complex and I think that the only way to find out which of the free or commercial packages best meet my needs would be to build a reference application. This will flush out how easy they are to use in practise.

Now we get to the timeline software. None of these look much like a Microsoft Project 2010 timeline because they are much more sophisticated. The simile widget is perhaps the most suitable but it might be sensible to keep it simple and start from scratch.

Finally I consider Gantt charts. These range from the simple jsGantt to the very complex TreeGrid Gantt. I think that investing time and effort in TreeGrid Gantt would be worthwhile because (hopefully) one could start with simple read-only renders of tabular data and Gantt bars and then move on to more complex interactive charts.

I hope that you have found the review useful. If you have used any of these products or have anything to add please make a comment.

Advertisement