Available only in PRO Edition
Webix Organogram can get data in the following predefined data formats:
Details and examples of data formats in tree-like structures
[
{ id:"1", value:"Manager", data:[
{ id:"1.1", value:"Store Manager" },
{ id:"1.2", value:"Office Assistant" , data:[
{ id:"1.2.1", value:"Dispatcher", data:[
{ id:"1.2.1.1", value:"Drivers" }
] }
] }
]}
]
<data>
<item id="1" value='Manager'>
<item id="1.1" value='Store Manager'></item>
<item id="1.2" value='Office Assistant'>
<item id="1.2.1" value='Dispatcher'>
<item id="1.2.1.1" value='Drivers'></item>
</item>
</item>
</item>
</data>
There are two main ways you can specify the data source for Organogram:
Both methods lead to the same result.
If you load XML data you need to set the datatype property in the constructor config or the second parameter of the parse / load method to the name of the expected data type, i.e. 'xml'.
If you want to specify the data set directly on the page, you can use:
Specifying data inline
chart_data = [
{id:"root", value:"Board of Directors", data:[
{ id:"1", value:"Managing Director", data:[
{id:"1.1", value:"Base Manager", data:[
{ id:"1.1.1", value:"Store Manager" },
{ id:"1.1.2", value:"Office Assistant", data:[
{ id:"1.1.2.1", value:"Dispatcher", data:[
{ id:"1.1.2.1.1", value:"Drivers" }
] }
] },
{ id:"1.1.3", value:"Security" }
]},
{ id:"1.2", value:"Business Development Manager", data:[
{ id:"1.2.1", value:"Marketing Executive" }
]},
...
]}
]}
];
var orgChart = new webix.ui({
view:"organogram",
...
data: chart_data
});
//or
orgChart.parse(chart_data)
Related sample: Organization Chart
To load data from a file on the server, you can use:
Remember, in case of XML data you should specify the data type explicitly as 'xml':
orgChart = new webix.ui({
view: "organogram",
...
url: "data/data.xml",
datatype: "xml"
});
//or
orgChart.load('data/data.xml', 'xml');
As the Organogram component is based on the TreeStore, you can also load data from a database on the server. For the details, read the article Loading Data into Tree.
Back to top