Can JIT draw this? Org chart with child nodes of multiple parents

1,053 views
Skip to first unread message

TexasCamaro

unread,
Jul 19, 2011, 11:23:54 PM7/19/11
to JavaScript InfoVis Toolkit
I have an org chart I've tried to draw in JIT but the issue of
multiple parent nodes isn't working:

1 - I need a line that's rectangular with 90 degrees
2 - Need JIT to draw the relationship in a way that makes sense to
user.

Here's the graphic
http://www.flickr.com/photos/65494656@N08/5956764890/in/photostream

Thx

TexasCamaro

unread,
Jul 25, 2011, 4:49:00 PM7/25/11
to JavaScript InfoVis Toolkit
OK, I got the rectangle lines drawn thanks to a developer's reply.

Has anyone solved the issue where JIT does not draw a child to 2nd
parent relationship - until after a drag/pan?

man

unread,
Jul 26, 2011, 5:17:38 AM7/26/11
to JavaScript InfoVis Toolkit
I just tried with a spacetree, multiple parents work, doesn't work in
rgraph through

but if you click 2, only edge 2-4 is drawn, if you click 3 only edge
3-4 untill you draw or span the graph, and the two edges appear
you are right
so probably a refresh after a click event would do it

if you click 4 the 2 edges are drawn

can you tell me how you draw rectangular edges I would like to know

thanks

var j3 = [{
"id": "1",
"name": "1",
"adjacencies": [{
"nodeTo": "2",
"data": {
"$direction": ["1", "2"]
}
}, {
"nodeTo": "3",
"data": {
"$direction": ["1", "3"]
}
}]
}, {
"id": "2",
"name": "2",
"adjacencies": [{
"nodeTo": "4",
"data": {
"$direction": ["2", "4"]
}
}]
}, {
"id": "3",
"name": "3",
"adjacencies": [{
"nodeTo": "4",
"data": {
"$direction": ["3", "4"]
}
}]
}, {
"id": "4",
"name": "4",
"adjacencies": [{
"nodeTo": "2",
"data": {
"$direction": ["2", "4"]
}
}, {
"nodeTo": "3",
"data": {
"$direction": ["3", "4"]
}
}]
}]

st.loadJSON(j3); st.refresh() ;st.onClick(st.root);

TexasCamaro

unread,
Jul 26, 2011, 2:57:16 PM7/26/11
to JavaScript InfoVis Toolkit

To create rect lines:
Search for EdgeHelper.line.render

Here's the code to create rect lines (add to x, y):
EdgeHelper.line.render({ x: 10, y: 30 }, { x: 10, y: 50 },
viz.canvas);
(end code)
*/
'render': function(from, to, canvas){
var ctx = canvas.getCtx();
ctx.beginPath();
ctx.moveTo(from.x, (from.y));
ctx.lineTo(from.x, (from.y + 20));
ctx.lineTo(to.x, (from.y + 20));
ctx.lineTo(to.x, to.y);
ctx.stroke();
},

TexasCamaro

unread,
Jul 26, 2011, 3:17:31 PM7/26/11
to JavaScript InfoVis Toolkit
Around line 6360 in jit.js

Nicolas Garcia Belmonte

unread,
Jul 28, 2011, 12:52:29 PM7/28/11
to javascript-information...@googlegroups.com
FWIW, RGraph can handle graphs (hypertree and ForceDirected too), but
Spacetree is buggy with general graphs, works well with trees though.

Also, somebody already made an org chart in this group, I'm pretty
sure that if you look for posts like this in the google group you'll
find something :)

Best,

> --
> You received this message because you are subscribed to the Google Groups "JavaScript InfoVis Toolkit" group.
> To post to this group, send email to javascript-information...@googlegroups.com.
> To unsubscribe from this group, send email to javascript-information-visua...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/javascript-information-visualization-toolkit?hl=en.
>
>

--
Nicolas Garcia Belmonte - http://philogb.github.com/

TexasCamaro

unread,
Jul 28, 2011, 6:14:45 PM7/28/11
to JavaScript InfoVis Toolkit
Nicolas,

Thanks for the response. The issue is not in using Spacetree to create
an org chart. The problem I have is in depicting a child node with
multiple parents correctly.
If the 2 branches of the tree have a diff number of nodes, 2 problems
arise:
1 - the line does not draw from child to parents without a drag first
2 - the line, when drawn, is incorrect in depicting the relationship,
it's backwards - drawing from bottom of child to top of parent instead
of the other way around.

however, if I add a 'fake' node to even up the branches, the line is
drawn correctly - except in the case where I've added rectangular
lines - and in this case the line to the child with multi parents -
shifts left rather than straight down.

Thx,


On Jul 28, 11:52 am, Nicolas Garcia Belmonte <phil...@gmail.com>
wrote:
> > For more options, visit this group athttp://groups.google.com/group/javascript-information-visualization-t....
>
> --
> Nicolas Garcia Belmonte -http://philogb.github.com/- Hide quoted text -
>
> - Show quoted text -

Nicolas Garcia Belmonte

unread,
Jul 29, 2011, 11:54:49 AM7/29/11
to javascript-information...@googlegroups.com

Yes, spacetree layout is buggy with graphs

Reply all
Reply to author
Forward
0 new messages