OrgChart, drawing Organizational Charts using javascript

Basic

  1. Include the excanvas.js javascript for canvas support in Internet Explorer (up to version 8)
  2. Include the orgchart.js javascript
  3. Define a canvas on your page
  4. Define a new orgChart object
  5. Add nodes
  6. Call drawChart() to draw the chart on your canvas. 
	<HEAD>
		<!--[if lte IE 8]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
		<script type="text/javascript" src="orgchart.js"></script>
	</HEAD>
	<BODY>
		<canvas id="canvas1" width="800" height="600"></canvas>

		<script type="text/javascript">
			var o = new orgChart();
			o.addNode('', '', '', 'Root node');
			o.drawChart('canvas1');
		</script>
	</BODY>

Nodes

You can add multiple nodes. Nodes without a parent are root nodes. Alle other nodes are connected to a single parent node, with a connection type 'u', 'l' or 'r'.
u-Nodes are drawn side-by-side under their common parent.
l-Nodes are drawn as a vertical list under the parent, shifted the left.
r-Nodes are drawn as a vertical list under the parent, shifted the right.

addNode() parameters:
  1. The unique node id, either numeric or a string. If empty, the textlabel will be used as id.
  2. The id of the parent node. An empty (or unknown) parent defines a root node.
  3. The connection type: l, r or u. Ignored for root nodes.
  4. The text. A \n sequence forces a linebreak;
  5. Bold flag (if set to 1, a double-width border will be drawn) [optional]
  6. Url. Specify an url to add a hyperlink to a node. [optional]
  7. Border color. [optional]
  8. Fill color. [optional]
  9. Font color. [optional]
  10. URL of an image [optional].
  11. Image alignment [optional]. Two characters, The first character is a 'l', 'c' or 'r' for Left, Center or Right horizontal alignment. The second character is 't', 'm' or 'b' for Top, Middle or Bottom vertical alignment.
drawChart() parameters:
  1. Canvas id.
  2. Horizontal alignment. Use 'c' or 'center'. If omitted, the alignment will be left. [optional]
  3. Fit chart. If true, the canvas will be resized to just fit the chart. [optional]
 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

The canvas

The chart is drawn on the current canvas. To have a background or border, draw it before the drawChart() call.
To transform the chart, wrap the orgChart code in the canvas transformation functions.

Note: if you want to fit the chart and use a background fill, you need to draw the chart twice, as the resize will clear the canvas, wiping out your background. Draw the canvas with fit option first, draw your canvas background and draw the canvas again.

 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Colors

Nodes can have different colors. It is possible to define the color of a node within the addNode() call. If no color is defined, the current default colors are used. The current colors can be changed by the setColor() call, and will be used till the next setColor() call will redefine the colors.
All connection lines have the same color.

setColor() parameters:
  1. The border color. [optional]
  2. The fill color. [optional]
  3. The font color. [optional]
  4. The connection lines color. [optional, global setting]
An empty color parameter will not change the current setting.

 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Fonts

Nodes can have different fonts. To change the font use the setFont() function. Of course the font specified should be available on the target system, otherwise the browser will use a replacement font.
Text within nodes will be clipped. Due to limitations of the Internet Explorer excanvas implementation, text is clipped on complete characters (if a character doesn't fit completely, no single part of the character will be drawn).

setFont() parameters:
  1. Font name. The 'bold' and 'italic' font styles are recognized.
  2. Font size in pixels.
  3. Font color. [optional]
  4. Vertical alignment (1, 'c' or 'center' for center). [optional]
 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Size & Position

You can change the size of the nodes and the spaces and offset between the nodes. This is a global setting, all nodes will have the same size.

setSize() parameters:
  1. Width of the nodes in pixels.
  2. Height of the nodes in pixels.
  3. Horizontal space between u-nodes. [optional]
  4. Vertical space between nodes. [optional]
  5. Horizontal offset of the l- and r-nodes. [optional]
 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Node style

You can alter the corner style of the nodes and the shadow.

setNodeStyle() parameters:
  1. The radius of the top corners. The default value is 5.
  2. The radius of the bottom corners. The default value is 5.
  3. The offset of the node shadow. The default value is 3.
 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Links

You can add hyperlinks to nodes with the 6th parameter of the addNode() call.
Full specified targets (eg, starting with 'http://') will be opened in a new tab or new window (depending on the client browser setting).
If the cursor moves over a node with a link, it will change to the "pointer"-cursor.

Note: the sample code redefines a new orgChart with each reDraw on the same canvas. As the old orgChart variable isn't destroyed, all url handlers will remain active. Therefore multiple links will be opened if the reDraw is used for this sample. If you want to try a specific link, add a link to node without a link (the green nodes in this sample).

 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Layout

Nodes within a tree are drawn compact if possible. In this example the nodes 'u-Node 1' and 'u-Node 3' do not have childs, so they do not require space below. Remove the comments from the extra node to see the difference.
Different trees are drawn side by side. There is no vertical overlap between trees. (So node 'Root 2' is not drawn above 'u-Node 3').

 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Example

A full example. Multiple nested connection types are used.

 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Add images to the nodes

You can add images to the nodes. The images will be centered vertically and will be resized if too big (alter the setSize call in this example).

 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Another image example



 edit the code below and press reDraw! to redraw  
Your browser does not support canvas!

Converting the image to a png of jpg image

Cannot be used on IE up to version 8, as excanvas.js has no support for toDataURL!

 You can use the standard canvas functionality to convert a canvas to a static picture. For instance the following code will open the image as a png on a new page, or save the image as a png (the 'c_ex1' canvas is the canvas used by the example above):
Click here to open the image as png in a new window
Click here to save the image as png

Show the chart as image only

Cannot be used on IE up to version 8, as excanvas.js has no support for toDataURL!

 If you want to present the chart as picture only, you can convert the canvas to an image on the fly. Hotlinks added to the nodes will not work anymore.
To do so, create an empty image placeholder on your page, draw the canvas, convert the canvas to an image, assign the image to the image placeholder and finally hide the canvas.
As the "hidden" keyword is not recognized by the Internet Explorer, resize the canvas to 0 x 0 pixels to hide the canvas.

The following chart is a png image. Look at the source of this page for the source of this sample. Note, we do use the "fit" argument to create an image just fitting the chart.
Your browser does not support canvas!

Dynamically resize the canvas

If you resize the canvas dynamically, the chart will disappear, as resizing will clear a canvas.
Use the drawChart() or redrawChart() call to draw the chart on the canvas again. There is no need to redefine all the nodes (as is done in the live examples on this page).
drawChart() will reposition all boxen again, which takes time. If you know the chart hasn't changed just call redrawChart() to draw the in-memory copy on the canvas again.