Basic Primitives

Basic Primitives is a 100% JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size

First family chart

Family diagram shares a lot of common features with organizational chart diagram. See following organizational chart samples for details:

  1. "First Organizational Chart" - describes how to create, update and destroy widgets.
  2. "Adding new items at run time" - explains how to add new items to diagram without full recreation of layout.
  3. "Placement and auto sizing" - explains how to size diagram on page resize
  4. etc.

The main difference of family diagram compared to organizational chart is support of multiple parents. Organizational chart is defined with a regular tree structure of items, where every branch is independent, so it makes possible to place children to custom location relative to to its parent and group children into various shapes. It is possible in organizational chart since its nodes have no logical connections between branches. If we look at family diagram where every item may belong to multiple parents, there is no such thing as single parent anymore, so it is impossible to define children shape layout in parent node, since it create ambiguity in API. So organizational chart is simple tree structure enhanced with layout customizations, so if your data has distinct core tree structure then we recommend you to stay within organizational chart API functionality as long as possible. Your chart structure is going to be simple to understand to end users. Organizational chart provides limited multiple parents support with partner item types, it provides on screen annotations to show relations between various branches of your tree, it supports multiple root items, so you can place multiple organizational charts side by side and imitate multiple inheritance for some extend.  If we have situation when our data have multiple parents equal in logical value then it makes sense to switch to family diagram. So Family diagram supports multiple parents but it lacks usage of custom item types. Family diagram supports shaping of nodes having common set of parents and children into matrix.

Family diagram provides some features specific to multi-parent layout, for example it supports in-layout "Labels cascades" over connections between parents and children.

  

 

Comments 

 
#31 Katherine Fenton 2018-11-26 05:00
I can't get the "Interactivity" feature to work, either on my own test file or on the sample files here on this page. I can it works in the demos though. It would be really useful for the massive family that I'm building!

options.NavigationMode = primitives.common.NavigationMode.HighlightOnly;
Quote
 
 
#30 Administrator 2018-04-26 06:55
Quoting Udayakumar:
It's possible for used tool-tip in particular node?

Item Content is HTML fragment defined by user with item template. By default chart uses built in default item template.
The rendering consists of 2 stages. Chart uses Item Template to clone HTML fragments for every new node or reuse existing HTML fragments of existing nodes and at second stage it calls call back function onItemRender to let user map context item to that HTML fragment. So users Item defined in chart API is being mapped in onItemRender. Please, take into account that some jQuery UI Widgets or graphics elements like SVG may be broken if they are disconnected from DOM, so onItemRendering function has argument indicating whether HTML fragment is new or just cloned from Item template and attached to DOM.
See Item Template Sample on how to add nested jQuery UI widget into node content
Quote
 
 
#29 Udayakumar 2018-04-26 05:10
It's possible for used tool-tip in particular node?
Quote
 
 
#28 Dag Antonsen 2018-03-04 11:37
I have solved it:
All persons not to show as placeholder have id > 99999999

In primitives.famdiagram.FamilyItem:
if(this.id > 99999999){
this.isVisible = false;
this.isActive = false;
}

In function redrawConnector :
hideConnectors = true;
if(parentTreeIt em.id > 99999999){
showElbowDots = false;
}

I added all IDs < 99999999 to options.selectedItems
Set options:
options.linesColor = "#AARRGGBB";
options.highlightLinesC olor = "black";

Now parents shows correctly in any setting of unbalanced families
Quote
 
 
#27 Dag Antonsen 2018-03-03 16:11
Quoting Administrator:
Adding isVisible to family diagram may not work the way you expect, since the node level you need to shift down depends on other siblings as well. Try "Family Demo -> Family Diagram Specific Options -> 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."


I tried the different versions without luck. I added this.visible = false if this.id > 9999999 in /Controls/FamDiagram/models/FamilyItem.js that removed the node, but I am not able to remove drawed lines to the hidden nodes. I noticed linesPalette might be solution setting hex color value to transparent, but I am not able to set fromID and toID
Quote
 
 
#26 Administrator 2018-03-03 11:36
Quoting Dag Antonsen:
Is it possible to add .isVisible to famdiagram too? It works in orgdiagram, but not in famdiagram.
I would like to have the possibility to hide people used as placeholder due to the parent bug when generations is not filled evenly.

Adding isVisible to family diagram may not work the way you expect, since the node level you need to shift down depends on other siblings as well. Try "Family Demo -> Family Diagram Specific Options -> 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."
Quote
 
 
#25 Dag Antonsen 2018-03-01 13:45
Is it possible to add .isVisible to famdiagram too? It works in orgdiagram, but not in famdiagram.
I would like to have the possibility to hide people used as placeholder due to the parent bug when generations is not filled evenly.
Quote
 
 
#24 Administrator 2017-09-26 06:50
Quoting Gowri sankar:
How do I sort the children in the order of their date of birth or by any other order?

We don't support children ordering.
Quote
 
 
#23 Gowri sankar 2017-09-24 03:08
How do I sort the children in the order of their date of birth or by any other order?
Quote
 
 
#22 Udayakumar 2017-07-17 06:01
Hi, How an I get the PDF(With image) using famdigram
Ex:
image:"data:false;base 64,....."
Quote
 
 
#21 Administrator 2017-05-24 07:41
Quoting Erick:
Hi, can i add some siblings relations between nodes?

Quoting Erick:
Hi, can i add some siblings relations between nodes?

Yes, the diagram layout does not respect parents and children order. So it is ok only for diagrams having ligically equal nodes.

The org chart layout itself provides all information about nodes relations. In case of family diagram, nodes placement is not determenistic, so as a result only connection lines provide i formation about relations. We have plans to add ordering and grouping of items.
Quote
 
 
#20 Erick 2017-05-23 09:09
Hi, can i add some siblings relations between nodes?
Quote
 
 
#19 Administrator 2017-04-03 06:16
Quoting Scott:
How do you load an external json file?
I tried:
jQuery(window).load(function () {
var options = new primitives.orgdiagram.Config();
ResizePlacehold er();

var items = (function () {
$.ajax({
'async': false,
'global': false,
'url': "test.json",
'dataType': "json",
'success': function (data) {
items = data;
}
});
return items;
})();
options.items = items;
....
but nothing displays.

Your code uses async call, so your function returns empty result before async call brings actual data.
Download and see Dynamic Data Loading Demo.
Quote
 
 
#18 Administrator 2017-04-03 06:13
Quoting shabbeer shaik:
Hi,
how to map tooltip for the nodes.
Thanks
Shabbeer

Tooltip definition should be updated for every item as any other HTML defining visual representation of the node. See Item Template sample.
Quote
 
 
#17 Scott 2016-12-06 07:54
How do you load an external json file?
I tried:
jQuery(window).load(function () {
var options = new primitives.orgdiagram.Config();
ResizePlacehold er();

var items = (function () {
$.ajax({
'async': false,
'global': false,
'url': "test.json",
'dataType': "json",
'success': function (data) {
items = data;
}
});
return items;
})();
options.items = items;
....
but nothing displays.
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support