Basic Primitives
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
Copyright (c) 2013 - 2018 Basic Primitives Inc
Non-commercial - Free
http://creativecommons.org/licenses/by-nc/3.0/
Commercial and government licenses:
http://www.basicprimitives.com/pdf/license.pdf