Project Description
Simple javascript control that draws a complete HTML4 tree graph. Allows Vertical or Horizontal layout. It doesn't has any dependency to libraries or images. Allows add or remove nodes, and expand or collapse them.

Tested in IE and Firefox.






1 – Include a reference to JSTreeGraph.js and JSTreeGraph.css files

2 – Create a DIV element to contain the Tree.

3 – Create a Root Node object, with child nodes. Each node can have any property, but there are some with special meaning.

4 – Call the DrawTree function with options.


Special Node Properties

Content: Text or HTML code to be contained in each node box.

Nodes: Array with sub Nodes.

ToolTip: Tooltip Text for a Node.

Class: Css Class name for a node box.

Collapsed: Indicates if a node is Expanded or Collapsed. Child nodes won’t be drawed if its parent node is collapsed.




DrawTree Options

Container: reference to the container object

RootNode: reference to the top most node.

Layout: Can be “Horizontal” or “Vertical

OnNodeClick: Handler for a node click event.

OnNodeDoubleClick: Handler for a node double click event.




There is an explanation of the algorithm behind the layouting process, in this blog post. Is written in spanish.

Last edited Jan 20, 2012 at 5:06 AM by crisfervil, version 8