Ej1 api migration in TypeScript Diagram control
18 Nov 201824 minutes to read
This article describes the API migration process of Diagram component from Essential® JS 1 to Essential® JS 2.
Background
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the background color of diagram elements |
Property: backgroundColor
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
backgroundColor: "red"
});
|
Property: backgroundColor
let diagram: Diagram = new Diagram({
backgroundColor: 'red'
});
diagram.appendTo('#diagram');
|
| Defines how to align the background image over the diagram area |
Property: backgroundImage.alignment
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
backgroundImage:{
alignment: ej.datavisualization.Diagram.ImageAlignment.XMidYMid
}
});
|
Property: background.align
let diagram: Diagram = new Diagram({
pageSettings: {
background: {
align: 'XMidYMid'
}
}
});
diagram.appendTo('#diagram');
|
| Defines how the background image should be scaled/stretched |
Property: backgroundImage.scale
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
backgroundImage:{
scale: ej.datavisualization.Diagram.ScaleConstraints.Meet
}
});
|
Property: background.scale
let diagram: Diagram = new Diagram({
pageSettings: {
background: {
scale: 'Meet'
}
}
});
diagram.appendTo('#diagram');
|
| Sets the source path of the background image |
Property: backgroundImage.source
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
backgroundImage:{
source:"Syncfusion.png"
}
});
|
Property: background.source
let diagram: Diagram = new Diagram({
pageSettings: {
background: {
source: 'Syncfusion.png'
}
}
});
diagram.appendTo('#diagram');
|
Bridging
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Sets the direction of line bridges |
Property: bridgeDirection
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
bridgeDirection: ej.datavisualization.Diagram.BridgeDirection.Bottom
});
|
Property: bridgeDirection
let diagram: Diagram = new Diagram({
bridgeDirection: 'Top'
});
diagram.appendTo('#diagram');
|
CommandManager
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| commands |
Property: commandManager.commands
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property: commandManager.commands
let diagram: Diagram = new Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| The command is executable at the moment or not. |
Property: commandManager.commands.canExecute
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property: commandManager.commands.canExecute
let diagram: Diagram = new Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Defines what to be executed when the key combination is recognized |
Property: commandManager.commands.execute
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property: commandManager.commands.execute
let diagram: Diagram = new Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Defines a combination of keys and key modifiers, on recognition of which the command will be executed |
Property: commandManager.commands.gesture
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property: commandManager.commands.gesture
let diagram: Diagram = new Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Sets the key value, on recognition of which the command will be executed |
Property: commandManager.commands.gesture.key
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property: commandManager.commands.gesture.key
let diagram: Diagram = new Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Sets a combination of key modifiers, on recognition of which the command will be executed. |
Property: commandManager.commands.gesture.keyModifiers
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
commandManager: {
commands: {
"clone": {
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property: commandManager.commands.gesture.keyModifiers
let diagram: Diagram = new Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
| Defines any additional parameters that are required at runtime |
Property: commandManager.commands.parameter
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
commandManager: {
commands: {
"clone": {
parameter : "node",
gesture: {
key: ej.datavisualization.Diagram.Keys.C,
keyModifiers: ej.datavisualization.Diagram.KeyModifiers.Shift
},
canExecute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
return diagram.model.selectedItems.children.length;
},
execute: function(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.copy();
diagram.paste();
}
}
}
}
});
|
Property: commandManager.commands.parameter
let diagram: Diagram = new Diagram({
commandManager: {
commands: [{
name: 'customCopy',
parameter: 'node',
canExecute: function() {
if (diagram.selectedItems.nodes.length > 0 || diagram.selectedItems.connectors.length > 0) {
return true;
}
return false;
},
execute: function() {
for (let i: number = 0; i < diagram.selectedItems.nodes.length; i++) {
diagram.selectedItems.nodes[i].style.fill = 'red';
}
diagram.dataBind();
},
gesture: {
key: Keys.G,
keyModifiers: KeyModifiers.Shift
}
}]
}
});
diagram.appendTo('#diagram');
|
Connectors
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| addInfo |
Property: connectors.addInfo
let addInfo = {
Description: "Bidirectional Flow"
};
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
addInfo: addInfo
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.addInfo
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the bridgeSpace of connector |
Property: connectors.bridgeSpace
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 200,
y: 200
},
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.bridgeSpace
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 600,
y: 200
}
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Enables or disables the behaviors of connectors |
Property: connectors.constraints
let ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.constraints
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the radius of the rounded corner |
Property: connectors.cornerRadius
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cornerRadius: 10, segments:[{ type: "orthogonal"}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.cornerRadius
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
cornerRadius: 10,
type: 'Orthogonal',
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| cssClass |
Property: connectors.cssClass
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cssClass: "hoverConnector"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Alignment |
Property: connectors.horizontalAlign
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
horizontalAlign:ej.datavisualization.Diagram.HorizontalAlignment.Right
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| A collection of JSON objects where each object represents a label |
Property: connectors.labels
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
labels:[{ text:"connector" }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.annotations
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
annotations: [{ id: 'label', content: 'Text', offset: 0.5 }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| stroke color of the connector |
Property: connectors.lineColor
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor:"blue"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.style.strokeColor
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue' },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the pattern of dashes and gaps used to stroke the path of the connector |
Property: connectors.lineDashArray
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor:"blue", lineDashArray: "2,2"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.style.strokeDashArray
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the width of the line |
Property: connectors.lineWidth
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineWidth: 10
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.style.strokeWidth
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the padding value to ease the interaction with connectors |
Property: connectors.lineHitPadding
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineHitPadding: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.hitPadding
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
hitPadding: 10
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the bottom of parent bounds and the connector |
Property: connectors.marginBottom
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginBottom: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.margin.bottom
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { bottom: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the top of parent bounds and the connector |
Property: connectors.marginTop
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginTop: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.margin.top
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { top: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the left of parent bounds and the connector |
Property: connectors.marginLeft
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginLeft: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.margin.left
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { left: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the right of parent bounds and the connector |
Property: connectors.marginRight
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginRight: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.margin.right
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { right: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets a unique name for the connector |
Property: connectors.name
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.id
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the transparency of the connector |
Property: connectors.opacity
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
opacity: 0.5
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.style.opacity
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2', opacity: 0.5 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the parent name of the connector. |
Property: connectors.parent
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
parent:"group"
};
let group = { name :"group", children:["connector"] };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector],
nodes:[group]
});
|
Not applicable |
| An array of JSON objects where each object represents a segment |
Property: connectors.segments
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the direction of orthogonal segment |
Property: connectors.segments.direction
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }, direction:"bottom"}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.direction
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length of orthogonal segment |
Property: connectors.segments.length
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }, length:50 }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.length
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the end point of bezier/straight segment |
Property: connectors.segments.point
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 } }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.point
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Straight', point: { x: 800, y: 50 } }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the first control point of the bezier segment |
Property: connectors.segments.point1
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50} }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.point1
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the second control point of bezier segment |
Property: connectors.segments.point2
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50}, point2:{ x: 150, y: 150 } }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.point2
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the segment |
Property: connectors.segments.type
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type: ej.datavisualization.Diagram.Segments.Bezier }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.type
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length and angle between the first control point and the start point of bezier segment |
Property: connectors.segments.vector1
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180} }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.vector1
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 900, y: 160 },
vector1: { angle: 20, distance: 75 },
vector2: { angle: 20, distance: 75 }
}],
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length and angle between the second control point and end point of bezier segment |
Property: connectors.segments.vector2
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [
{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180}
}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.segments.vector2
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 900, y: 160 },
vector1: { angle: 20, distance: 75 },
vector2: { angle: 20, distance: 75 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the connector |
Property: connectors.shape.type
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape: { type: "bpmn"},
segments: [{ type:"straight" }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.shape.type
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}],
shape: { type: 'Bpmn', flow: 'Message', message: 'InitiatingMessage' }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the source decorator of the connector |
Property: connectors.sourceDecorator
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the source decorator |
Property: connectors.sourceDecorator.borderColor
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", borderColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator.style.strokeColor
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
style: { strokeColor: 'red' },
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property: connectors.sourceDecorator.borderWidth
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", borderWidth: 5 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator.style.strokeWidth: 5
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow', strokeWidth: 5
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize sourceDecorator appearance using user-defined CSS |
Property: connectors.sourceDecorator.cssClass
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the source decorator |
Property: connectors.sourceDecorator.fillColor
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", fillColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator.style.fill
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow', fill: 'black'
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the source decorator |
Property: connectors.sourceDecorator.height
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator.height
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
height: 10, width: 10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the source decorator |
Property: connectors.sourceDecorator.pathData
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"path", pathData:"M 376.892, 225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator.pathData
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Custom',
pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the source decorator. |
Property: connectors.sourceDecorator.shape
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator.shape
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the source decorator |
Property: connectors.sourceDecorator.width
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourceDecorator.width
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
width: 10, height:10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source node of the connector |
Property: connectors.sourceNode
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property: connectors.sourceID
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between the source node and the source point of a connector |
Property: connectors.sourcePadding
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target",
sourcePadding: 2, targetPadding: 2
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property: connectors.hitPadding
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector |
Property: connectors.sourcePoint
let connector = {
name: "connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.sourcePoint
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source port of the connector |
Property: connectors.sourcePort
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
sourceNode:"source", targetNode:"target",
sourcePort: "port", targetPort:"port1" };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property: connectors.sourcePortID
let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target',
sourcePortID: 'port',
targetPortID: 'port1',
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the target decorator of the connector |
Property: connectors.targetDecorator
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the target decorator |
Property: connectors.targetDecorator.borderColor
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", borderColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator.style.strokeColor
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
style: { strokeColor: 'red' },
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property: connectors.targetDecorator.borderWidth
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", borderWidth: 5 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator.style.strokeWidth: 5
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow', strokeWidth: 5
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize target Decorator appearance using user-defined CSS |
Property: connectors.targetDecorator.cssClass
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the target decorator |
Property: connectors.targetDecorator.fillColor
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", fillColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator.style.fill
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow', fill: 'black'
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the target decorator |
Property: connectors.targetDecorator.height
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator.height
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
height: 10, width: 10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the target decorator |
Property: connectors.targetDecorator.pathData
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"path", pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator.pathData
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Custom',
pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the target decorator. |
Property: connectors.targetDecorator.shape
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator.shape
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the target decorator |
Property: connectors.targetDecorator.width
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetDecorator.width
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
width: 10, height:10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target node of the connector |
Property: connectors.targetNode
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property: connectors.targetID
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between the target node and the target point of a connector |
Property: connectors.targetPadding
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target",
sourcePadding: 2, targetPadding: 2
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property: connectors.hitPadding
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector |
Property: connectors.targetPoint
let connector = {
name: "connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.targetPoint
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target port of the connector |
Property: connectors.targetPort
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
sourceNode:"source", targetNode:"target",
sourcePort: "port", targetPort:"port1" };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property: connectors.targetPortID
let nodeport1: PointPortModel = { id: 'port', shape: 'Square', offset: { x: 1, y: 0.5 } };
let nodeport2: PointPortModel = { id: 'port1', shape: 'Square', offset: { x: 0, y: 0.5 } };
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target',
sourcePortID: 'port',
targetPortID: 'port1',
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the tooltip that should be shown when the mouse hovers over connector |
Property: connectors.tooltip
let tooltip = {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
};
let ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
let connector = {
name: "flow",sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
tooltip:tooltip
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.tooltip
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
tooltip: {
content: 'Connector',
position: 'TopCenter', showTipPointer: true,
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of connector |
Property: connectors.verticalAlign
let connector = {
name:"connector",
sourcePoint:{x:100, y:100}, targetPoint:{x:150, y:150},
verticalAlign:ej.datavisualization.Diagram.VerticalAlignment.Bottom };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Enables or disables the visibility of connector |
Property: connectors.visible
let connector = { name:"connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
visible: true
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.visible
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
visible: true
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the z-index of the connector |
Property: connectors.zOrder
let connector = { name:"connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
zOrder: 1000 };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property: connectors.zIndex
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
zIndex: -1
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Binds the custom JSON data with connector properties |
Property: connectors.connectorTemplate
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: { id: "Id", parent: "ReportingPerson", dataSource: data },
connectorTemplate :"connectorTemplate"
});
function connectorTemplate(diagram, connector) {
if(connector.sourceNode && connector.targetNode){
connector.lineColor = "green";
}
}
|
Not applicable |
| Enables/Disables the default behaviors of the diagram |
Property: constraints
let DiagramConstraints = ej.datavisualization.Diagram.DiagramConstraints;
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging });
|
Property: constraints
let diagram: Diagram = new Diagram({
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging
});
diagram.appendTo('#diagram');
|
ContextMenu
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the collection of context menu items |
Property: contextMenu.items
let menuitems = [{ "name": "hyperLink", "text": "Hyperlink", "image": "", "style": "" }];
let contextMenu = { items: menuitems};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {contextMenu: contextMenu});
|
Property: contextMenuSettings.items
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the text for the collection of context menu item |
Property: contextMenu.items.text
let menuitems = [{ "text": "ZoomIn" }];
let contextMenu = { items: menuitems};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {contextMenu: contextMenu});
|
Property: contextMenuSettings.items.text
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
text: 'ZoomIn'
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the name for the collection of context menu items |
Property: contextMenu.items.name
let menuitems = [{ "name": "hyperLink" }];
let contextMenu = { items: menuitems};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {contextMenu: contextMenu});
|
Property: contextMenuSettings.items.id
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
text: 'delete', id: 'delete'
}]
},
});
diagram.appendTo('#diagram');
|
| Defines the image url for the collection of context menu items |
Property: contextMenu.items.imageUrl
let menuitems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "style": "" }];
let contextMenu = { items: menuitems};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {contextMenu: contextMenu});
|
Property: contextMenuSettings.items.url
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
'id': 'zoomin', 'text': 'ZoomIn','url': 'Images/zoomin.png',
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the cssClass for the collection of context menu items |
Property: contextMenu.items.cssClass
let menuitems = [{ "name": "zoomin", "text": "ZoomIn","imageUrl": "Images/zoomin.png", "cssClass":"menu", "style": "" }];
let contextMenu = { items: menuitems};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {contextMenu: contextMenu});
|
Property: contextMenuSettings.items.iconCss
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
},
});
diagram.appendTo('#diagram');
|
| Defines the collection of sub items for the context menu items |
Property: contextMenu.items.subItems
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
contextMenu: {
// Defines the custom context menu items
items: [{
name: "zoom",
// Text to be displayed
text: "Zoom",
// Defines the sub items
subItems: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
}]
}});
|
Property: contextMenuSettings.items
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
text: 'Zoom', id: 'zoom',
items: [{name: "zoomIn", text: "ZoomIn"}, {name: "zoomOut",text: "ZoomOut"}]
}],
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
| set whether to display the default context menu items or not |
Property: contextMenu.showCustomMenuItemsOnly
let contextMenu = { showCustomMenuItemsOnly: true };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {contextMenu: contextMenu});
|
Property: contextMenuSettings.showCustomMenuOnly
let diagram: Diagram = new Diagram({
contextMenuSettings: {
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
| separator | Not applicable |
Property: contextMenuSettings.items.separator
let diagram: Diagram = new Diagram({
contextMenuSettings: {
show: true, items: [{
text: 'Save', id: 'save', target: '.e-diagramcontent',
iconCss: 'e-save', separator: true
},
{
text: 'Load', id: 'load', target: '.e-diagramcontent',
iconCss: 'e-load'
},
},
});
diagram.appendTo('#diagram');
|
| Define the target to show the menu item. | Not applicable |
Property: contextMenuSettings.items.target
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
| Enables/Disables the context menu items | Not applicable |
Property: contextMenuSettings.show
let diagram: Diagram = new Diagram({
contextMenuSettings: { show: true,
items: [{
text: 'delete', id: 'delete', target: '.e-diagramcontent', iconCss: 'e-copy'
}],
showCustomMenuOnly: false,
},
});
diagram.appendTo('#diagram');
|
DataSourceSettings
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property: dataSourceSettings.dataSource
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: { dataSource: data }
});
|
Property: dataSourceSettings.dataManager
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram: Diagram = new Diagram({
dataSourceSettings: { dataManager: items },
});
diagram.appendTo('#diagram');
|
| Sets the unique id of the data source items |
Property: dataSourceSettings.id
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: { id: "Id", dataSource: data }
});
|
Property: dataSourceSettings.id
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram: Diagram = new Diagram({
dataSourceSettings: { id: 'Id', dataManager: items },
});
diagram.appendTo('#diagram');
|
| Defines the parent id of the data source item |
Property: dataSourceSettings.parent
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: { id: "Id", parent: "ReportingPerson", dataSource: data }
});
|
Property: dataSourceSettings.parentId
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram: Diagram = new Diagram({
dataSourceSettings: { id: 'Id', parentId: 'ReportingPerson', dataManager: items },
});
diagram.appendTo('#diagram');
|
| Describes query to retrieve a set of data from the specified datasource |
Property: dataSourceSettings.query
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: {
dataSource: ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
}),
query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
tableName: "Employees",
id: "EmployeeID",
parent: "ReportsTo"
}
});
|
Not applicable |
| Sets the unique id of the root data source item |
Property: dataSourceSettings.root
let data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: {
id: "Id",
parent: "ReportingPerson",
root: "E1",
dataSource: data
}
});
|
Property: dataSourceSettings.root
let items: object[] = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram: Diagram = new Diagram({
dataSourceSettings: { id: 'Id', parentId: 'ReportingPerson', dataManager: items, root: 'E1' },
});
diagram.appendTo('#diagram');
|
| Describes the name of the table on which the specified query has to be executed |
Property: dataSourceSettings.tableName
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: {
dataSource: ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
}),
query: ej.Query().from("Employees").select("EmployeeID,ReportsTo,FirstName"),
//Table name
tableName: "Employees",
id: "EmployeeID",
parent: "ReportsTo"
}
});
|
Not applicable |
| Specifies the method name which is used to get the updated data from client side to the server side |
Property: dataSourceSettings.crudAction
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
crudAction:
{
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes"
}
}
});
|
Not applicable |
| Specifies the create method which is used to get the nodes to be added from client side to the server side |
Property: dataSourceSettings.crudAction.create
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
crudAction:
{
create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddNodes",
}
}
});
|
Not applicable |
| Specifies the update method which is used to get the updated data from client side to the server side |
Property: dataSourceSettings.crudAction.update
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
crudAction:
{
update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateNodes",
}
}
});
|
Not applicable |
| Specifies the destroy method which is used to get the deleted items data from client side to the server side |
Property: dataSourceSettings.crudAction.destroy
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
crudAction:
{
destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteNodes"
}
}
});
|
Not applicable |
| Specifies the read method to get the created nodes from client side to the server side |
Property: dataSourceSettings.crudAction.read
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
crudAction:
{
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetNodes"
}
}
});
|
Not applicable |
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property: dataSourceSettings.customFields
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: {
id: 'Name',
customFields: [
"Description",
"Color"
]
}
});
|
Property: dataSourceSettings.data
let diagram: Diagram = new Diagram({
dataSourceSettings: { id: 'Name',
customFields: [
"Description",
"Color"
] },
});
diagram.appendTo('#diagram');
|
| Defines the data source either as a collection of objects or as an instance of ej.DataManager |
Property: dataSourceSettings.connectionDataSource
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name"
}
}
});
|
Not applicable |
| Sets the datasource for the connection datasource settings items |
Property: dataSourceSettings.connectionDataSource.dataSource
let data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: {
id: "Name",
connectionDataSource: {
id: "Name",
dataSource: data
}
}
});
|
Not applicable |
| Sets the unique id of the connection data source item |
Property: dataSourceSettings.connectionDataSource.id
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name"
}
}
});
|
Not applicable |
| Sets the source node of the connection data source item |
Property: dataSourceSettings.connectionDataSource.sourceNode
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
}
}
});
|
Not applicable |
| Sets the target node of the connection data source item |
Property: dataSourceSettings.connectionDataSource.targetNode
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
targetNode: "targetNode"
}
}
});
|
Not applicable |
| Sets the sourcePointX value of the connection data source item |
Property: dataSourceSettings.connectionDataSource.sourcePointX
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointX:200
}
}
});
|
Not applicable |
| Sets the sourcePointY value of the connection data source item |
Property: dataSourceSettings.connectionDataSource.sourcePointY
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourcePointY:200
}
}
});
|
Not applicable |
| Sets the x point value of the connection data source item |
Property: dataSourceSettings.connectionDataSource.targetPointX
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
targetPointX:200
}
}
});
|
Not applicable |
| Sets the y point value of the connection data source item |
Property: dataSourceSettings.connectionDataSource.targetPointY
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
targetPointY:200
}
}
});
|
Not applicable |
| Specifies the method name which is used to get updated connectors from client side to the server side |
Property: dataSourceSettings.connectionDataSource.crudAction
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
targetNode: "targetNode",
crudAction: {
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
});
|
Not applicable |
| Specifies the create method which is used to get the connectors to be added from client side to the server side |
Property: dataSourceSettings.connectionDataSource.crudAction.create
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
sourceNode: "sourceNode",
targetNode: "targetNode",
crudAction: {
create: "http://js.syncfusion.com/demos/ejservices/api/Diagram/AddConnectors",
}
}
}
});
|
Not applicable |
| Specifies the update method which is used to get the updated connectors from client side to the server side |
Property: dataSourceSettings.connectionDataSource.crudAction.update
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
update: "http://js.syncfusion.com/demos/ejservices/api/Diagram/UpdateConnectors",
}
}
}
});
|
Not applicable |
| Specifies the destroy method which is used to get the deleted items data from client side to the server side |
Property: dataSourceSettings.connectionDataSource.crudAction.destroy
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
destroy: "http://js.syncfusion.com/demos/ejservices/api/Diagram/DeleteConnectors"
}
}
}
});
|
Not applicable |
| Specifies the read method which is used to get the data from client side to the server side |
Property: dataSourceSettings.connectionDataSource.crudAction.read
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
crudAction: {
read: "http://js.syncfusion.com/demos/ejservices/api/Diagram/GetConnectors"
}
}
}
});
|
Not applicable |
| Specifies the custom fields to get the updated data from client side to the server side |
Property: dataSourceSettings.connectionDataSource.customFields
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings:
{
id: "Name",
connectionDataSource:
{
id: "Name",
customFields: [ "Description", "Color"]
}
}
});
|
Not applicable |
| Binds the custom data with node model |
Property: dataSourceSettings.doBinding
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
width: 1500, height: 2500,
layout: { type: 'HierarchicalTree', verticalSpacing: 40 },
dataSourceSettings: {
id: 'Name', parentId: 'ReportingPerson', dataManager: items,
doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {
nodeModel.annotations = [{
content: data['Name'], margin: { top: 10 }
}];
}
}
});
|
Not applicable |
DefaultSettings
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Initializes the default values for nodes and connectors |
Property: defaultSettings.node
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
defaultSettings: { node: { fillColor:"red"} }
});
|
Property: getNodeDefaults
let diagram: Diagram = new Diagram({
getNodeDefaults: (object: Node) => {
object.style = { fill: 'lightgrey', strokeColor: 'none', strokeWidth: 2 };
return object;
}
});
diagram.appendTo('#diagram');
|
| Initializes the default connector properties |
Property: defaultSettings.connector
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
defaultSettings: { connector: { lineColor:"red", lineWidth:4, lineDashArray:"2,2" } }
});
|
Property: getConnectorDefaults
let diagram: Diagram = new Diagram({
getConnectorDefaults: (connector: ConnectorModel) => {
connector= {
targetDecorator:{shape 'None'},
type : 'Orthogonal'};
return connector;
}
});
diagram.appendTo('#diagram');
|
| Initializes the default properties of groups |
Property: defaultSettings.group
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
defaultSettings: { group: {constraints: ej.datavisualization.Diagram.NodeConstraints.Default & ~ej.datavisualization.Diagram.NodeConstraints.Drag } }
});
|
Not applicable |
DrawType
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Sets the type of JSON object to be drawn through drawing tool |
Property: drawType
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
drawType:{type:"node"}
});
|
Property: drawingObject
let diagram: Diagram = new Diagram({
drawingObject : {id: 'connector', type: 'Straight'}
});
diagram.appendTo('#diagram');
|
EnableAutoScroll
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables auto scroll in diagram |
Property: enableAutoScroll
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
enableAutoScroll: false
});
|
Property: canAutoScroll
let diagram: Diagram = new Diagram({
canAutoScroll: true
});
diagram.appendTo('#diagram');
|
EnableContextMenu
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enables or disables diagram context menu |
Property: enableContextMenu
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
enableContextMenu: false
});
|
Property: contextMenuSettings.show
let diagram: Diagram = new Diagram({
contextMenuSettings: {
show: true
}
});
diagram.appendTo('#diagram');
|
EnablePersistence
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enable or disable persisting component's state between page reloads | Not applicable |
Property: enablePersistence
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
enablePersistence: true
});
diagram.appendTo('#diagram');
|
EnableRtl
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enable or disable rendering component in right to left direction | Not applicable |
Property: enableRtl
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
enableRtl: true
});
diagram.appendTo('#diagram');
|
GetCustomCursor
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Enable or disable rendering component with custom cursor | Not applicable |
Property: getCustomCursor
function getCustomCursor(action: string, active: boolean): string {
let cursor: string;
if (active && action === 'Drag') {
cursor = '-webkit-grabbing';
} else if (action === 'Drag') {
cursor = '-webkit-grabbing'
}
return cursor;
}
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
nodes: nodes,
getCustomCursor: getCustomCursor
});
diagram.appendTo('#diagram');
|
GetCustomProperty
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows to get the custom properties that have to be serialized | Not applicable |
Property: getCustomProperty
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
nodes: nodes,
getCustomProperty: (key: string) => {
if (key === 'nodes') {
return ['description'];
}
return null;
}
});
diagram.appendTo('#diagram');
|
GetDescription
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows to get the custom description | Not applicable |
Property: getDescription
function getAccessibility(object: ConnectorModel, diagram: Diagram): string {
let value: string;
if (object instanceof Connector) {
value = 'clicked on Connector';
} else {
value = undefined;
}
return value;
}
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
nodes: nodes,
getDescription: getAccessibility
});
diagram.appendTo('#diagram');
|
GetCustomTool
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Allows to get the custom tool | Not applicable |
Property: getCustomTool
function getTool(action: string): ToolBase {
let tool: ToolBase;
if (action === 'userHandle') {
tool = new CloneTool(diagram.commandHandler, true);
}
return tool;
}
class CloneTool extends ToolBase {
public mouseDown(args: MouseEventArgs): void {
super.mouseDown(args);
diagram.copy();
diagram.paste();
}
}
let nodes: NodeModel[] = [{
id: 'node1', width: 100, height: 100, offsetX: 100, offsetY: 100,
},
{
id: 'node2', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Basic', shape: 'Ellipse' },
}];
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
nodes: nodes,
getCustomTool: getTool
});
diagram.appendTo('#diagram');
|
Height
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Specifies the height of the diagram |
Property: height
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
height:"500",
width:"500"
});
|
Property: height
let diagram: Diagram = new Diagram({
height: 1000
});
diagram.appendTo('#diagram');
|
HistoryManager
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| A method that takes a history entry as argument and returns whether the specific entry can be popped or not |
Property: historyManager.canPop
let diagram = $("#diagramcontent").ejDiagram("instance");
let entry = { object: node, prevState: node.employeeData };
diagram.model.historyManager.push(entry);
let value = { role: "New role" };
node.employeeData = value;
if(diagram.model.historyManager.canPop(entry)){
diagram.model.historyManager.pop();
}
|
Not applicable |
| A method that ends grouping the changes |
Property: historyManager.closeGroupAction
let group = diagram.model.selectedItems;
diagram.model.historyManager.startGroupAction();
for (let i = 0; i < group.children.length; i++) {
let option = {};
let item = group.children[i];
// Updates the fillColor for all the child elements.
option.fillColor = args.style.backgroundColor;
diagram.updateNode(item.name, option);
}
diagram.model.historyManager.closeGroupAction();
|
Property: historyManager.endGroupAction
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
},
{
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
id: 'node2'
}],
connectors: [{
id: 'connector1', sourcePoint: { x: 100, y: 200 },
targetPoint: { x: 200, y: 300 },
type: 'Orthogonal'
}]
});
diagram.appendTo('#diagram');
let objects: (NodeModel | ConnectorModel)[] = [];
objects.push(diagram.nodes[0], diagram.nodes[1], diagram.connectors[0]);
diagram.historyManager.startGroupAction();
diagram.distribute('Top', objects);
diagram.distribute('Bottom', objects);
diagram.distribute('BottomToTop', objects);
diagram.historyManager.endGroupAction();
|
| A method that removes the history of a recent change made in diagram |
Property: historyManager.pop
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.pop();
|
Not applicable |
| A method that allows to track the custom changes made in diagram |
Property: historyManager.push
let diagram = $("#diagramcontent").ejDiagram("instance");
let entry = { object: node, prevState: node.employeeData };
diagram.model.historyManager.push(entry);
let value = { role: "New role" };
node.employeeData = value;
|
Property: historyManager.push
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
let object = diagram.nodes[0];
object['description'] = (document.getElementById('custom') as HTMLSelectElement).value;
let entry: HistoryEntry = { undoObject: object };
diagram.historyManager.push(entry);
diagram.dataBind();
|
| Defines what should be happened while trying to restore a custom change |
Property: historyManager.redo
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
});
function customUndoRedo(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
let node: ej.datavisualization.Diagram.Node = args.object;
let currentState = node.employeeData;
node.employeeData = args.prevState;
args.prevState = currentState;
}
|
Property: historyManager.redo
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
let node1: NodeModel = diagram.nodes[0];
node1['customName'] = 'customNode';
entry = {
undoObject: node1
};
diagram.historyManager.push(entry);
diagram.historyManager.undo = function(args: HistoryEntry) {
args.redoObject = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = 'customNodeChange';
}
diagram.historyManager.redo = function(args: HistoryEntry) {
let current: NodeModel = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = args.redoObject['customName'];
args.redoObject = current;
}
|
| Gets the number of redo actions to be stored on the history manager. Its an read-only property and the collection should not be modified |
Property: historyManager.redoStack
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.redoStack();
|
Property: historyManager.redoStack
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.redoStack();
|
| Restricts the undo and redo actions to a certain limit |
Property: historyManager.stackLimit
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.stackLimit();
|
Property: historyManager.stackLimit
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.stackLimit();
|
| A method that starts to group the changes to revert/restore them in a single undo or redo |
Property: historyManager.startGroupAction
let group = diagram.model.selectedItems
diagram.model.historyManager.startGroupAction();
for (let i = 0; i < group.children.length; i++) {
let option = {};
let item = group.children[i];
option.fillColor = args.style.backgroundColor;
diagram.updateNode(item.name, option);
}
diagram.model.historyManager.closeGroupAction();
|
Property: historyManager.startGroupAction
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node1',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
},
{
offsetX: 200,
offsetY: 200,
width: 100,
height: 100,
id: 'node2'
}],
connectors: [{
id: 'connector1', sourcePoint: { x: 100, y: 200 }, targetPoint: { x: 200, y: 300 },
type: 'Orthogonal'
}]
});
diagram.appendTo('#diagram');
let objects: (NodeModel | ConnectorModel)[] = [];
objects.push(diagram.nodes[0], diagram.nodes[1], diagram.connectors[0]);
diagram.historyManager.startGroupAction();
diagram.distribute('Top', objects);
diagram.distribute('Bottom', objects);
diagram.distribute('BottomToTop', objects);
diagram.historyManager.endGroupAction();
|
| Defines what should be happened while trying to revert a custom change |
Property: historyManager.undo
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
historyManager: {
undo: customUndoRedo,
redo: customUndoRedo
}
});
function customUndoRedo(args) {
let diagram = $("#diagramcontent").ejDiagram("instance");
let node = args.object;
let currentState = node.employeeData;
node.employeeData = args.prevState;
args.prevState = currentState;
}
|
Property: historyManager.undo
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
let node1: NodeModel = diagram.nodes[0];
node1['customName'] = 'customNode';
entry = {
undoObject: node1
};
diagram.historyManager.push(entry);
diagram.historyManager.undo = function(args: HistoryEntry) {
args.redoObject = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = 'customNodeChange';
}
diagram.historyManager.redo = function(args: HistoryEntry) {
let current: NodeModel = cloneObject(args.undoObject) as NodeModel;
args.undoObject['customName'] = args.redoObject['customName'];
args.redoObject = current;
}
|
| Gets the number of undo actions to be stored on the history manager. Its an read-only property and the collection should not be modified |
Property: historyManager.undoStack
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.undoStack();
|
Property: historyManager.undoStack
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.undoStack();
|
| Set the current entry object |
Property: historyList.currentEntry
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.historyList.currentEntry();
|
Property: historyManager.currentEntry
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.currentEntry();
|
| set the history entry can be undo |
Property: historyList.canUndo
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.historyList.canUndo();
|
Property: historyManager.canUndo
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.canUndo = true;
|
| Set the history entry can be redo |
Property: historyList.canRedo
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.historyList.canRedo();
|
Property: historyManager.canRedo
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.canRedo = true;
|
| Used to decide to stored the changes to history |
Property: historyManager.canLog
let diagram = $("#diagramcontent").ejDiagram("instance");
diagram.model.historyManager.canLog();
|
Property: historyManager.canLog
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
diagram.historyManager.canLog = function (entry: HistoryEntry) {
entry.cancel = true;
return entry;
}
|
LabelRenderingMode
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the type of the rendering mode of label |
Property: labelRenderingMode
let diagram = new ej.datavisualization.Diagram($("#diagram"), { labelRenderingMode: "svg" });
|
Not applicable |
Layout
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Specifies the custom bounds to arrange/align the layout |
Property: layout.bounds
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { bounds:{ x: 0, y: 0, width: 1000, height: 1000} }});
|
Property: layout.bounds
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
bounds: new Rect(0, 0, 500, 500)
}
});
diagram.appendTo('#diagram');
|
| Defines the fixed node with reference to which, the layout will be arranged and fixed node will not be repositioned |
Property: layout.fixedNode
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
fixedNode: "node" });
|
Property: layout.fixedNode
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
fixedNode: 'node'
}
});
diagram.appendTo('#diagram');
|
| Customizes the orientation of trees/sub trees |
Property: layout.getLayoutInfo
function getLayoutInfo(diagram, node, options) { options.orientation = "vertical"; options.type = "left"; offset = 10;};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { getLayoutInfo:getLayoutInfo }
});
|
Property: layout.getLayoutInfo
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
getLayoutInfo: (node: Node, tree: TreeInfo) => {
if (!tree.hasSubTree) {
tree.orientation = 'vertical';
}
}
}
});
diagram.appendTo('#diagram');
|
| Defines a method to customize the segments based on source and target nodes |
Property: layout.getConnectorSegments
function getConnectorSegment(diagram, node, options) { };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {layout: { getConnectorSegments:getConnectorSegment } });
|
Property: layout.connectorSegments
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
connectorSegments: 'Default'
}
});
diagram.appendTo('#diagram');
|
| Sets the space to be horizontally left between nodes |
Property: layout.horizontalSpacing
let diagram = new ej.datavisualization.Diagram($("#diagram"), {layout: { horizontalSpacing: 50 }});
|
Property: layout.horizontalSpacing
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
horizontalSpacing: 30
}
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between layout bounds and layout |
Property: layout.margin
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { margin:{ left: 10, right: 10, top: 10, bottom: 10} }});
|
Property: layout.margin
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
layout: {
margin: { left: 50, top: 50, right: 0, bottom: 0 }
}
});
diagram.appendTo('#diagram');
|
| Defines how to horizontally align the layout within the layout bounds |
Property: layout.horizontalAlignment
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Center }
});
|
Property: layout.horizontalAlignment
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
horizontalAlignment: 'Center'
}
});
diagram.appendTo('#diagram');
|
| Defines how to vertically align the layout within the layout bounds |
Property: layout.verticalAlignment
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: {
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Center
}
});
|
Property: layout.verticalAlignment
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
verticalAlignment: 'Center'
}
});
diagram.appendTo('#diagram');
|
| Sets the orientation/direction to arrange the diagram elements |
Property: layout.orientation
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { orientation: ej.datavisualization.Diagram.LayoutOrientations.LeftToRight }
});
|
Property: layout.orientation
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
orientation: 'TopToBottom',}
});
diagram.appendTo('#diagram');
|
| Sets the type of the layout based on which the elements will be arranged |
Property: layout.type
let diagram = new ej.datavisualization.Diagram($("#diagram"), { layout: {
type: ej.datavisualization.Diagram.LayoutTypes.HierarchicalTree }
});
|
Property: layout.type
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'OrganizationalChart'
}
});
diagram.appendTo('#diagram');
|
| Sets the space to be vertically left between nodes |
Property: layout.verticalSpacing
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { verticalSpacing: 50 }});
|
Property: layout.verticalSpacing
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
verticalSpacing: 30
}
});
diagram.appendTo('#diagram');
|
| Sets the value is used to define the root node of the layout |
Property: layout.root
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { root: 'rootNode' }
});
|
Property: layout.root
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
root: 'rootNode'
}
});
diagram.appendTo('#diagram');
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property: layout.springFactor
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { springFactor: 0.442 }
});
|
Property: layout.springFactor
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property: layout.maxIteration
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { maxIteration: 442 }
});
|
Property: layout.maxIteration
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Defines how long edges should be, ideally. This will be the resting length for the springs |
Property: layout.springLength
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
layout: { springLength: 80 }
});
|
Property: layout.springLength
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Sets how to define the connection direction (first segment direction & last segment direction) | Not applicable |
Property: layout.connectionDirection
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
connectionDirection:'Auto',
type: 'SymmetricalLayout', springLength: 80, springFactor: 0.8,
maxIteration: 500,
}
});
diagram.appendTo('#diagram');
|
| Enables/Disables animation option when a node is expanded/collapsed | Not applicable |
Property: layout.enableAnimation
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
enableAnimation: true,
orientation: 'TopToBottom',
type: 'OrganizationalChart', margin: { top: 20 },
horizontalSpacing: 30, verticalSpacing: 30,
}
});
diagram.appendTo('#diagram');
|
| Defines whether an object should be at the left/right of the mind map. Applicable only for the direct children of the root node | Not applicable |
Property: layout.getBranch
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}],
layout: {
type: 'MindMap',
}
});
diagram.appendTo('#diagram');
diagram.layout.getBranch = (node: NodeModel, nodes: NodeModel[]) => {
return 'Left';
}
diagram.dataBind();
|
Locale
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the current culture of diagram |
Property: locale
$("#diagram").ejDiagram({
locale: "en-US"
});
|
Property: locale
let diagram: Diagram = new Diagram({
locale: 'en-US'
});
diagram.appendTo('#diagram');
|
Nodes
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Array of JSON objects where each object represents a node |
Property: nodes
let nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: annotations.content
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity |
Property: nodes.activity
let nodes = [{
type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Activity, activity: ej.datavisualization.Diagram.BPMNActivity.SubProcess, width:50, height:50
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: nodes.shape.activity
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'Task'
},
},
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| To maintain additional information about nodes |
Property: nodes.addInfo
let addInfo = { TooltipData: "Shares the information with the customer" };
let node1 = { name: "node1", addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };
let node2 = { type: "swimlane", name: "swimlane", addInfo: addInfo };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {nodes:[node1, node2]});
|
Property: nodes.addInfo
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
addInfo: {
"borderColor": "black", "borderWidth": '1px'
},
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process |
Property: nodes.annotation
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45, length: 150, direction: "top"
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: nodes.shape.annotations
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
length: 150,
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the angle between the BPMN shape and the annotation |
Property: nodes.annotation.angle
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: nodes.shape.annotations.angle
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the direction of the text annotation |
Property: nodes.annotation.direction
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45, length: 150, direction: "top"
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Not applicable |
| Sets the height of the text annotation |
Property: nodes.annotation.height
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: nodes.shape.annotations.height
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
height: 50
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the distance between the BPMN shape and the annotation |
Property: nodes.annotation.length
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
length: 150
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: nodes.shape.annotations.length
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
length: 150,
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the additional information about the flow object in a BPMN Process |
Property: nodes.annotation.text
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape"
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: nodes.shape.annotations.text
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the width of the text annotation |
Property: nodes.annotation.width
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property: nodes.shape.annotations.width
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
width: 45,
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the id for the annotation | Not applicable |
Property: nodes.shape.annotations.id
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines whether the group can be ungrouped or not |
Property: nodes.canUngroup
let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};
let group = { name :"group", children:[node1, node2], canUngroup: false };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {nodes:[group]});
|
Not applicable |
| Array of JSON objects where each object represents a child node/connector |
Property: nodes.children
let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};
let group = { name :"group", children:[node1, node2]};
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:[group] });
|
Property: nodes.children
let node1: NodeModel = {
id: 'node1',
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
let node2: NodeModel = {
id: 'node2',
offsetX: 450,
offsetY: 450,
width: 100,
height: 100,
};
let group: NodeModel = {
id: 'group',
};
group.children = ['node1', 'node2'];
let diagram: Diagram = new Diagram({
nodes: [group]
});
diagram.appendTo('#diagram');
|
| Sets the type of UML classifier |
Property: nodes.classifier
let nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property: nodes.class
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of class |
Property: nodes.class.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property: nodes.class.attributes
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property: nodes.class.attributes.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property: nodes.class.attributes.type
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property: nodes.class.attributes.scope
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a Class |
Property: nodes.class.methods
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property: nodes.class.methods.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property: nodes.class.methods.arguments
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property: nodes.class.methods.arguments.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property: nodes.class.methods.arguments.type
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property: nodes.class.methods.type
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property: nodes.class.methods.scope
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the state of the node is collapsed |
Property: nodes.collapseIcon
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}],
});
|
Property: nodes.collapseIcon
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the border color for collapse icon of node |
Property: nodes.collapseIcon.borderColor
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
borderColor: "red"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderColor: "red"
}
}],
});
|
Property: nodes.collapseIcon.borderColor
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderColor: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderColor: 'red' }
}]
});
diagram.appendTo('#diagram');
|
| Sets the border width for collapse icon of node |
Property: nodes.collapseIcon.borderWidth
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
borderWidth: "2"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderWidth: "2"
}
}],
});
|
Property: nodes.collapseIcon.borderWidth
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderWidth: '2' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderWidth: '2' }
}]
});
diagram.appendTo('#diagram');
|
| Sets the fill color for collapse icon of node |
Property: nodes.collapseIcon.fillColor
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
fillColor: "green"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
fillColor: "green"
}
}],
});
|
Property: nodes.collapseIcon.fill
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", fill: 'red' }
}]
});
diagram.appendTo('#diagram');
|
| Defines the height for collapse icon of node |
Property: nodes.collapseIcon.height
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}],
});
|
Property: nodes.collapseIcon.height
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the icon |
Property: nodes.collapseIcon.horizontalAlignment
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left
}
}],
});
|
Property: nodes.collapseIcon.horizontalAlignment
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", horizontalAlignment:'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", horizontalAlignment:'Center' }
}]
});
diagram.appendTo('#diagram');
|
| To set the margin for the collapse icon of node |
Property: nodes.collapseIcon.margin
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
margin:{ left: 5 }
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
margin:{ left: 5 }
}
}],
});
|
Property: nodes.collapseIcon.margin
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red',
margin:{ left: 5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
margin:{ left: 5 } }
}]
});
diagram.appendTo('#diagram');
|
| Sets the fraction/ratio(relative to node) that defines the position of the icon |
Property: nodes.collapseIcon.offset
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
offset:ej.datavisualization.Diagram.Point(0,0.5)
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
offset:ej.datavisualization.Diagram.Point(0,0.5)
}
}],
});
|
Property: nodes.collapseIcon.offset
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown",
offset: { x: 0, y: 0.5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
offset: { x: 0, y: 0.5 } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the shape of the collapsed state of the node |
Property: nodes.collapseIcon.shape
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "arrowdown"
}
}],
});
|
Property: nodes.collapseIcon.shape
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of the icon |
Property: nodes.collapseIcon.verticalAlignment
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top
},
expandIcon: {
height: 10,
width: 10,
shape: "arrowdown",
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top
}
}],
});
|
Property: nodes.collapseIcon.verticalAlignment
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", verticalAlignment: 'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", verticalAlignment: 'Center' }
}]
});
diagram.appendTo('#diagram');
|
| Defines the custom content of the icon | Not applicable |
Property: nodes.collapseIcon.content
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: {
height: 20,
width: 20,
shape: "Template",
content: '
|
| Defines the geometry of a path | Not applicable |
Property: nodes.collapseIcon.pathData
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" },
collapseIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" }
}]
});
diagram.appendTo('#diagram');
|
| Defines the corner radius of the icon border | Not applicable |
Property: nodes.collapseIcon.cornerRadius
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", cornerRadius: 3},
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", cornerRadius: 3 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the space that the icon has to be moved from the icon border | Not applicable |
Property: nodes.collapseIcon.padding
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", padding: { left: 50 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", padding: { left: 50 } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the distance to be left between a node and its connections(In coming and out going connections) |
Property: nodes.connectorPadding
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
connectorPadding: 5
}],
});
|
Not applicable |
| Enables or disables the default behaviors of the node |
Property: nodes.constraints
let NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
constraints: NodeConstraints.Default & ~NodeConstraints.Select
}],
});
|
Property: nodes.constraints
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
constraints: NodeConstraints.Default | NodeConstraints.Select
}]
});
diagram.appendTo('#diagram');
|
| Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group |
Property: nodes.container
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "stack"
},
offsetX: 200,
offsetY: 100
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| Defines the orientation of the container. Applicable, if the group is a container |
Property: nodes.container.orientation
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "stack",
orientation: "horizontal"
},
offsetX: 200,
offsetY: 100
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| Sets the type of the container. Applicable if the group is a container. |
Property: nodes.container.type
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: ej.datavisualization.Diagram.ContainerType.Stack
},
offsetX: 200,
offsetY: 100
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| Defines the corner radius of rectangular shapes |
Property: nodes.cornerRadius
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
type:"basic",
shape:"rectangle",
cornerRadius:5
}],
});
|
Not applicable |
| This property allows you to customize nodes appearance using user-defined CSS |
Property: nodes.cssClass
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
cssClass: "hoverNode"
}],
});
|
Not applicable |
| Defines the BPMN data object |
Property: nodes.data.type
$("#diagram").ejDiagram({
nodes: [{
name: "dataobject",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.DataObject,
data: {
type: ej.datavisualization.Diagram.BPMNDataObjects.Input
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}]
});
|
Property: nodes.shape.dataObject.type
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
});
diagram.appendTo('#diagram');
|
| Defines whether the BPMN data object is a collection or not |
Property: nodes.data.collection
$("#diagram").ejDiagram({
nodes: [{
name: "dataobject",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.DataObject,
data: {
type: ej.datavisualization.Diagram.BPMNDataObjects.Input,
collection: false
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}]
});
|
Property: nodes.shape.dataObject.collection
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
});
diagram.appendTo('#diagram');
|
| Defines an Enumeration in a UML Class Diagram |
Property: nodes.enumeration
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
});
|
Not applicable |
| Sets the name of the Enumeration |
Property: nodes.enumeration.name
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
});
|
Not applicable |
| Defines the collection of enumeration members |
Property: nodes.enumeration.members
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
});
|
Not applicable |
| Sets the name of the enumeration member |
Property: nodes.enumeration.members.name
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
});
|
Not applicable |
| Sets the type of the BPMN Events. Applicable, if the node is a BPMN event |
Property: nodes.event
$("#diagram").ejDiagram({
nodes : [{
name: "nodeEvent",
type: "bpmn",
shape: "event",
event: ej.datavisualization.Diagram.BPMNEvents.Intermediate,
width: 50,
height: 50
}]
});
|
Property: nodes.shape.event
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the type of the trigger |
Property: nodes.event.trigger
$("#diagram").ejDiagram({
nodes : [{
name: "nodeEvent",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.Event,
trigger: ej.datavisualization.Diagram.BPMNTriggers.None,
width: 50,
height: 50
}]
});
|
Property: nodes.shape.event.trigger
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
});
diagram.appendTo('#diagram');
|
| Defines whether the node can be automatically arranged using layout or not |
Property: nodes.excludeFromLayout
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
excludeFromLayout: true
};
let node2 = {
name: "node2",
width: 50,
height: 50
};
let node3 = {
name: "node3",
width: 50,
height: 50
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1, node2, node3],
layout: {
type: "hierarchicaltree"
}
});
|
Property: nodes.excludeFromLayout
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
excludeFromLayout: true,
},
{ id: 'node1', width: 70, height: 70, annotations: [{ content: 'node1' }] },
{ id: 'node2', width: 70, height: 70, annotations: [{ content: 'node2' }] };
],
layout: {
type: 'RadialTree',
},
});
diagram.appendTo('#diagram');
|
| Defines the fill color of the node |
Property: nodes.fillColor
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
fillColor:"red"};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.fill
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: { fill: 'red' }
},
],
});
diagram.appendTo('#diagram');
|
| Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway |
Property: nodes.gateway
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "gateway" ,
gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.shape.gateway
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' }
}
}],
});
diagram.appendTo('#diagram');
|
| Paints the node with linear color transitions |
Property: nodes.gradient.type
let gradient = {
LinearGradient: {
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0 }, { color: "red", offset: 50 }]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient: gradient
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.type
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the x1 value of linear gradient |
Property: nodes.gradient.LinearGradient.x1
let gradient = {
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.LinearGradient.x1
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the x2 value of linear gradient |
Property: nodes.gradient.LinearGradient.x2
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.LinearGradient.x2
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the y1 value of linear gradient |
Property: nodes.gradient.LinearGradient.y1
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.LinearGradient.y1
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the y2 value of linear gradient |
Property: nodes.gradient.LinearGradient.y2
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.LinearGradient.y2
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the type of gradient |
Property: nodes.gradient.RadialGradient.type
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.type
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the position of the outermost circle |
Property: nodes.gradient.RadialGradient.cx
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.RadialGradient.cx
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the outer most circle of the radial gradient |
Property: nodes.gradient.RadialGradient.cy
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.RadialGradient.cy
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the innermost circle of the radial gradient |
Property: nodes.gradient.RadialGradient.fx
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.RadialGradient.fx
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the innermost circle of the radial gradient |
Property: nodes.gradient.RadialGradient.fy
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.RadialGradient.fy
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the different colors and the region of color transitions |
Property: nodes.gradient.RadialGradient.stops
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.RadialGradient.stops
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Sets the color to be filled over the specified region |
Property: nodes.gradient.stops.color
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.stops.color
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Sets the position where the previous color transition ends and a new color transition starts |
Property: nodes.gradient.stops.offset
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.stops.offset
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Describes the transparency level of the region |
Property: nodes.gradient.stops.opacity
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100,
opacity: 0.5
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1],
});
|
Property: nodes.style.gradient.stops.opacity
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50, opacity: 0.5 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the header of a swimlane/lane |
Property: nodes.header
let swimlane = {
type: "swimlane",
name: "swimlane",
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the height of the node |
Property: nodes.height
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
}],
});
|
Property: nodes.height
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container |
Property: nodes.horizontalAlign
let node1 = {
name: "node1",
width: 50,
height: 50
};
let node2 = {
name: "node2",
width: 50,
height: 50,
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "canvas"
},
offsetX: 200,
offsetY: 100,
minWidth: 200,
minHeight: 200,
fillColor: "red"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| A read only collection of the incoming connectors/edges of the node |
Property: nodes.inEdges
let node = diagram.selectionList[0];
for(let i = 0; i < node.inEdges.length; i++){
console.log(node.inEdges[i]);
};
|
Property: nodes.height
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
let node: string[] = (diagram.nodes[0] as Node).inEdges;
for (let i: number = 0; i < node.length; i++) {
console.log(node[i]);
};
|
| Defines an interface in a UML interface Diagram |
Property: nodes.interface
let nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface |
Property: nodes.interface.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property: nodes.interface.attributes
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property: nodes.interface.attributes.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property: nodes.interface.attributes.type
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property: nodes.interface.attributes.scope
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a interface |
Property: nodes.interface.methods
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property: nodes.interface.methods.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property: nodes.interface.methods.arguments
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the name, attributes and methods of a interface. Applicable, if the node is a interface |
Property: nodes.interface.methods.arguments.name
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property: nodes.interface.methods.arguments.type
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property: nodes.interface.methods.type
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property: nodes.interface.methods.scope
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines whether the sub tree of the node is expanded or collapsed |
Property: nodes.isExpanded
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
isExpanded: false
};
let node2 = {
name: "node2",
width: 50,
height: 50
};
let connector = {
sourceNode: "node1",
targetNode: "node2",
name: "connector"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [node1, node2],
connectors: [connector],
layout: {
type: "hierarchicaltree"
}
});
|
Property: nodes.isExpanded
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
id: 'node1',
isExpanded: true,
},
{
id: 'node2',
width: 50,
height: 50
}],
connectors: [{
sourceNode: 'node1',
targetNode: 'node2',
id: 'connector'
}],
layout: {
type: "hierarchicaltree"
}
});
diagram.appendTo('#diagram');
|
| Sets the node as a swimlane |
Property: nodes.isSwimlane
let swimlane = {
type: "swimlane",
name: "swimlane",
isSwimlane: true,
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| A collection of objects where each object represents a label |
Property: nodes.labels
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
fontColor: "Red"
}
]
}],
});
|
Property: nodes.annotations
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation'
}]
}]
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a lane. Applicable, if the node is a swimlane |
Property: nodes.lanes
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| This property allows you to customize lanes appearance using user-defined CSS |
Property: nodes.lanes.cssClass
let addInfo = { Description:"Describe the functionality" };
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
cssClass:"hoverLane",
addInfo: addInfo,
fillColor:"lightgrey"
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the header of the lane |
Property: nodes.lanes.header
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
header: {
fillColor:"blue",
fontColor:"white",
text:"Function 1"
}
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the width of lane |
Property: nodes.lanes.width
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
zOrder:10
},
{
name: "lane2",
width: 100
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| An array of objects where each object represents a child node of the lane |
Property: nodes.lanes.children
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
children:[{name:"process", width: 50, height: 50 }]
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the object as a lane |
Property: nodes.lanes.isLane
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
isLane:true,
orientation:"vertical"
},
{
name: "lane2",
width: 100
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the minimum space to be left between the bottom of parent bounds and the node |
Property: nodes.margin
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
children: [{
name: "process",
width: 50,
height: 50,
marginBottom: 50,
marginLeft: 10,
marginRight: 10,
marginTop: 10
}]
}]
}
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Property: nodes.margin
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
margin : { left: 15, right: 15, top: 15, bottom: 15 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the maximum height limit of the node |
Property: nodes.maxHeight
let nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Property: nodes.maxHeight
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}]
});
diagram.appendTo('#diagram');
|
| Sets the unique identifier of the node |
Property: nodes.name
let nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Property: nodes.id
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
|
| Defines the opaque of the node |
Property: nodes.opacity
let nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
opacity: 0.5,
rotateAngle: 70
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Property: nodes.style.opacity
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
rotateAngle: 70,
style: {
opacity: 0.5
}
}]
});
diagram.appendTo('#diagram');
|
| Defines the minimum padding value to be left between the bottom most position of a group and its children. Applicable, if the group is a container |
Property: nodes.paddingBottom
let node1 = { name: "node1", width: 50, height:50};
let node2 = { name: "node2", width: 50, height:50, verticalAlign: "bottom"};
let group = { name :"group", children:[ node1, node2 ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingBottom:10, paddingLeft:10, paddingRight:10, paddingTop:10
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {nodes:[group]});
|
Not applicable |
Property: pageSettings.background.color
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
pageSettings: {
background: {
color: 'red',
source: 'Clayton.png',
scale: 'Meet',
align: 'XMidYMid'
}
},
});
diagram.appendTo('#diagram');
|
||
| Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” |
Property: pageSettings.scrollableArea
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
pageSettings: {
scrollableArea: { x:0, y:0, width:1000, height:1000}
}
});
|
Property: scrollSettings.scrollableArea
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
scrollSettings: {
scrollableArea: new Rect(0, 0, 300, 300),
},
});
diagram.appendTo('#diagram');
|
| Defines the draggable region of diagram elements |
Property: pageSettings.boundaryConstraints
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
pageSettings: {
boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram
}
});
|
Property: pageSettings.boundaryConstraints
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
pageSettings: {
width: 800, height: 600, boundaryConstraints: 'Diagram'
},
});
diagram.appendTo('#diagram');
|
SymbolPalette
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines the size and preview size of the node to add that to symbol palette |
Property: nodes.paletteItem
let palette= new ej.datavisualization.SymbolPalette($("#SymbolPalette"), {
palettes: [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100
}
}]
}]
});
|
Property: palettes
export function getFlowShapes(): NodeModel[] {
let flowShapes = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
};
let palette: SymbolPalette = new SymbolPalette({
expandMode: 'Multiple',
palettes: [{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
}, ],
width: '100%',
height: '100%',
symbolHeight: 50,
symbolWidth: 50,
symbolPreview: {
height: 100,
width: 100
},
enableSearch: true,
symbolMargin: {
left: 12,
right: 12,
top: 12,
bottom: 12
},
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
});
palette.appendTo('#symbolpalette');
|
| Defines whether the symbol should be drawn at its actual size regardless of precedence factors or not |
Property: nodes.paletteItem.enableScale
let palette= new ej.datavisualization.SymbolPalette($("#SymbolPalette"), {
palettes: [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100,
enableScale:false
}
}]
}]
});
|
Property: palettes.fit
export function getFlowShapes(): NodeModel[] {
let flowShapes = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
};
let palette: SymbolPalette = new SymbolPalette({
expandMode: 'Multiple',
palettes: [{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
}, ],
width: '100%',
height: '100%',
symbolHeight: 50,
symbolWidth: 50,
symbolPreview: {
height: 100,
width: 100
},
enableSearch: true,
symbolMargin: {
left: 12,
right: 12,
top: 12,
bottom: 12
},
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
});
palette.appendTo('#symbolpalette');
|
| To display a name for nodes in the symbol palette |
Property: nodes.paletteItem.label
let palette= new ej.datavisualization.SymbolPalette($("#SymbolPalette"), {
palettes: [{
name: "Basic Shapes",
expanded: true,
items: [{
name: "Rectangle",
height: 40,
width: 80,
paletteItem: {
previewWidth: 100,
previewHeight: 100,
label: "label",
margin: { left: 4, right: 4, top: 4, bottom: 4 }
}
}]
}]
});
|
Property: palettes.title
export function getFlowShapes(): NodeModel[] {
let flowShapes = [{
id: 'Terminator',
shape: {
type: 'Flow',
shape: 'Terminator'
},
style: {
strokeWidth: 2
}
},
{
id: 'Process',
shape: {
type: 'Flow',
shape: 'Process'
},
style: {
strokeWidth: 2
}
},
{
id: 'Decision',
shape: {
type: 'Flow',
shape: 'Decision'
},
style: {
strokeWidth: 2
}
},
]
};
let palette: SymbolPalette = new SymbolPalette({
expandMode: 'Multiple',
palettes: [{
id: 'flow',
expanded: true,
symbols: getFlowShapes(),
}, ],
width: '100%',
height: '100%',
symbolHeight: 50,
symbolWidth: 50,
symbolPreview: {
height: 100,
width: 100
},
enableSearch: true,
symbolMargin: {
left: 12,
right: 12,
top: 12,
bottom: 12
},
getSymbolInfo: (symbol: NodeModel): SymbolInfo => {
return {
fit: true
};
}
});
palette.appendTo('#symbolpalette');
|
SelectedItems
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| A read only collection of the selected items |
Property: selectedItems.children
let diagram = $("#diagramcontent").ejDiagram("instance");
for(let i =0; i< diagram.model.selectedItems.children; i++){
//Do your actions here
}
|
Not applicable |
| Controls the visibility of selector |
Property: selectedItems.constraints
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: { constraints: ej.datavisualization.Diagram.SelectorConstraints.UserHandles }
});
|
Property: selectedItems.constraints
let diagram: Diagram = new Diagram({
selectedItems: { constraints: SelectorConstraints.UserHandles },
});
diagram.appendTo('#diagram');
|
| Defines a method that dynamically enables/ disables the interaction with multiple selection |
Property: selectedItems.getConstraints
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: {
getConstraints: function() {
return ej.datavisualization.Diagram.NodeConstraints.Drag |
ej.datavisualization.Diagram.NodeConstraints.Resize
}
}
});
|
Not applicable |
| Sets the height of the selected items |
Property: selectedItems.height
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: {
height:100, width: 100,
offsetX:100, offsetY: 100,
rotateAngle: 90,
}
});
|
Property: selectedItems.height
let diagram: Diagram = new Diagram({
selectedItems: {
height:100, width: 100,
offsetX:100, offsetY: 100,
rotateAngle: 90 },
});
diagram.appendTo('#diagram');
|
| Sets the angle to rotate the selected items |
Property: selectedItems.tooltip
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: {
tooltip : { alignment:{ vertical:"top" } }
}
});
|
Not applicable |
| A collection of frequently used commands that will be added around the selector |
Property: selectedItems.userHandles
let userHandle= [];
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
userHandle.push(cloneHandle);
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: {
userHandles:userHandle
}
});
|
Property: selectedItems.userHandles
let handle: UserHandleModel[] = [{
name: 'handle1', pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z'
, visible: true, backgroundColor: 'black', offset: 0, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 },
pathColor: 'white'
}];
let diagram: Diagram = new Diagram({
selectedItems: {
constraints: SelectorConstraints.UserHandles,
userHandles: handle
},
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the user handle |
Property: selectedItems.userHandles.horizontalAlignment
let userHandle = [];
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle = {name : "cloneHandle",
pathData : "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z",
visible : "true",
backgroundColor : "#4D4D4D",
offset : ej.datavisualization.Diagram.point(0, 0),
position :" middleleft",
margin : { left: 5 },
pathColor : "white",
horizontalAlignment : ej.datavisualization.Diagram.HorizontalAlignment.Right,
verticalAlignment : ej.datavisualization.Diagram.VerticalAlignment.Top,
borderColor : "red",
borderWidth : 3,
size : 20};
userHandle.push(cloneHandle);
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: {
userHandles:userHandle
}
});
|
Property: selectedItems.userHandles
let handle: UserHandleModel[] = [{
name: 'handle1',
pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
visible: true,
backgroundColor: 'black',
offset: 0,
side: 'Bottom',
margin: { top: 0, bottom: 0, left: 0, right: 0 },
pathColor: 'white',
horizontalAlignment: 'Center',
verticalAlignment: 'Center',
borderColor: 'red',
borderWidth: 3,
size: 30
}];
let diagram: Diagram = new Diagram({
selectedItems: {
constraints: SelectorConstraints.UserHandles,
userHandles: handle
},
});
diagram.appendTo('#diagram');
|
| Defines the interactive behaviors of the user handle |
Property: selectedItems.userHandles.tool
let CloneTool = (function(base) {
ej.datavisualization.Diagram.extend(CloneTool, base);
function CloneTool(name) {
base.call(this, name);
this.singleAction = true;
this.clonedNodes = [];
this.cursor = "pointer";
}
CloneTool.prototype.mouseup = function(event) {
this.diagram.copy();
this.diagram.paste();
}
}
return CloneTool;
});
(ej.datavisualization.Diagram.ToolBase);
let userHandle = [];
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.name = "cloneHandle";
cloneHandle.pathData = "M 4.6350084,4.8909971 L 4.6350084,9.3649971 9.5480137,9.3649971 9.5480137,4.8909971 z M 3.0000062,2.8189973 L 11.184016,2.8189973 11.184016,10.999997 3.0000062,10.999997 z M 0,0 L 7.3649998,0 7.3649998,1.4020001 1.4029988,1.4020001 1.4029988,8.0660002 0,8.0660002 0,1.4020001 0,0.70300276 z";
cloneHandle.tool = new CloneTool(cloneHandle.name);;
userHandle.push(cloneHandle);
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: {
userHandles: userHandle
}
});
|
Not applicable |
| Defines whether the user handle should be added, when more than one element is selected |
Property: selectedItems.userHandles.enableMultiSelection
let userHandle = [];
let cloneHandle = ej.datavisualization.Diagram.UserHandle();
cloneHandle.name = "cloneHandle";
cloneHandle.enableMultiSelection = true;
userHandle.push(cloneHandle);
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
selectedItems: {
userHandles: userHandle
}
});
|
Not applicable |
| Sets the horizontal alignment of the user handle | Not applicable |
Property: selectedItems.userHandles.displacement
let handle: UserHandleModel[] = [{
name: 'handle1',
pathData: 'M 60.3,18 H 27.5 c -3,0-5.5,2.4-5.5,5.5 v 38.2 h 5.5 V 23.5 h 32.7 V 18 z M 68.5,28.9 h -30 c -3,0-5.5,2.4-5.5,5.5 v 38.2 c 0,3,2.4,5.5,5.5,5.5 h 30 c 3,0,5.5-2.4,5.5-5.5 V 34.4 C 73.9,31.4,71.5,28.9,68.5,28.9 z M 68.5,72.5 h -30 V 34.4 h 30 V 72.5 z',
displacement: 30
}];
let diagram: Diagram = new Diagram({
selectedItems: {
constraints: SelectorConstraints.UserHandles,
userHandles: handle
},
});
diagram.appendTo('#diagram');
|
SerializationSettings
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| Defines whether the default diagram properties can be serialized or not |
Property: serializationSettings.preventDefaultValues
let diagram = new ej.datavisualization.Diagram($("#diagram"), { serializationSettings:{ preventDefaultValues: true } });
|
Not applicable |
How to load EJ1 diagram in EJ2 diagram
To load EJ1 JSON data in an EJ2 diagram, follow these steps.
-
Import and inject the
EJ1SerializationModuleas shown in the following code example.import { Diagram } from '@syncfusion/ej2-diagrams'; import { EJ1SerializationModule } from '@syncfusion/ej2-diagrams'; Diagram.Inject(EJ1SerializationModule); -
Load the EJ1 JSON data using the
loadDiagrammethod and set the second parameter totrue.let ej1Data = { /* your EJ1 JSON data */ }; // Load the EJ1 JSON and pass boolean value as true diagram.loadDiagram(ej1Data, true);
Tooltip
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
| An object that defines the description, appearance and alignments of tooltip |
Property: tooltip
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
tooltip: {
templateId: "mouseovertooltip",
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Property: tooltip
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
},
});
diagram.appendTo('#diagram');
|
| Defines the alignment of tooltip |
Property: tooltip.alignment
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
tooltip: {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Not applicable |
| Sets the margin of the tooltip |
Property: tooltip.margin
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
tooltip: {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
margin : { left: 5, right: 5, top: 5, bottom: 5 }
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Not applicable |
| Sets the svg/html template to be bound with tooltip |
Property: tooltip.templateId
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
tooltip: {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
},
relativeMode: ej.datavisualization.Diagram.RelativeMode.Mouse,
margin : { left: 5, right: 5, top: 5, bottom: 5 }
},
nodes: [{
name: "elizabeth",
width: 70,
height: 40,
offsetX: 100,
offsetY: 100,
Designation: "Managing Director"
}]
});
|
Property: tooltip.content
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
relativeMode: 'Object',
},
});
diagram.appendTo('#diagram');
|
| Defines if the Tooltip has tip pointer or not | Not applicable |
Property: tooltip.showTipPointer
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
showTipPointer: true,
},
});
diagram.appendTo('#diagram');
|
| Defines the position of the Tooltip | Not applicable |
Property: tooltip.position
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
},
});
diagram.appendTo('#diagram');
|
| Allows to set the same or different animation option for the Tooltip, when it is opened or closed | Not applicable |
Property: tooltip.animation
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
},
});
diagram.appendTo('#diagram');
|
| Sets the width of the tooltip | Not applicable |
Property: tooltip.width
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
width: 100,
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
},
});
diagram.appendTo('#diagram');
|
| Sets the height of the Tooltip | Not applicable |
Property: tooltip.height
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
constraints: DiagramConstraints.Default | DiagramConstraints.Tooltip,
tooltip: {
height: 100,
content: 'Diagram',
position: 'TopLeft',
relativeMode: 'Object',
animation: {
open: { effect: 'FadeZoomIn', delay: 0 },
close: { effect: 'FadeZoomOut', delay: 0 }
}
},
});
diagram.appendTo('#diagram');
|
setConstraints
| behavior | API in Essential® JS 1 | API in Essential® JS 2 |
|
Set constraints to node The diagram.setConstraints(node) property is not available in the EJ2 Diagram |
Property: setConstraints
for (var i = 0; i < diagram.nodes.length; i++) {
var node = diagram.nodes[i];
diagram.setConstraints(node);
}
|
Property: setConstraints
Not applicable In EJ2, constraints are set directly on each node
let nodes = [{
id: 'node',
offsetX: 100, offsetY: 100,
constraints: NodeConstraints.Default & ~NodeConstraints.Rotate
}];
let diagram:Diagram = new Diagram({
width: '100%, height: 600, nodes: nodes,
},'#element');
|