JavaScript Diagrams Library - implements organizational and multi-parent diagrams. Archive contains implementations of JavaScript Controls and PDFkit plugins. PDFkit is NodeJS and in browser PDF rendering library. Diagrams visualize nodes using HTML templates combined with HTML5 Canvas and SVG graphics elements. Diagrams work in all major modern browsers Internet Explorer, Chrome, Firefox, Safari including mobile browsers.

Supported Diagrams

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

Getting Started

Go to http://www.basicprimitives.com to see on-line examples and samples.

First Organizational Diagram Sample

<!DOCTYPE html> 
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>First organization diagram</title>

	<!-- # include file="../../src.primitives/src.primitives.html"-->
	<script type="text/javascript" src="../../min/primitives.min.js?5000"></script>
	<link href="../../min/primitives.latest.css?5000" media="screen" rel="stylesheet" type="text/css" />

	<script type='text/javascript'>
		var control;
		var timer = null;

		document.addEventListener('DOMContentLoaded', function () {
			var options = new primitives.orgdiagram.Config();

			var items = [
				new primitives.orgdiagram.ItemConfig({
					id: 0,
					parent: null,
					title: "Scott Aasrud",
					description: "VP, Public Sector",
					image: "../images/photos/a.png"
				}),
				new primitives.orgdiagram.ItemConfig({
					id: 1,
					parent: 0,
					title: "Ted Lucas",
					description: "VP, Human Resources",
					image: "../images/photos/b.png"
				}),
				new primitives.orgdiagram.ItemConfig({
					id: 2,
					parent: 0,
					title: "Fritz Stuger",
					description: "Business Solutions, US",
					image: "../images/photos/c.png"
				})
			];

			options.items = items;
			options.cursorItem = 0;
			options.hasSelectorCheckbox = primitives.common.Enabled.True;

			control = primitives.orgdiagram.Control(document.getElementById("basicdiagram"), options);
		});

	</script>
</head>
<body>
	<div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
</body>
</html>

License

Commercial and government licenses: http://www.basicprimitives.com/pdf/license.pdf

FAQs

What is basicprimitives?

Is basicprimitives well maintained?

Last updated on 04 Nov 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install