Comparing capabilities of Diagram and Organogram

In this article, we compare 2 widgets of different generations. They are dedicated for working with diagrams. These are the outdated Organogram and a new member of the Webix family – Diagram widget, that came with the 8.3 spring release.

Both widgets are designed for building charts, yet their functionalities differ wildly. We can give an analogy with the capabilities of a tricycle and a sport bicycle. In this situation, the Organogram can be thought of as a tricycle. You may move around on it, but over long distances, such a bike is of little use.

The Diagram widget is a complete game changer. It is like a sport bike – fast, dependable and maneuverable. Its capabilities allow you to feel confident both at short and long distances.

Let’s proceed to the comparison of these widgets.

Marketing Differences

Currently, the Organogram widget is still available as a part of the standard Webix Core package. However, the widget is deprecated and starting from version 9.0 it will be completely removed from the Webix Core package.

The new Diagram widget will not be included in the standard Webix library. To purchase Diagram, you need to get acquainted with the prices of existing packages and choose the desired one for you. Read more about this on the Licensing and Pricing page.

Technical Differences

Chart structures

The Organogram supports only hierarchical relationships between blocks. To draw the diagram, the widget needs the corresponding tree-like data.


Live demo

The new Diagram widget doesn’t have such restrictions. Besides the tree-like dependencies between blocks, you can visualize any type of block relations that is required by your project. Moreover, in the new widget, the data for blocks and links are separated, which allows you to expand the process of charting significantly.


Live demo

SVG Block Shapes

The Organogram widget doesn’t support built-in SVG shapes. Each block of the diagram is a plain HTML element. You can just set the desired shape using CSS properties.

In addition to the regular blocks, Diagram allows you to work with any SVG shape. You can use the built-in shapes, modify and style them to your liking, as well as add and customize your own SVG shapes. The only restriction is your imagination.


Live demo

Arranging Blocks and Links

Organogram can only autoplace the blocks and links between them. Auto placement is not always convenient, especially when you need a high precision.

Diagram, on the contrary, allows you not only to autoplace blocks and links but also set fixed coordinates for them. You can also connect any blocks of the chart.


Live demo

Styling links

Organogram doesn’t support styling and managing links between blocks. They are arranged automatically, depending on the tree-like data structure.

Diagram allows you to control both the placement of links and their look. You can set the mode of link, provide coordinates to place links by, as well as add an arrow and style it as you like.


Live demo

Working with Margins

The indent calculating system of the Diagram widget is slightly different from that in Organogram. You can set vertical and horizontal margins in relation to the default block placement. For this, you can use the new margin property. The same margins can be set separately via the corresponding marginX and marginY properties. In Organogram, these two properties define the immediate distance between blocks. For the blocks list, you can set a separate margin via the listMarginX property only.

Migration from Organogram to Diagram

If you are accustomed to work with Organogram and think that it is difficult to migrate to Diagram, then I can assure you that it is not at all. In the examples below, you can see how to create identical charts on the Organogram and Diagram widgets.

We will take this tree-like chart as an example:

Organogram

The Organogram code looks like this:

webix.ui({
  view:"organogram",
  item:{
    width:110,
    height:70
  },
  select:true,
  data:tree
});

The tree-like data for this diagram is loaded via the data property and look like this:

 const tree = [
    { id:"1", value:"Managing Director", data:[
      { id:"1.1", value:"Finance Manager", data:[
        { id:"1.1.1", value:"Accountant" }
      ]},
      { id:"1.2", value:"Base Manager", data:[
        { id:"1.2.1", value:"Security" },
        { id:"1.2.2", value:"Store Manager" },
        { id:"1.2.3", value:"Office Assistant" }
      ]},
        { id:"1.3", value:"Business Development Manager", data:[
        { id:"1.3.1", value:"Marketing Executive" }
      ]}
    ]}
  ];

In the following example you can see how the Organogram widget works. You can also experiment with the data here.

Diagram

Now let’s implement the same chart using the Diagram widget. The code looks like this:

webix.ui({
  view:"diagram",
  item:{
    width: 110,
    height: 70
  },
  select:true,
  data:tree,
  links:tree_links
});

As you can see, the relative differences are minor. You need to consider that the Diagram requires 2 corresponding data sources, separately for blocks and links.

Data for blocks:

const tree = [
 { id:"1", value:"Managing Director" },
 { id:"1.1", value:"Base Manager" },
 { id:"1.1.1", value:"Store Manager" },
 { id:"1.1.2", value:"Office Assistant" },
 { id:"1.1.3", value:"Security" },
 { id:"1.2", value:"Business Development Manager" },
 { id:"1.2.1", value:"Marketing Executive" },
 { id:"1.3", value:"Finance Manager" },
 { id:"1.3.1", value:"Accountant" }
];

Data for links:

const tree_links = [
 { source:"1", target:"1.1" },
 { source:"1.1", target:"1.1.1" },
 { source:"1.1", target:"1.1.2" },
 { source:"1.1", target:"1.1.3" },
 { source:"1", target:"1.2" },
 { source:"1.2", target:"1.2.1" },
 { source:"1", target:"1.3" },
 { source:"1.3", target:"1.3.1" }
];

As it might be seen, the migration from Organogram to Diagram is as easy as pie. In the following example, you can see how the Diagram widget works. You can also experiment with the data here.

Further development

The Webix team will no longer support the Organogram widget. Starting from version 9.0, Organogram will not be included in the standard Webix Core package.

At the same time, our developers work hard to deliver a visual editor for Diagram that will allow users to manage diagrams in a handy way.

Conclusion

In this article, we discovered the main differences between Organogram and Diagram, touched upon the marketing nuances and figured out how to migrate from the outdated Organogram to the new Diagram smoothly. You can learn more about all the features of the Diagram widget on the documentation page.