Available only in PRO Edition
To begin with, create a new HTML file and include the related Webix code files in it.
Required code files are:
A basic html page with the included code files
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Organogram</title>
<script src="../codebase/webix.js" type="text/javascript"
charset="utf-8"></script>
<link rel="stylesheet" href="../codebase/webix.css" type="text/css"
charset="utf-8">
</head>
<body>
<script> //here you will place your JavaScript code
</script>
</body>
</html>
Next, you should create a div container to place your organogram into.
<div id="box" style="width:900px;height:450px;"></div>
Now you can initialize the component. To create a new Organogram object, you need to use the next constructor:
Organogram constructor
var orgChart = new webix.ui({view:"organogram"});
If you want to place the component into the container, you should specify the container property inside of the view constructor:
Basic Organogram configuration
var orgChart = new webix.ui({
container:"box",
view:"organogram"
});
Related sample: Organization Chart
Back to top