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



Basic Primitives (359.23 kB)

Basic Primitives JavaScript Diagrams - implement organizational and multi-parent hierarchical charts. Archive contains implementations of JavaScript Controls, jQuery UI Widgets and PDFkit plugins. PDFkit is NodeJS and in browser PDF rendering library. Diagrams visualize structures using default or user defined templates. Diagrams use custom layout algorithms auto fitting selected items of hierarchy into available space, creating local zoom-in effect via auto-folding nodes into dots and lines in order to save screen space and show only selected nodes in diagrams in normal size. Diagrams designed to visualize large number of nodes. Demos contain up to 750 items. Diagrams work in all major browsers Internet Explorer, Chrome, Firefox, Safari including mobile browsers.

This archive is also published as NPM Package:

Demos & Use Cases:

JavaScript Controls, jQuery UI Widgets and AngularJS Directive

  • Large Hierarchical Chart navigation demo
  • Vertical & Matrix Organizational Chart layout demos
  • Client side PDF generation demo.
  • Organizational Chart Editor 
  • Family Tree
  • Dependencies Chart
  • Partners in Organizational Chart
  • Drag & Drop
  • Cross Functional Group visualization demo
  • Bootstrap Styling Demo

This archive is copy of GitHub repository:

ReactJS Demos & Use Cases:

ReactJS Organizational and Family Chart Components. PDFKit Plugins.

See React Live Demo:

  • Large Hierarchical Chart navigation demo
  • Vertical & Matrix Organizational Chart layout demos
  • Organizational Chart Editor 
  • Family Tree
  • Partners in Organizational Chart
  • Cross Functional Group visualization demo
  • Highlight Movement & Annotations
  • Dependencies Diagram
  • Financial Ownership Diagram
  • Patents Inheritance Diagram

React demo project is based on popular starter ReactJS Redux Universal Hot Example boilerplate, read project instructions and support for better understanding of the demo architecture:

  • Isomorphic Universal rendering
  • Both client and server make calls to load data from separate API server
  • React
  • React Router
  • Express
  • Feathers
  • Passport, feathers-authentication and redux-auth-wrapper for authentication
  • Babel for ES6 and ES7 magic
  • Webpack for bundling
  • Webpack Dev Middleware
  • Webpack Hot Middleware
  • Redux's futuristic Flux implementation
  • Redux Dev Tools for next generation DX (developer experience). Watch Dan Abramov's talk.
  • React Router Redux Redux/React Router bindings.
  • ESLint to maintain a consistent code style
  • react-final-form to manage form state
  • lru-memoize to speed up form validation
  • multireducer to combine single reducers into one key-based reducer
  • style-loader, sass-loader and less-loader to allow import of stylesheets in plain css, sass and 
  • less,
  • bootstrap-loader to customize Bootstrap
  • font-awesome
  • react-helmet to manage title and meta tag information on both server and client
  • webpack-isomorphic-tools to allow require() work for statics both on client and server
  • Jest to allow writing unit tests for the project.
  • PDFKit to generate client side diagrams

We host react-demo repository at github as well. 


Copy of on-line reference. Unzip archive and run index.html

This is archive of version 4.3.0 including demos & reference files.

  • PHP 5.2 & MySQL Demo - built in  & AJAX data loading samples.

Basic Primitives ASP.NET MVC Sample - rendering of Basic Primitives First Organizational Chart on ASP.NET MVC page

Basic Primitives ASP.NET 3.5 custom control Demo. jQuery UI Widget based control visualizes hierarchical structure in form of organizational chart using default or user defined client side JavaScript templates.

 Warning! This sample is no longer being updated.

How to use:

  • ASP.NET Web Form application should include next JavaScript files: jquery-1.7.2.js, jquery.json-2.3.min.js, jquery-ui-1.8.16.custom.min.js and css file: jquery-ui-1.8.16.custom.css
  • ASP.NET Web Form application must contain AJAX "ScriptManager" component.
  • Please rebuild project in order to see control in Visual Studio toolbox. Design time preview is not implemented, but control's API is complete.

It has next major features:

  • Supports Regular, Adviser, Assistant and Partner item types having sub hierarchies.
  • Vertical, Horizontal & Matrix leaves layouts
  • Selected & Checked items.
  • Default customizable template.
  • Custom server side rendered item templates supporting data bindings.
  • Selected item template. Derived item classes serialization.
  • Optional immediate post backs
Display Num 
Powered by Phoca Download

Check Your Maintenance Status

License maintenance status is available for registered users only. Create user account and login.

Do you need?


Do you use?

JavaScript Frameworks

Do you use?

PDF & Image Export Support