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 organizational chart

jQuery UI is a HTML beautification framework which uses plugins or widgets to improve existing HTML elements via reworking them into something else. Depending on widget implementation the new visual representation of beautified HTML element could be created as overlay. While the original HTML element stays invisible and only is used as an API object. Other widgets completely remove original HTML content and replace with its own, but in majority of cases existing HTML element is preserved as API object. Basic Primitives jQuery UI widgets use existing HTML elements as placeholders on the web page to draw charts. The only HTML element which can serve as an placeholder is div. When you resize the web page the chart will not change its size automatically, it will not shrink or expand in size, in order to have the chart adopt to new placeholder size you have to explicitly notify the widget. In order to create or make any changes in existing chart you don't not make them in HTML, but you have to create them in configuration object and apply the new configuration object to the widget. The configuration object consists of options and collections of various objects like items, annotations, etc., the objects are referenced by unique ids. For convenience, all configuration objects are based on their own prototype, so you can instantiate them and investigate their default properties. Since we are in JavaScript world, all configuration objects can be defined in regular JSON form as well.

Basic Primitives jQuery UI widgets use empty DIV elements as placeholder to draw charts and other visuals inside of them with configuration object. All configuration objects have the suffix "Config" in source code and in reference. Properties of configuration objects can be objects or collections of objects as well.

In order to use Basic Primitives widgets in your web application include following references for jQuery, jQuery UI and Basic Primitives libraries:

<link rel="stylesheet" href="/demo/js/jquery/ui-lightness/jquery-ui-1.10.2.custom.css" />
<script type="text/javascript" src="/demo/js/jquery/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/demo/js/jquery/jquery-ui-1.10.2.custom.min.js"></script>

<script  type="text/javascript" src="/demo/js/primitives.min.js"></script>
<link href="/demo/css/primitives.latest.css" media="screen" rel="stylesheet" type="text/css" />

Basic Primitives jQuery UI widgets are added as methods on jQuery object, so for example in order to create a new organization chart inside empty div having tag name "orgdiagram"  we have to call following jQuery method:

jQuery("#orgdiagram").orgDiagram({/* here is we define items & configuration options for our chart*/});

In order to get configuration object of existing widget call its method with argument "options"

var config = jQuery("#orgdiagarm").orgDiagram("option")

or for individual option

var items = jQuery("#orgdiagarm").orgDiagram("option", "items")

See following arcticle for Widget Factory reference, it explains how to use jQuery UI widgets API: https://api.jqueryui.com/jquery.widget/

All Basic Primitives objects are created in global variable "primitives".

When we create a new jQuery UI widget instance, jQuery stores it to the internal hash collection and adds its hash key to HTML element as data attribute. So when we call a widget method on the same HTML element second time we actually pass new configuration object to the exisiting instance. When we delete the HTML element containg widget's visuals inside, jQuery UI will also remove associated widget instance from hash and all nested widgets if such exist in the removed HTML fragment.
So in order to be sure that widget's instance is destroyed and avoid unexpected memory leaks you have to remove HTML elements only with jQuery remove method.

jQuery("#orgdiagram").remove();

Be aware that for obvious logical reasons jQuery("#orgdiagram").empty() method cleans up contents without actual widget removal, so its state becomes invalid after that and its instance stays in memory, since jQuery hash of widgets keeps reference on it.

Following example demonstrates creation of simple org chart having one root item and couple of children.

In order to define the same chart as JSON object, replace it with the following code snippet:

jQuery("#basicdiagram").orgDiagram({
  items: [
	{ id: 0, parent: null, title: "Scott Aasrud", description: "VP, Public Sector", image: "demo/images/photos/a.png" },
	{ id: 1, parent: 0, title: "Ted Lucas", description: "VP, Human Resources", image: "demo/images/photos/b.png" },
	{ id: 2, parent: 0, title: "Joao Stuger", description: "Business Solutions, US", image: "demo/images/photos/c.png"}
  ],
  cursorItem: 0,
  hasSelectorCheckbox: primitives.common.Enabled.True
});


  

 

Comments 

 
#176 Administrator 2017-04-23 16:01
Quoting Mohammad AlAlem:
I want to ask if you support RTL languages?

It is 100% JavaScript library and JavaScript supports RTL languages. You should not have any issues with them. The widget itself supports Right side orientation of diagram, just invert all settings from right to left side.
Quote
 
 
#175 Mohammad AlAlem 2017-04-23 10:12
I want to ask if you support RTL languages?
Quote
 
 
#174 Administrator 2017-03-09 07:13
Quoting AR:
In organization chart, if employee reporting to more than one person. How can we show the flow/ connection?

1. Attach picture of your scenario.
2. If you have hierarchy in organization then use orgDiagram with annotations, see

http://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=132&lang=en

3. If some of your managers share responsibilitie s use partner item types, see:
http://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=97&lang=en

4. If your employees randomly share managers then use family diagram.
http://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=96&lang=en
Quote
 
 
#173 AR 2017-03-09 04:47
In organization chart, if employee reporting to more than one person. How can we show the flow/ connection?
Quote
 
 
#172 Alagar Raja K 2017-03-06 04:28
Hi Team,

Is it possible to export the organization chart in PPT format?
Can you please give some idea to implement this?

Thanks in advance.
Quote
 
 
#171 Administrator 2016-10-04 18:13
Quoting aparna:
Is it possible to apply Matrix configuration for child nodes when generating chart PDF with PDFKit

Yes, set chart config property leavesPlacement Type to primitives.common.ChildrenPlaceme ntType.Matrix or set childrenPlaceme ntType of individual parent to primitives.common.ChildrenPlaceme ntType.Matrix
Quote
 
 
#170 aparna 2016-10-04 17:55
Is it possible to apply Matrix configuration for child nodes when generating chart PDF with PDFKit
Quote
 
 
#169 Administrator 2016-08-19 15:21
Quoting Lucy:
Hi,

Is there any way we can stop/cancel the oncursor/onselect event?

Fixed in update 3.1.0. See interactivity options for Large Hierachy Demo
Quote
 
 
#168 Administrator 2016-08-17 16:12
Quoting Sheri:
Another question! How do I get rid of the yellow/orange highlight border when an item is clicked? I have looked through the references and attempted to set the "highlightBorder Width" to 0 but it didn't do anything!

Update 3.1.0 has new option navigationMode to disable highlight, cursor when needed, see primitives.common.NavigationMode for options. You can try this option in Large Hierarchy Demo as well.
Quote
 
 
#167 Administrator 2016-07-29 06:43
Quoting Sheri:
Another question! How do I get rid of the yellow/orange highlight border when an item is clicked? I have looked through the references and attempted to set the "highlightBorder Width" to 0 but it didn't do anything!

Widget supports highlight and cursor, they have different functional purpose. The one you see on click is the cursor. See cursor template use cases. Check CSS styles file as well.
Quote
 
 
#166 Sheri 2016-07-28 15:58
Another question! How do I get rid of the yellow/orange highlight border when an item is clicked? I have looked through the references and attempted to set the "highlightBorder Width" to 0 but it didn't do anything!
Quote
 
 
#165 Sheri 2016-07-28 09:26
Quoting Administrator:
Quoting Sheri:
I am curious about the blue border that appears around the diagram container when an item is chosen. I have been unable to find the CSS that is controlling this. Can you point me in the right direction? Thanks

It is keyboard focus outline.


Thanks! I was pretty sure it was the outline but removing it from the diagram didn't work. I had to remove it from the whole page using

:focus {
outline: 0;
}
Quote
 

Add comment


Security code
Refresh

Print Preview & Export to Image

Do you need?

Diagrams
 

Do you need?

jQuery API Compatibility
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support