OrgChart Add-on
Organizational Chart Addon
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"); ...
Links
Compatibility
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 AddonOnline Demo
Source Code
Issue Tracker
Author Homepage
OrgChart Add-on version 1.0.0
First version of the component.
OrgChart Add-on version 2.0.0
Vaadin 8 version. Supports the same features as the 1.0.0 version.
OrgChart Add-on version 2.0.1
Support for drag and drop items from the chart, and also possibility of listening from the server side for such changes
OrgChart Add-on version 2.0.2
Add support for node styling (e.g. change node colors)
OrgChart Add-on version 2.0.3
* Add support for node templates
* Fix options chartDepth and chartVerticalDepth
* Fix export support in IE
* Update OrgChart library to version 2.1.3
* Update jackson-databind dependency because of security vulnerabilities (#7)
OrgChart Add-on version 2.0.4
Added support for click events and tooltips in orgchart nodes.
OrgChart Add-on version 4.0.1
Initial release for Vaadin 14+ (npm mode)
OrgChart Add-on version 4.0.2
* Fixed build problem related to javascript dependency (#14)
* Fixed regression problem with Vaadin 14.1
OrgChart Add-on version 4.0.3
Bump jackson-databind to 2.9.10.4
OrgChart Add-on version 4.0.4
* Bump jackson-databind from 2.9.10.4 to 2.11.1
* Replace vaadin dependency with vaadin-core
OrgChart Add-on version 4.0.5
* Fix: Compatibility for Vaadin 16/17 ([#22](https://github.com/FlowingCode/OrgChartAddon/issues/22))
* Fix: Exported image does not match the displayed orgchart ([#17](https://github.com/FlowingCode/OrgChartAddon/issues/17))
OrgChart Add-on version 4.1.0
### New features:
* Provide support for collapsing nodes by default ([#8](https://github.com/FlowingCode/OrgChartAddon/issues/8)).
OrgChart Add-on version 4.2.0
### Bugfixes
* Move chart initialization to onAttach method ([#37](https://github.com/FlowingCode/OrgChartAddon/issues/37))
* Fix styling when direction is b2t and node template has no content ([#41](https://github.com/FlowingCode/OrgChartAddon/issues/41))
### API Changes:
* Deprecate public method initializeChart() since initialization is automatically performed every time the component is attached. * For compatibility with previous versions, initializeChart() is now a NOP.
OrgChart Add-on version 4.2.1
### Bugfixes
* Fix error when parsing integer ids for on click function ([#42](https://github.com/FlowingCode/OrgChartAddon/issues/42))
* Fix setting of expand/collapse functionality ([#50](https://github.com/FlowingCode/OrgChartAddon/issues/50))
OrgChart Add-on version 4.2.2
#### Bug fixes:
* fix jquery not defined ([#60](https://github.com/FlowingCode/OrgChartAddon/issues/60))
OrgChart Add-on version 5.0.0
#### New features:
* update orgchart library dependency to 3.7.0 ([#66](https://github.com/FlowingCode/OrgChartAddon/issues/66))