Basic Primitives

Simplified user experience. JavaScript jQuery UI Widgets Diagrams.

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

JavaScript/HTML Organizational, Family, PERT & Dependencies Chart


Supported Diagrams

  • Hierarchy Visualization
  • Organizational Chart
  • Multi-parent hierarchical chart
  • Family Tree
  • Dependencies Diagram
  • PERT chart
  • Financial Ownership Diagram

Pure JavaScript

  • 100% client side JavaScript layout and rendering.
  • Implemented in popular jQuery UI Widget specification, it has dependencies on jQuery and jQuery UI libraries. It supports composition with existing JQuery UI widgets.
  • Works in all major browsers Internet Explorer, Chrome, Firefox, Safari and mobile browsers. Supports graphics rendering in VML, SVG and Canvas modes depending on browser. Warning: The web site itself does not support IE6-IE7 so if you need to verify widget in IE6, please download demo archive.

PDF support

Free for Non-commercial

Do you want to use Basic Primitives Diagram for a personal website, a school site or a non-profit organization? Then you don't need the author's permission, just go on and use Basic Primitives Diagram. For commercial websites and projects, see License and Pricing.

Open

One of the key features of Basic Primitives Diagram that under any of the licenses, free or not, you are allowed to download the source code and make your own edits. This allows personal modifications and a great flexibility. The comprehensive set of samples, demos and unit tests guarantees quality of the library's source code.

Auto layout

The main problem of diagrams drawn in graphics editor is in sparse distribution of items on layout. Large gaps between nodes make chart hard to overview, edit and navigate. Sometimes the chart is so big that it could have screen size intervals between items. This issue makes the whole idea of visualizing diagrams useless. At the same time computer UI allows to scale and fit visualization into screen, but in that case items become small and unreadable. The primary goal of our approach to Organizational chart and other diagrams visualization is to resolve these issues and make good use of them at the same time. The widget finds the best way to display a large hierarchy within available screen space without scrolling or with minimal scrolling not affecting usability. 

  • Diagram shape overview. Widget minimizes items in order to fit diagram visualization into available screen space and provides user with  possibility to overview general diagram layout.
  • User focus navigation goes node by node. Chart displays cursor item and its neighbors full size and minimizes all other less relevant nodes. By clicking on neighboring nodes user will move the focus of interest to the newly selected part of the diagram. 
  • Pinning of items in diagram. All selected/check marked items are always displayed full size, all other items stay minimized, so it allows to pin/select items in different branches and show them side by side within available screen space for location comparison.
  • Diagram design consistency. Auto layout without user's manual editing provides visual consistency across all diagramming documents. All users have various skills and preferences, so auto layout provides consistent diagrams visualization.
  • Always up to date. Your application diagrams will not be affected by changes in Widget's layout algorithms and application data. Your visualizations will be always up to date and in sync with your data. 

Provides simple API for the most common use cases:

  • Default item template has: Title, Image & Description
  • Vertical Group Titles
  • Selection Check Box
  • User buttons panel
  • Labels
  • Annotations

Flexible API for more complex use cases

  • Customizable item, highlight and cursor content templates.
  • Custom layout parent/child relation types: Adviser, Assistant and various partners. Multiple parents, multiple managers or co-heads visualization.
  • Custom children and leaves layout: Vertical, Horizontal and Matrix
  • Left/Right layout alignment support.
  • Events

Compatible

  • Works with jQuery UI Dragable & Droppable interactions.
  • Works in AngularJS directive
  • Works in ASP.NET controls

Dynamic

  • Through a full API you can add, remove and modify individual items and their properties at any other time after organizational chart rendering. Widget update time is as fast as its navigation.
 

Updates

jQuery UI Widgets
v.3.6.1
See change log for details


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support