0

I'm currently working a javascript project about user interface related to status of servers. I have a main node, which all nodes connected to, and some nodes. Number of nodes can be any, say between 5 and 50. I want them auto-fitted and the main node should be placed in the middle. Please click the link.

As you see in the figure, all nodes connected to main node, plus their sizes and positions are arranged to fit in the view.

Is there any library, example or a code snipplet that I can use?
- or -
Any suggestions about how I can construct this?

Edit: I'm simply asking, is there any algorithm that I can fit some number of objects into the screen?

PS: sorry about tags, I couldn't decide what to put.

Cihad Turhan
  • 2,749
  • 6
  • 28
  • 45
  • the diagram you link to isn't really clear to me based on your description. It looks like the main node is the only parent and all the other nodes are simply just its children. I don't see any means of ordering based on that example. Could you please clarify what you are looking for? Maybe it's just me though... – mason81 Oct 15 '12 at 12:30
  • I've added one more sentence and my own project screenshot to clarify. – Cihad Turhan Oct 15 '12 at 12:40
  • Not entirely sure what you're asking, but perhaps this is useful? http://stackoverflow.com/questions/5028433/graph-auto-layout-algorithm – BeRecursive Oct 15 '12 at 12:40
  • Thanks for adding the extra line and also for the more detailed picture. I think bhovhannes' answer below looks like it might be what you're looking for. – mason81 Oct 15 '12 at 13:46

2 Answers2

1

You can try InfoVis Toolkit. It supports large number of visualization styles. Demos are here.

bhovhannes
  • 5,511
  • 2
  • 27
  • 37
0

As always, the best way is the way you know. So I've implemented an algorithm that fits all nodes by keeping the distance almost the same using some simple physics forces. And the main node is always around the center. Here is the jsfiddle. Try something between 5 and 50. Works mostly well but sometimes, bug occurs.

Cihad Turhan
  • 2,749
  • 6
  • 28
  • 45