5

I am looking for an algorithm or sample solution for drawing connection lines between rectangles. In my case rectangles are elements Gantt chart and connections show depenedencies. I am using the Raphael JS library to draw rectangles and lines. So a solution in JavaScript would be the best, but an algorithm in meta language or other JS similar will be nice also.

I have found an example that looks nice but maybe someone knows something else.

In my case there are a few relevant requirements:

  1. only horizontal and vertical lines are allowed
  2. lines should not cross each other
  3. lines should not cross rectangles I hope to achieve something similar to this:

Visio Gantt chart

Gijs
  • 5,201
  • 1
  • 27
  • 42
sebastian
  • 61
  • 2

1 Answers1

0

It's look like you are looking for javascript gantt charts. Check out this one's:

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml

  • Editable chart
  • Full control with JavaScript API
  • Multi-browser/multi-platform support
  • Loading from XML
  • Serialization to XML
  • Movable/resizable activities
  • Built-in edit menu, plus custom dhtmlxMenu support
  • Extended properties pop-up
  • Optional tree view
  • Customizable task subscription
  • Percent-complete shadings
  • Dependency arrows
  • Fast and smooth rendering
  • Built-in constraint checking
  • Print-friendly mode

http://www.bryntum.com/products/gantt/

  • Built entirely on web standards - HTML/CSS/JavaScript
  • Use with any server (PHP, Java, ASP.NET)
  • Supports dependencies, lead/lag and critical path
  • Export to PDF/PNG, MS Project import
  • Project, task and resource calendars
  • Unit tested with Siesta

http://gxt-scheduler.com/

  • Built entirely on web standards - HTML/CSS/GWT
  • Integrates with any type of backend
  • Fully themeable, requiring only basic HTML/CSS knowledge
  • Drag & drop and resize items easily
  • Supports all major browsers

http://gantter.com/

  • google drive integration
  • FREE cloud-based project scheduling

http://gantt.twproject.com/

  • in-place editing
  • drag&drop
  • zooming
  • do/undo
  • multiple dependencies
  • full editing
  • dates shortcuts
  • css skin
  • multiple browser
  • resources editing
  • multiple assignment
  • milestones
  • export data in JSON format
  • resize & scroll
Dimitar Ivanov
  • 11
  • 5