Webix JavaScript Diagram widget Review
A forced lockdown has become a daily routine for many. We seem to never work in the office. The Webix team has quickly got used to the new reality and continues working productively in any circumstances.
We’ll tell you about a new complex widget from the Webix UI library. Webix JavaScript Diagram allows you to create any diagrams, as well as place tree data and data with cyclic dependencies. Like all Webix widgets, Diagram is easily customizable and set to meet the requirements of the project.
What are complex Webix widgets?
Let’s remember what the features of complex widgets are. These are full-fledged applications that can be used as a finished product in any environment. All widgets are easy to configure and integrate into existing solutions, as well as frameworks.
Webix Diagram differs from other widgets in that it is a tool for building diagrams of different types. This tool can be used with both client and server data.
Webix JS Diagram Overview
Let’s take a closer look at the new widget from Webix.
Webix JS Diagram is intended to replace Organogram. Starting with Webix 9.0, Organogram will not be supported. The main task of both widgets is to create complex diagrams that reflect the links between the data. But Diagram has significantly expanded the list of features. First things first.
Various chart types library
You can create any diagram you wish with Webix JS Diagram:
- Block Diagram
- Decision Tree
- UML Class
- UML Activity
- Network Diagram
- Organization Chart
- Flowchart
- Venn Diagram
- Fishbone Diagram
See the examples to choose the solution you like.
Automatic placement of chart blocks
The settings assume automatic placement following the specified links, as well as placement at the specified coordinates. The width and height of the blocks can also be set. All this is possible thanks to the powerful algorithms embedded in the widget. See the code snippet.
Auto-placement is enabled in the widget settings by default. All you need to do is pass the data for the blocks to the diagram and specify the links between them, and the algorithm will do the rest for you. If you need to create a chart with non-standard block placement, you can disable auto-placement and specify the coordinates manually. See the code snippet.
When auto-placement is enabled, operations such as deleting, adding, updating, sorting, and filtering will result in the corresponding automatic placement of blocks. You can also control the distances between blocks or between multiple diagrams using special settings.
By disabling auto-placement, you can manually set the coordinates of each diagram element.
Styling of blocks and links between them
By default, Diagram offers a standard block shape in the form of a simple rectangle without styling. However, the widget does not limit your imagination. You can choose any shape of the blocks for the diagram: rhombus, oval, trapezoid, circle, hexagon, etc. See the snippet.
You can provide your SVG shape for individual blocks or the entire diagram at once. The item property sets the general configuration for all blocks. Inside the item object, you can set block shape settings using the type field.
Styling is done using CSS, as well as using the style properties of the blocks. You can style both SVG shapes and text inside blocks. Diagram also allows you to dynamically change the styles for specific blocks.
In addition, it is possible to set default styles for shapes:
- background and line color
- rotation
- text style/font style
- alignment
The same settings can be defined for each block separately to fine-tune the final diagram.
The data of the lines connecting blocks is loaded into the Diagram from an array of JSON, XML strings, URL addresses, or data collections. You can set the line thickness, color, and transparency, as well as add a front or simple arrow and define its appearance/type: standard or triangle. The triangle can also be hollow or filled. Each connector can be configured individually, or you can set the settings for all the diagram lines.
The Diagram library offers the following standard connector types:
- Edges
- Direct
- Child (purple)
- Sibling (Green)
Additional features
Webix Diagram has a standard upload API. This allows you to use JSON and XML data for blocks and links. It is also possible to perform all CRUD operations (create, read, update, delete) with data elements, filter and sort them.
Documentation, API Reference, Programming samples catalog.
Conclusion
The Webix UI Library continues to work on its product and improve existing solutions. The JS Diagram widget confirms this. With it, you can arrange the data in a structured form and do it not only conveniently and functionally, but also elegantly.
