Available only in PRO Edition

Loading Data into Organogram

Webix Organogram can get data in the following predefined data formats:

  1. JSON (default);
  2. XML.

Details and examples of data formats in tree-like structures

JSON

[
    { 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" }
            ] }
        ] }
     ]}
]

XML

<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:

  1. Define the data set in the object initialization;
  2. Use parse or load methods.

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'.

Loading from inline dataset

If you want to specify the data set directly on the page, you can use:

  1. property data
  2. method parse

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

Loading from a data file

To load data from a file on the server, you can use:

  1. property url
  2. method load

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');

Loading from a database

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