Blog

Life is not on Instagram, let us choose Organogram

I remember my school years and those long evenings spent by painting a family tree. It was the first time in life when I faced the inevitable consequences of a poorly planned work – the sheet of paper unexpectedly came to an end and I had to redraw the scheme from the very beginning. That was a fail!

Organogram

 

Time has passed and new technologies stepped into our lives offering a number of tools for that trivial task. I also saw that the big world is built around the same hierarchical schemes used everywhere: from simple IT org charts to multi-department companies’ hierarchy.

And although there’s a number of tools for manual drawing of organograms, drawing itself is no longer needed. Now I can simply pass the data into a cute Webix organogram widget and feast my eyes upon the ready-made chart in the browser!

No magic, just code (and Webix Pro):

webix.ui({ view:"organogram", data: chart_data });
Webix_organogram

Live demo

All we need is customization

Ok, I see. Blue boxes placed into a straightforward layout  are not that fantastic. For these needs Webix worked out a clear and simple way of configuring and styling, which means that whatever you cannot tune by widget properties can be changed in the CSS.

Let’s first of all dig into the JS config. There we can find two possibilities of item arrangement:

  • Child items are placed horizontally under the parent item, to which they are connected by a blue line (wait a minute, we will make it purple). No settings are required, it’s a default layout;
  • Child items are  placed vertically under the parent one thus forming lists of dependent items. Such behavior needs to be set explicitly in the dataset with the $type property:
data:[
{ id:"1.1.2", value:"Development", $type: "list", data:[
        { id:"1.1.2.1", value:"- Faculty development workshops" },
        { id:"1.1.2.2", value:"- Student development" }
        ]}
]
Webix_organogram

Live demo

If needed, list items can be dispersed to separate blocks, which is switched on in the Organogram configuration:

webix.ui({
view:"organogram",
type:{
        listMarginX: 20, listMarginY: 20
}
});

Live demo

Further on, let’s stylize our Organogram. We can use the full power of CSS to add colors for blocks and lines as well as define item template, insert bright icons… Gosh, I’m  the painter!

Webix_organogram

Live demo

Why going this way?

A customized Webix Organogram can contain lots of helpful information like colored labels, pictures, interactive icons, page and email links.

No more “end-of-the-sheet” problems. The organogram is built automatically and can adjust to the dimensions of its contents. If a container is smaller than the Organogram needs, scrollbars will appear.

With  Organogram you can always stay up-to-date: once configuration and styling are defined, you only need to reload data  to actualize it. The data can come in all the Webix supported formats.

And, of course, dynamics. Nodes can be filtered, opened and closed! Interactivity can also be achieved with the help of  numerous events that are already familiar to you from Webix Tree API.

Enough talking, it’s time to experiment! Browse the samples, read the docs and practice in the snippet tool. Hope your life will play bright colors while remaining well-organized and clear to understand. Btw, are you already waiting for a new Webix 3.3 release? :)

Written by
The following two tabs change content below.
Olga Kustova

Olga Kustova

Front-end web developer fond of high-quality code and effective design. Is eager to share all the tips and tricks regarding Webix usage with wide audience.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on del.icio.us Vote on Reddit
  • Josh

    The organogram works very well for creating hierarchical organizations. It does not work well for family trees, sadly.