Directory

← Back

OrgChart Add-on

Organizational Chart Addon

Author

Rating

Popularity

300+

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

This addon 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.

If you want more features just create an issue on GitHub.

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");
        ...

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

New features:

  • update orgchart library dependency to 3.7.0 (#66)
Released
2023-08-16
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 14
Vaadin 23
Vaadin 24
Vaadin 7.7+ in 1.0.0
Vaadin 8.0+ in 2.0.0
Vaadin 22 in 4.0.1
Vaadin 21 in 4.0.1
Vaadin 20 in 4.0.1
Vaadin 19 in 4.0.1
Vaadin 18 in 4.0.1
Vaadin 17 in 4.0.1
Vaadin 16 in 4.0.1
Vaadin 15 in 4.0.1
Browser
N/A

OrgChart Add-on - Vaadin Add-on Directory

Organizational Chart Addon OrgChart Add-on - Vaadin Add-on Directory
This addon allows you to create organizational charts that can show different hierarchies based on the provided data. This addon 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. If you want more features just [create an issue on GitHub](https://github.com/FlowingCode/OrgChartAddon).
Online