WebOrgChart

Debt: Woc is inherited from PHP-to-OrgChart[1], for its idea (I considers also graphviz or TikZ). I add recusivity of hierarchical structures, lateral relations (left and right) and fonctionnal relations between persons (figured by lines). For this reason its a completly different project.

A Organisation Chart , width Pure PHP and CSS Implement, with implemtnation of a simple javascript function (Leader Line) for free relation between persons

In a glance

From a simple data text file (a simple list of hierarchical relationship "n -- n+1"...

By default, Woc produces

• a table of content
• an organinizational chart of the top management (3 levels only)
• organizational charts of the directions (levels below)

Vocabulary

• theme: a list of levels of labels (color, width, height, font)
• orgas: a hierarchical relationship list

Syntax of the orgas

Constraint: The top manager have to be mentioned in the fist relation of the list.

Codification of a person

level/function/name/category

• level (in a theme)
• function (general manager, assistant, etc.)
• name (Mickey Mouse)
• category (A,B,C)

Hierarchical relations

Simple relation

• below (-- or -N)

direction/Executive director/Donald/B -- top/Financial director/Picsou/A

$lateral_child=0; (default)

• variant

direction/Executive director/Donald/B -- top/Financial director/Picsou/A

$lateral_child=1;

Left and right relations

• left (-L)

direction/Executive director/Donald/B -L top/Financial director/Picsou/A

• right (-R)

direction/Executive director/Donald/B -R top/Financial director/Picsou/A

Lateral and below, left and right

• A (-A)

direction/Executive director/Donald/B -A top/Financial director/Picsou/A

• B (-B)

direction/Executive director/Donald/B -B top/Financial director/Picsou/A

• b (-b)

dotted lines are done with lowcase letters

direction/Executive director/Donald/B -b top/Financial director/Picsou/A

blocks vs rakes

compact blocks

donald = direction/Executive director/Donald/B -N picsou = top/Financial director/Picsou/A loulou = service/assistant/Loulou/C -N donald riri = service/assistant/Riri/C -N donald fifi = service/assistant/Fifi/C -N donald fifi -0 picsou fifi -1 donald

And Two fonctionnal relations (you can add some easily)

• A -0- B (solid line)
• B -1- C (dashed line)

Recursive relations

For this

B -- A = direction/PDG/A
C = service/Service RH/C -- A
CC -- C
CD -- C
D -- A
E -- B
F -l A
G -r A
K -- D
H -l D
I -- H
J -r I
E -0- K
C -1- G

The system produces:

Notice that the leaves are displayed in blocks (F G H and K L) to avoid a too large tree.

Step by step

Links

The link are defined like this

item link item

Abreviation

An item can be abreviate.

CEO = Chief Executive Officer

You can use CEO after like this

Agent -- CEO

Items

Persons in the organization are defined like this:

<status>/<position displayed>/<name>/<category>

While it is mandatory, you can tell only name, like this:

//name/

The status ? For the type of cards!

The status can define the colors and the size of the card.

There is now an editor of profiles (12 items in a profile)

Hierarchical link

B -- A

B will be displayed under A

Lateral links

E -- A
C -l A
F -l A
D -r A    

Notice, you should have an item under A Otherwise, lateral links cannot exist.

Fonctional links

You can define free relations between persons in the data file with the relations -0- and -1-

Person 1 -0- Persons 2
Person 8 -1- CEO

-0- indicates: no dashed line -1- indicates: dashed line

What tool to produce the pdf

• jspdf (client side tool): no render of dotted line.
• weasyprint: bas display of columns width
• wkhtmltopdf: great rendering! and svg also!

comment

Comments are lines beginning by a #.

Do you want a demo online ?

See here: https://elie.org/weborgchart

License

• WebOrgChart is licensed under GPLv2 license (as PHP-to-OrgChart is)
• Leader-line is licenced under MIT license

[1]: see https://github.com/Awezome/PHP-to-OrgChart