Javascript - Connect two lines

Question

In the following picture:

I want to connect the boxes in the above with below, Let us call the bottom edge of the top boxes as A and top edge of the below boxes as B

Now, I have two arrays containing the points in the line A nd B say

A = [ {Ax1, Ay1},{Ax2, Ay2},.... ] and B = [ {Bx1, By1},{Bx2, By2},.... ]

In real world it can be like A = [ {100, 100},{120, 100},{140, 100},{160, 100}] and B=[ {120, 200},{140, 200},{160, 200},{180, 200},{200, 200},]

Please look at the black dots in the picture above

How can get the connectiong poins as shown in the pictures? Connecting point must be a close to the center of the line as possible.

Here is what I'm trying to get, but below functions draw line between the two matching points from the starting from the left of the both lines, Any suggessions

drawConnection : function(componentOut, componentIn, connectionKey) {
        var outDim     = $(componentOut).data('dim');
        var inDim      = $(componentIn).data('dim');
        var outPorts   = $(componentOut).data('ports');
        var inPorts    = $(componentIn).data('ports');
        var abovePorts = {}; 
        var belowPorts = {}; 
        var i = 0; 
        if(outDim.bottomLeft.y < inDim.topLeft.y){
            // Now proceed only if they can be connect with a single line
            if(outDim.bottomLeft.x < inDim.topRight.x && outDim.bottomRight.x>inDim.topLeft.x) {
                // Now get a proper connecting point
                abovePorts = outPorts.bottom; 
                belowPorts = inPorts.top;
                for(i=0; i<abovePorts.length; i++) {
                    for(j=0; j<belowPorts.length; j++) {
                        if(!abovePorts[i].inUse && !belowPorts[j].inUse && (abovePorts[i].x == belowPorts[j].x)){
                            console.debug("Drawing vertical lines between points ("+abovePorts[i].x+","+abovePorts[i].y+") and ("+abovePorts[i].x+","+belowPorts[j].y+")");
                            return true;
                        }
                    }
                }
            }
        }
        return false;
    },

-- Update

I'm exactly trying to get something similar to this http://raphaeljs.com/graffle.html, but the connections should be made with straight lines as shown below

Answer 1

Have you tried Raphael.js : http://raphaeljs.com/ ?

Answer 2

Another approach is to use the HTML+CSS engine of the browser, instead of using JS.

You can use a table.
One cell row for each box and a 2 cells row for the connector.
You color one of the border for the connector and use margin, float and width styles, to position the boxes.

I've already used this technique to draw org charts a long time ago... when IE6 was considered the best browser!

Answer 3

Another worth looking at is Processing.js if you want a bit more power. I've used Raphael.js before and that was pretty easy to pickup and use. Just be aware that both utilize the Canvas element which to my knowledge isn't supported in all browsers yet.