OrgChart Add-on

Organizational Chart Addon

View larger

Close

This add-on allows you to create organizational charts that can show different hierarchies based on the provided data.

This add-on is based on the JQuery version of the component that you can find here: https://github.com/dabeng/OrgChart.

Supported library features: data (json), pan, zoom, zoominLimit, zoomoutLimit, direction, verticalDepth, depth, toggleSiblingsResp, nodeTitle, nodeContent, exportButton, exportFilename, exportFileextension (png & pdf), Enable/disable exapand/collapse feature and add a chart title.

Found a bug or have a suggestion? Report it on GitHub

For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!

Sample code

OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
OrgChartItem item3 = new OrgChartItem(3, "Timothy Jones", "Sub-Director");        
item1.setChildren(Arrays.asList(item2, item3));        
OrgChartItem item4 = new OrgChartItem(4, "Louise Night", "Department 1");
OrgChartItem item5 = new OrgChartItem(5, "John Porter", "Department 2");
item2.setChildren(Arrays.asList(item4, item5));       
OrgChartItem item6 = new OrgChartItem(6, "Charles Thomas", "Department 3");	
item5.setChildren(Arrays.asList(item6));        
OrgChart component2 = new OrgChart(item1);
component2.setChartTitle("My Organization Chart Demo - Example 2 - BOTTOM TO TOP DIRECTION");    
component2.setChartNodeContent("title");
component2.setChartDirection(ChartDirectionEnum.BOTTOM_TO_TOP.getAbreviation());
component2.initializeChart();

OrgChart component1 = getExample1();        
component1.setChartTitle("My Organization Chart Demo - Example 1 - CHART EXPORT AS PICTURE");    
component1.setChartNodeContent("title");
component1.setChartExportButton(true);
component1.setChartExpandCollapse(true);

OrgChart component1 = getExample1();
String nodeTemplate = "<div class='title'>${item.title}</div>"+
        		"<div class='middle content'>${item.name}</div>" +
        		"${item.data.mail?`<div class='custom content'>${item.data.mail}</div>`:''}";
		component1.setNodeTemplate("item", TemplateLiteralRewriter.rewriteFunction(nodeTemplate));

...

public OrgChart getExample1() {
    	OrgChartItem item1 = new OrgChartItem(1, "John Williams", "Director");
    	item1.setData("mail", "jwilliams@example.com");
    	item1.setClassName("blue-node");
        OrgChartItem item2 = new OrgChartItem(2, "Anna Thompson", "Administration");
        item2.setData("mail", "athomp@example.com");
        item2.setClassName("blue-node");
        ...

Links

• View on GitHub
• Online Demo
• Source Code
• Issue Tracker
• Author Homepage

Compatibility