Creating Diagram on a Page

After installing Diagram, you can initialize in on a page and provide the desired configuration.

Initialization

The minimum configuration required to start working with Diagram is the following:

webix.ui({
  view:"diagram",
  data: [
    { id:"1", value:"Managing Director"},
    { id:"1.1", value:"Base Manager"},
    { id:"1.1.1", value:"Store Manager" },
    // other blocks
  ], 
  links: [
    { source:"1", target:"1.1"},
    { source:"1.1", target:"1.1.1"},
    // other links
  ],
  // ...
});

Related sample: Diagram: Basic

The data property stores a flat array of block items that are to be rendered on the chart. Meanwhile the links array stores the connectors (links) between these block items.

Diagram can work with the JSON and XML formats, but keep in mind that, if the incoming data are in XML, you need to specify the datatype property passing "xml" as its value:

webix.ui({
  view:"diagram",
  datatype: "xml",   data: "remote/data.xml", 
  links: "remote/links.xml",
  // ...
});

Main Configuration

Below you can find main configuration properties of Diagram:

url (string) - a URL to load blocks from
data (string,array) - an array of blocks for graphing or XML string
links (string, array, object) - a URL to load links from or an array with link objects or a DataCollection
shapes (array) - stores configuration of shapes
autoplace (boolean) - defines whether to place blocks automatically. true by default
root (string, number) - ID of the root item for autoplacement
item (object) - defines common settings for all the blocks
linkItem (object) - defines common settings for all the links
treePadding (number) - defines padding between separate trees, if any
padding (number) - defines padding for all four sides of the widget. 20px by default

See the full list of available properties in the API reference.

Block Configuration

Block items are defined in the data array or loaded from the remote source specified in the url property. Each block is an object with the following fields:

width (number) - width of the block
height (number) - height of the block
x (number) - defines the horizontal position of the block. Applicable if autoplacement is disabled
y (number) - defines the vertical position of the block. Applicable if autoplacement is disabled
template (string, function) - template for the block content
type (string) - type of the block shape
css (string, function) - CSS class name or a template function that returns class name for blocks.

You can configure each block individually (e.g. inside the data array) or provide common settings for all blocks at once via the item property of Diagram:

webix.ui({
  view:"diagram",
  links: [/* link objects */],
  item: {           
    width: 70,     
    height: 30,
    // define commom config for all blocks
    type: "action",
    css: "myCss",
  } 
});

Note, that by default a block is a simple rectangle with no styling or SVG shape:

Read on how to utilize built-in shapes, style them or create custom ones in the dedicated article.