Family Chart Nodes Order

Dubreuilh Thierry

1

Male

1

Connector annotation

Selected

No user actions yet.

User guided family chart nodes ordering

Family Tree Component orders and aligns nodes automatically, it searches for the best order of family nodes. This is very handy for initial rendering, but lack of ordering rules keeps layout engine reordering nodes every time we add new nodes into diagram. So end users have to adopt to global layout changes every time they make changes to diagram nodes. The opposite situation when user defines position for every node drives us back to the age of diagram editors and manual nodes placement. This is inconvinient, so we combine the best of two approaches: autolayout and user guided nodes order. Our layout engine follows end user ordering rules as long as they are applicable and ignores them when they are not relevant.

This demo diagram displays relations guiding layout engine in form of horizontal red dotted lines. The arrow direction defines who gets its order position first and who is next.

Additionally this demo shows offbeat connector annotation between any 2 nodes of diagram and background annotation for all user seleted nodes in it.

Family Diagram Specific

Group by option defines node placement in layout close to its parents or children when node is linked across multiple levels in hierarchy. See "alignment" data set.

Group By

Children

Parents

The following option keeps items at the same levels after connections bundling.

Align by levels

true

false

The following option hides direct connectors to grand parents. It helps reduce diagrams connectors layout complexity. This option should be used together with dynamic highlighting of connectors to grandparents via immidiate parents, so information is not lost.

Hides grand parents connectors

true

false

Chart optimizes items placement into layers, so the final diagram has minimal number of feedback loops between them. Use following option to disable that behaviour and place items in the same sequence as in source items collection.

Loops Layout Mode

Optimized

KeepItemsOrder

The following option enables natrix layout in family diagram. Nodes having the same set of parents and children are grouped into square shaped matrix in order to keep them visualy together.

Enable Matrix Layout

true

false

Minimum number of nodes needed in order to be formed into matrix layout

Maximum columns number in matrix nodes layout

Auto Layout

Page Fit Mode defines rule of fitting chart into available screen space. Set it to None if you want to disable it.

Default Template

Default chart item template tries to select the best matching font color for current title background.

Title first font color

Title second font color

Buttons panel size

Checkbox panel size

Group Title Style

Placement

Auto

Left

Right

Group title panel width

Orientation

Horizontal

RotateLeft

RotateRight

Auto

Vertical Alignment

Top

Middle

Bottom

Horizontal Alignment

Background Color

For group title color, see title first and second font colors in default template options.

Font size

Font Weight

Font Style

Font Style

Minimized Item (Dot, Marker)

Minimized item options are defined per item template. So if you need to show individual markers per item, you have to define template for every marker type and assign it to items. Template is some sort of named property bag.

By default marker has color of itemTitleColor property, download demos and check samples source data. If item has no title color set, then be sure that you set border line width and color for markers having no fill, othewise you are not going to see them.

Marker size

Width

Height

Corner Radius

Highlight border padding around marker

Padding

Marker Shape

Marker border line width

Marker border line type

Solid

Dotted

Dashed

Following Border and Fill colors properties work only for items having no title color property set. See Parners & Annotations Demo to try them.

Marker border line color

Marker fill color

Opacity

On-screen Annotations Specific

Placement type

Offbeat

Straight

Connector shape type

OneWay

TwoWay

BothWay

Label Placement type

From

Between

To

Line width

Line type

Solid

Dotted

Dashed

Color

Offset

Connector Z order type

Auto

Background

Foreground

Intervals

Vertical Intervals Between Rows

Normal

If you enable labels for dots, use the following interval to fit them between levels

Connectors Style

Show extra horizontal arrows on top of connectors for easy navigation between parents and children through connector lines

Available minimum space to show horizontal arrow

Labels

Label property should be defined for every item first, otherwise chart has nothiong to show. Labels are visible only for markers. If you need to add labels to normal size items you have to modify default item template and place text outside item boundaries.

Show labels

Auto

True

False

Size: Use this property to define labels bounding rectangle. Labels placed relative to markers(dots), so when they overlap in auto show mode one of them would be hidden. Set appropriate intervals between levels of markers in order to fit and make all labels visible.

Label Size

Width

Height

Offset

Label Orientation

Horizontal

RotateLeft

RotateRight

Auto

Label Placement

Font size

Font

Arial

Verdana

Times New Roman

Serif

Courier

Font Color

Font Weight

normal

bold

Font Style

normal

italic

Callout Style

By default callout displays item content, but it can be redefined with custom callout template.

Maximum node type visibility

Normal

Dot

Line

This option controls callout visibility for minimized items and it can be ovewritten per item