This article describes the API migration process of Diagram component from Essential JS 1 to Essential JS 2.
| behavior |
API in Essential JS 1 |
API in Essential JS 2 |
| Allows the user to save custom information/data about a connector |
Property:`connectors.addInfo`
var addInfo = {
Description: "Bidirectional Flow"
};
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
addInfo: addInfo
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.addInfo`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the bridgeSpace of connector |
Property:`connectors.bridgeSpace`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 200,
y: 200
},
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.bridgeSpace`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 600,
y: 200
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Enables or disables the behaviors of connectors |
Property:`connectors.constraints`
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.constraints`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the radius of the rounded corner |
Property:`connectors.cornerRadius`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cornerRadius: 10, segments:[{ type: "orthogonal"}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.cornerRadius`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
cornerRadius: 10,
type: 'Orthogonal',
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Customize connectors appearance using user-defined CSS |
Property:`connectors.cssClass`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cssClass: "hoverConnector"
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Sets the horizontal alignment of the connector |
Property:`connectors.horizontalAlign`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
horizontalAlign:ej.datavisualization.Diagram.HorizontalAlignment.Right
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| A collection of JSON objects where each object represents a label |
Property:`connectors.labels`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
labels:[{ text:"connector" }]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.annotations`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
annotations: [{
id: 'label',
content: 'Text',
offset: 0.5
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Stroke color of the connector |
Property:`connectors.lineColor`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor: "blue"
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.strokeColor`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
strokeColor: 'blue'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the pattern of dashes and gaps used to stroke the path of the connector |
Property:`connectors.lineDashArray`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor: "blue",
lineDashArray: "2,2"
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.strokeDashArray`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
strokeColor: 'blue',
strokeWidth: 3,
strokeDashArray: '2,2'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the width of the line |
Property:`connectors.lineWidth`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineWidth: 10
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.strokeWidth`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
strokeColor: 'blue',
strokeWidth: 3,
strokeDashArray: '2,2'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the padding value to ease the interaction with connectors
|
Property:`connectors.lineHitPadding`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineHitPadding: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.hitPadding`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
hitPadding: 10
}];
var diagram = new ej.diagrams.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`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginBottom: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.bottom`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
bottom: 3
}
}];
var diagram = new ej.diagrams.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`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginTop: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.top`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
top: 3
}
}];
var diagram = new ej.diagrams.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`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginLeft: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.left`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
left: 3
}
}];
var diagram = new ej.diagrams.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`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginRight: 15
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.margin.right`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: {
right: 3
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets a unique name for the connector |
Property:`connectors.name`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.id`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the transparency of the connector |
Property:`connectors.opacity`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
opacity: 0.5
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.style.opacity`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: {
opacity: 0.5
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the parent name of the connector.
|
Property:`connectors.parent`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
parent: "group"
};
var group = {
name: "group",
children: ["connector"]
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [group]
});
|
Not applicable
|
| An array of JSON objects where each object represents a segment
|
Property:`connectors.segments`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments`
var connectors = [{
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'
}
]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the direction of orthogonal segment
|
Property:`connectors.segments.direction`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
},
direction: "bottom"
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.direction`
var connectors = [{
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'
}
]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length of orthogonal segment
|
Property:`connectors.segments.length`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
},
length: 50
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.length`
var connectors = [{
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'
}
]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the end point of bezier/straight segment |
Property:`connectors.segments.point`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "straight",
point: {
x: 75,
y: 150
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.point`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Straight',
point: {
x: 800,
y: 50
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the first control point of the bezier segment |
Property:`connectors.segments.point1`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: "bezier",
point1: {
x: 150,
y: 50
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.point1`
var connectors = [{
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
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the second control point of bezier segment |
Property:`connectors.segments.point2`
var 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
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.point2`
var connectors = [{
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
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the segment
|
Property:`connectors.segments.type`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{
type: ej.datavisualization.Diagram.Segments.Bezier
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.type`
var connectors = [{
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
}
}]
}];
var diagram = new ej.diagrams.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`
var 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
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.vector1`
var connectors = [{
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
}
}],
}];
var diagram = new ej.diagrams.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`
var 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
}
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.segments.vector2`
var connectors = [{
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
}
}]
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the connector
|
Property:`connectors.shape.type`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape: {
type: "bpmn"
},
segments: [{
type: "straight"
}]
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.shape.type`
var connectors = [{
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'
}
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the source decorator of the connector
|
Property:`connectors.sourceDecorator`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the source decorator |
Property:`connectors.sourceDecorator.borderColor`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
borderColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.strokeColor`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
style: {
strokeColor: 'red'
},
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property:`connectors.sourceDecorator.borderWidth`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
borderWidth: 5
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.strokeWidth`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
strokeWidth: 5
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize sourceDecorator appearance using user-defined CSS
|
Property:`connectors.sourceDecorator.cssClass`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
cssClass: "hoverDecorator"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the source decorator
|
Property:`connectors.sourceDecorator.fillColor`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
fillColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.fill`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
fill: 'black'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the source decorator |
Property:`connectors.sourceDecorator.height`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.height`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
height: 10,
width: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the source decorator
|
Property:`connectors.sourceDecorator.pathData`
var 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"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.pathData`
var connectors = [{
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"
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the source decorator.
|
Property:`connectors.sourceDecorator.shape`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: ej.datavisualization.Diagram.DecoratorShapes.Circle
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.shape`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the source decorator
|
Property:`connectors.sourceDecorator.width`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: {
shape: "openarrow",
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.width`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
width: 10,
height: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source node of the connector
|
Property:`connectors.sourceNode`
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target"
};
$("#diagramcontent").ejDiagram({
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.sourceID`
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.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`
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePadding: 2,
targetPadding: 2
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.hitPadding`
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector
|
Property:`connectors.sourcePoint`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.sourcePoint`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source port of the connector
|
Property:`connectors.sourcePort`
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50,
ports: [{
name: "port",
offset: {
x: 1,
y: 0.5
}
}]
};
var node2 = {
name: "target",
offsetX: 200,
offsetY: 200,
width: 50,
height: 50,
ports: [{
name: "port1",
offset: {
x: 0,
y: 0.5
}
}]
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePort: "port",
targetPort: "port1"
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.sourcePortID`
var nodeport1 = {
id: ‘port’,
shape: ‘Square’,
offset: {
x: 1,
y: 0.5
}
};
var nodeport2 = {
id: ‘port1’,
shape: ‘Square’,
offset: {
x: 0,
y: 0.5
}
};
var nodes = [{
id: ‘source’,
width: 60,
height: 60,
offsetX: 75,
offsetY: 90,
ports: [nodeport1]
},
{
id: ‘target’,
width: 75,
height: 70,
offsetX: 210,
offsetY: 90,
ports: [nodeport2]
}
];
var connectors = [{
id: ‘connector’,
type: ‘Straight’,
sourceID: ‘source’,
targetID: ‘target’,
sourcePortID: ‘port’,
targetPortID: ‘port1’,
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo(‘#diagram’);
|
| Defines the target decorator of the connector
|
Property:`connectors.targetDecorator`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the target decorator |
Property:`connectors.targetDecorator.borderColor`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
borderColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.strokeColor`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
style: {
strokeColor: 'red'
},
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property:`connectors.targetDecorator.borderWidth`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
borderWidth: 5
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.strokeWidth`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
strokeWidth: 5
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize target Decorator appearance using user-defined CSS
|
Property:`connectors.targetDecorator.cssClass`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
cssClass: "hoverDecorator"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the target decorator
|
Property:`connectors.targetDecorator.fillColor`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
fillColor: "red"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.fill`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
fill: 'black'
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the target decorator |
Property:`connectors.targetDecorator.height`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.height`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
height: 10,
width: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the target decorator
|
Property:`connectors.targetDecorator.pathData`
var 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"
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.pathData`
var connectors = [{
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"
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the target decorator.
|
Property:`connectors.targetDecorator.shape`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: ej.datavisualization.Diagram.DecoratorShapes.Circle
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.shape`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the target decorator
|
Property:`connectors.targetDecorator.width`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: {
shape: "openarrow",
width: 10,
height: 10
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetDecorator.width`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
width: 10,
height: 10
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target node of the connector
|
Property:`connectors.targetNode`
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target"
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.targetID`
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.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`
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50
};
var node2 = {
name: "target",
offsetX: 300,
offsetY: 300,
width: 50,
height: 50
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePadding: 2,
targetPadding: 2
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.hitPadding`
var nodes = [{
id: 'source',
width: 60,
height: 60,
offsetX: 75,
offsetY: 90
},
{
id: 'target',
width: 75,
height: 70,
offsetX: 210,
offsetY: 90
}
];
var connectors = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source',
targetID: 'target'
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector
|
Property:`connectors.targetPoint`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
}
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.targetPoint`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target port of the connector
|
Property:`connectors.targetPort`
var node1 = {
name: "source",
offsetX: 100,
offsetY: 100,
width: 50,
height: 50,
ports: [{
name: "port",
offset: {
x: 1,
y: 0.5
}
}]
};
var node2 = {
name: "target",
offsetX: 200,
offsetY: 200,
width: 50,
height: 50,
ports: [{
name: "port1",
offset: {
x: 0,
y: 0.5
}
}]
};
var connector = {
name: "connector",
sourceNode: "source",
targetNode: "target",
sourcePort: "port",
targetPort: "port1"
};
$("#diagramcontent").ejDiagram({
connectors: [connector],
nodes: [node1, node2]
});
|
Property:`connectors.targetPortID`
var nodeport1 = {
id: ‘port’,
shape: ‘Square’,
offset: {
x: 1,
y: 0.5
}
};
var nodeport2 = {
id: ‘port1’,
shape: ‘Square’,
offset: {
x: 0,
y: 0.5
}
};
var nodes = [{
id: ‘source’,
width: 60,
height: 60,
offsetX: 75,
offsetY: 90,
ports: [nodeport1]
},
{
id: ‘target’,
width: 75,
height: 70,
offsetX: 210,
offsetY: 90,
ports: [nodeport2]
}
];
var connectors = [{
id: ‘connector’,
type: ‘Straight’,
sourceID: ‘source’,
targetID: ‘target’,
sourcePortID: ‘port’,
targetPortID: ‘port1’,
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors,
nodes: nodes
});
diagram.appendTo(‘#diagram’);
|
| Defines the tooltip that should be shown when the mouse hovers over connector
|
Property:`connectors.tooltip`
var tooltip = {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
};
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
var connector = {
name: "flow",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
tooltip: tooltip
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
}) < script type = "text/x-jsrender"
id = "mouseovertooltip" >
<
div style = "background-color: #F08080; color: white; white-space: nowrap; height: 20px" >
<
span style = "padding: 5px;" > < /span> <
/div> <
/script>
var tooltip = {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
};
var ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
var connector = {
name: "flow",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
tooltip: tooltip
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});;
|
Property:`connectors.tooltip`
var connectors = [{
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,
},
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of connector
|
Property:`connectors.verticalAlign`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 150,
y: 150
},
verticalAlign: ej.datavisualization.Diagram.VerticalAlignment.Bottom
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Not applicable |
| Enables or disables the visibility of connector
|
Property:`connectors.visible`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
visible: true
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.visible`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
visible: true
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the z-index of the connector
|
Property:`connectors.zOrder`
var connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
zOrder: 1000
};
$("#diagramcontent").ejDiagram({
connectors: [connector]
});
|
Property:`connectors.zIndex`
var connectors = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
zIndex: -1
}];
var diagram = new ej.diagrams.Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Binds the custom JSON data with connector properties
|
Property:`connectors.connectorTemplate`
var data = [{
"Id": "E1",
"Name": "Maria Anders",
"Designation": "Managing Director"
},
{
"Id": "E2",
"Name": "Ana Trujillo",
"Designation": "Project Manager",
"ReportingPerson": "E1"
}
];
$("#diagramcontent").ejDiagram({
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`
var DiagramConstraints = ej.datavisualization.Diagram.DiagramConstraints;
$("#diagramcontent").ejDiagram({
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging
});
|
Property:`constraints`
var diagram = new ej.diagrams.Diagram({
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging
});
diagram.appendTo('#diagram');
|
| behavior |
API in Essential JS 1 |
API in Essential JS 2 |
| Array of JSON objects where each object represents a node |
Property:`nodes`
var nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes`
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity |
Property:`nodes.activity`
var nodes = [{
type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Activity, activity: ej.datavisualization.Diagram.BPMNActivity.SubProcess, width:50, height:50
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.activity`
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'Task'
},
},
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| To maintain additional information about nodes |
Property:`nodes.addInfo`
var addInfo = { TooltipData: "Shares the information with the customer" };
var node1 = { name: “node1”, addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };
var node2 = { type: “swimlane”, name: “swimlane”, addInfo: addInfo };
$(“#diagramcontent”).ejDiagram({nodes:[node1, node2]});
|
Property:`nodes.addInfo`
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
addInfo: {
"borderColor": "black", "borderWidth": '1px'
},
};
var diagram = new ej.diagrams.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`
var 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"
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations`
var node = {
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',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the angle between the BPMN shape and the annotation |
Property:`nodes.annotation.angle`
var 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
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.angle`
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the direction of the text annotation |
Property:`nodes.annotation.direction`
var 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"
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Not applicable |
| Sets the height of the text annotation |
Property:`nodes.annotation.height`
var 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,
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.height`
var node = {
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
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the distance between the BPMN shape and the annotation |
Property:`nodes.annotation.length`
var 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
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.length`
var node = {
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',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the additional information about the flow object in a BPMN Process |
Property:`nodes.annotation.text`
var nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape"
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.text`
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
text: 'Left',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the width of the text annotation |
Property:`nodes.annotation.width`
var 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
}
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Property:`nodes.shape.annotations.width`
var node = {
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',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the id for the annotation |
Not applicable
|
Property:`nodes.shape.annotations.id`
var node = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
}]
}
};
var diagram = new ej.diagrams.Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines whether the group can be ungrouped or not |
Property:`nodes.canUngroup`
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
offsetX: 150,
offsetY: 150,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
canUngroup: false
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable
|
| Array of JSON objects where each object represents a child node/connector |
Property:`nodes.children`
var node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red", borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
offsetX: 150,
offsetY: 150,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: “group”,
children: [node1, node2]
};
$(“#diagramcontent”).ejDiagram({
nodes: [group]
});
|
Property:`nodes.children`
var node1 = {
id: 'node1',
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
var node2 = {
id: 'node2',
offsetX: 450,
offsetY: 450,
width: 100,
height: 100,
};
var group = {
id: 'group',
};
group.children = ['node1', 'node2'];
var diagram = new ej.diagrams.Diagram({
nodes: [group]
});
diagram.appendTo('#diagram');
|
| Sets the type of UML classifier |
Property:`nodes.classifier`
var nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class`
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of class |
Property:`nodes.class.name`
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.class.attributes`
var 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"}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.class.attributes.name`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.class.attributes.type`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.class.attributes.scope`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a Class |
Property:`nodes.class.methods`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property:`nodes.class.methods.name`
var 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" }]
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.class.methods.arguments`
var 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"
}]
}]
}
}];
$("#DiagramContent").ejDiagram({
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`
var 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"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.class.methods.arguments.type`
var 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"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.class.methods.type`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.class.methods.scope`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the state of the node is collapsed/expanded |
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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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 `
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: {
height: 20,
width: 20,
shape: "Template",
content: '' +
''
},
collapseIcon: {
height: 20,
width: 20,
shape: "ArrowUp"
}
}]
});
diagram.appendTo('#diagram');
|
| Defines the geometry of a path |
Not applicable
|
Property:`nodes.collapseIcon.pathData`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var 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`
var diagram = new ej.diagrams.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`
var node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: "stack"
},
offsetX: 200,
offsetY: 100
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| Defines the orientation of the container. Applicable, if the group is a container |
Property:`nodes.container.orientation`
var node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: "stack",
orientation: "horizontal"
},
offsetX: 200,
offsetY: 100
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| Sets the type of the container. Applicable if the group is a container. |
Property:`nodes.container.type`
var node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: ej.datavisualization.Diagram.ContainerType.Stack
},
offsetX: 200,
offsetY: 100
};
$("#diagramcontent").ejDiagram({
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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var diagram = new ej.diagrams.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`
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
excludeFromLayout: true
};
var node2 = {
name: “node2”,
width: 50,
height: 50
};
var node3 = {
name: “node3”,
width: 50,
height: 50
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1, node2, node3],
layout: {
type: “hierarchicaltree”
}
});
|
Property:`nodes.excludeFromLayout`
var diagram = new ej.diagrams.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`
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
fillColor:"red"};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.fill`
var diagram = new ej.diagrams.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`
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "gateway" ,
gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.shape.gateway`
var diagram = new ej.diagrams.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`
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.type`
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.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`
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.x1`
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.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`
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.x2`
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.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`
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.y1`
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.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`
var gradient = {
type: "linear",
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 50
}]
};
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.y2`
var stopscol = [];
var stops1 = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
var stops2 = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
var gradient1 = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.type`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.cx`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.cy`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.fx`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.fy`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.stops`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.color`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.offset`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100,
opacity: 0.5
}]
}
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.opacity`
var stops = [{
color: 'white',
offset: 0
}, {
color: 'red',
offset: 50,
opacity: 0.5
}];
var gradient = {
cx: 50,
cy: 50,
fx: 50,
fy: 50,
stops: stops,
type: 'Radial'
};
var diagram = new ej.diagrams.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`
var swimlane = {
type: "swimlane",
name: "swimlane",
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
$("#diagramcontent").ejDiagram({
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`
var diagram = new ej.diagrams.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`
var node1 = {
name: "node1",
width: 50,
height: 50
};
var node2 = {
name: "node2",
width: 50,
height: 50,
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
};
var group = {
name: "group",
children: [node1, node2],
container: {
type: "canvas"
},
offsetX: 200,
offsetY: 100,
minWidth: 200,
minHeight: 200,
fillColor: "red"
};
$("#diagramcontent").ejDiagram({
nodes: [group]
});
|
Not applicable |
| A read only collection of the incoming connectors/edges of the node |
Property:`nodes.inEdges`
var node = diagram.selectionList[0];
for(var i = 0; i < node.inEdges.length; i++){
console.log(node.inEdges[i]);
};
|
Property:`nodes.inEdges`
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
var node = (diagram.nodes[0] as Node).inEdges;
for (var i = 0; i < node.length; i++) {
console.log(node[i]);
};
|
| Defines an interface in a UML interface Diagram |
Property:`nodes.interface`
var nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface
}];
$("#diagramcontent").ejDiagram({ nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface |
Property:`nodes.interface.name`
var nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.interface.attributes`
var 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"}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.interface.attributes.name`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.interface.attributes.type`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.interface.attributes.scope`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a interface |
Property:`nodes.interface.methods`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property:`nodes.interface.methods.name`
var 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" }]
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.interface.methods.arguments`
var 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"
}]
}]
}
}];
$("#DiagramContent").ejDiagram({
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`
var 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"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.interface.methods.arguments.type`
var 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"
}]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.interface.methods.type`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.interface.methods.scope`
var 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" }]
}
}];
$("#DiagramContent").ejDiagram({
nodes: nodes
});
|
Not applicable |
| Defines whether the sub tree of the node is expanded or collapsed |
Property:`nodes.isExpanded`
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
isExpanded: false
};
var node2 = {
name: “node2”,
width: 50,
height: 50
};
var connector = {
sourceNode: “node1”,
targetNode: “node2”,
name: “connector”
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1, node2],
connectors: [connector],
layout: {
type: “hierarchicaltree”
}
});
|
Property:`nodes.isExpanded`
var diagram = new ej.diagrams.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`
var swimlane = {
type: "swimlane",
name: "swimlane",
isSwimlane: true,
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
$("#diagramcontent").ejDiagram({
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`
var diagram = new ej.diagrams.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`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| This property allows you to customize lanes appearance using user-defined CSS |
Property:`nodes.lanes.cssClass`
var addInfo = { Description:"Describe the functionality" };
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
cssClass:"hoverLane",
addInfo: addInfo,
fillColor:"lightgrey"
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the header of the lane |
Property:`nodes.lanes.header`
var 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"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the width of lane |
Property:`nodes.lanes.width`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
zOrder:10
},
{
name: "lane2",
width: 100
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| An array of objects where each object represents a child node of the lane |
Property:`nodes.lanes.children`
var 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 }]
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the object as a lane |
Property:`nodes.lanes.isLane`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
isLane:true,
orientation:"vertical"
},
{
name: "lane2",
width: 100
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the minimum space to be left between the bottom of parent bounds and the node |
Property:`nodes.margin`
var 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
}]
}]
}
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Property:`nodes.margin`
var diagram = new ej.diagrams.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`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.maxHeight`
var diagram = new ej.diagrams.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`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.id`
var diagram = new ej.diagrams.Diagram({
nodes: [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
|
| Defines the opaque of the node |
Property:`nodes.opacity`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
opacity: 0.5,
rotateAngle: 70
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.style.opacity`
var diagram = new ej.diagrams.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`
var node1 = {
name: "node1",
width: 50,
height: 50
};
var node2 = {
name: "node2",
width: 50,
height: 50,
verticalAlign: "bottom"
};
var 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
};
$("#diagramcontent").ejDiagram({nodes:[group]});
|
Not applicable |
| Sets the name of the parent group |
Property:`nodes.parent`
var node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
parent: "group"
};
var node2 = {
name: "node2",
width: 50,
height: 50,
offsetX: 150,
offsetY: 150,
parent: "group"
};
var group = {
name: “group”,
children: [“node1”, “node2”]
};
$(“#diagramcontent”).ejDiagram({
nodes: [node1, node2, group]
});
|
Not applicable
|
| Sets the path geometry that defines the shape of a path node |
Property:`nodes.pathData`
var nodes;
nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "basic",
shape: "path",
pathData: "M 370.9702,194.9961 L 359.5112,159.7291 L 389.5112,137.9341 L 419.5112,159.7291 L 408.0522,194.9961 L 370.9702,194.9961 z"
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.data`
var nodes = [
{
id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100,
shape: { type: 'Path', data: 'M 540.3643,137.9336 L 546.7973,159.7016 L 570.3633,159.7296 L 550.7723,171.9366 L 558.9053,194.9966 L 540.3643,179.4996 L 521.8223,194.9966 L 529.9553,171.9366 L 510.3633,159.7296 L 533.9313,159.7016 L 540.3643,137.9336 z' },
},
];
var diagram = new ej.diagrams.Diagram({
width: ‘800px’, height: ‘500px’, nodes: nodes
});
|
| An array of objects, where each object represents a smaller region(phase) of a swimlane |
Property:`nodes.phases`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
}
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the header of the smaller regions |
Property:`nodes.phases.label`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
}
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Defines the line color of the splitter that splits adjacent phases |
Property:`nodes.phases.lineColor`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
},
lineColor:"green",
lineDashArray:"2,2",
lineWidth:3
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Sets the length of the smaller region(phase) of a swimlane |
Property:`nodes.phases.offset`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase1"
}
},
{
name: "phase2",
label: {
text: "Phase2"
}
}
]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Sets the orientation of the phase |
Property:`nodes.phases.orientation`
var diagram = $("#diagramcontent").ejDiagram("instance");
diagram.addPhase(diagram.selectionList[0].name,
{
name: "verticalPhase",
type: "phase", offset: 200, orientation: "vertical",
label: { text: "New Phase" }
} );
|
Not applicable |
| Sets the height of the phase headers |
Property:`nodes.phaseSize`
var swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 100,
width: 300,
orientation: "horizontal",
phaseSize: 50,
phases: [{
name: "phase1",
offset: 150,
label: {
text: "Phase 1"
}
}]
};
$("#diagramcontent").ejDiagram({
nodes: [swimlane]
});
|
Not applicable |
| Sets the ratio/ fractional value relative to node, based on which the node will be transformed(positioning, scaling and rotation) |
Property:`nodes.pivot`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
pivot: {
x: 0,
y: 0
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.pivot`
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
pivot: {
x: 0,
y: 0
}
}]
});
diagram.appendTo('#diagram');
|
| Defines a collection of points to draw a polygon. Applicable, if the shape is a polygon |
Property:`nodes.points`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "basic",
shape: "polygon",
points: [{
x: 0,
y: 12.5
}, {
x: 0,
y: 50
}, {
x: 50,
y: 50
}, {
x: 50,
y: 0
}, {
x: 12.5,
y: 0
}, {
x: 0,
y: 12.5
}]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.points`
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Basic',
shape: 'Polygon',
points: [{
x: 35,
y: 0
}, {
x: 65,
y: 0
}, {
x: 100,
y: 35
}, {
x: 100,
y: 65
}, {
x: 65,
y: 100
}, {
x: 35,
y: 100
}, {
x: 0,
y: 65
}, {
x: 0,
y: 35
}]
},
}]
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a port |
Property:`nodes.ports`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
}
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports`
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
}
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Sets the border color of the port |
Property:`nodes.ports.borderColor`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
},
borderColor:"yellow",
borderWidth: 3,
cssClass:"hoverPort",
fillColor:"red",
size: 10,
visibility:ej.datavisualization.Diagram.PortVisibility.Visible
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports.style.strokeColor`
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
},
style: {
strokeColor: 'yellow',
strokeDashArray: '2 2',
strokeWidth: 4,
fill:'red',
opacity: 0.5
}
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Defines whether connections can be created with the port |
Property:`nodes.ports.constraints`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
}
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports.constraints`
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
},
constraints: PortConstraints.Draw
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a port |
Property:`nodes.ports.shape`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
},
shape:ej.datavisualization.Diagram.PortShapes.Path,
pathData: "M5,0 L10,10 L0,10 z"
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.ports.shape`
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Path',
pathData: 'M5,0 L10,10 L0,10 z'
offset: {
x: 0,
y: 0
}
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of the port with respect to its immediate parent |
Not applicable
|
Property:`nodes.ports.verticalAlignment`
var port = [{
id: 'port1',
visibility: PortVisibility.Visible,
shape: 'Circle',
offset: {
x: 0,
y: 0
},
verticalAlignment: 'Top',
horizontalAlignment: 'Left',
width: 10,
height: 10
}];
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
ports: port
}]
});
diagram.appendTo('#diagram');
|
| Defines the opacity and the position of shadow |
Property:`nodes.shadow`
var nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
shadow: { opacity: 0.5, distance: 10, angle: 45 }
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shadow`
var diagram = new ej.diagrams.Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shadow: { opacity: 0.5, distance: 10, angle: 45 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the sub process of a BPMN Activity. Applicable, if the type of the BPMN activity is sub process |
Property:`nodes.subProcess`
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
loop: ej.datavisualization.Diagram.BPMNLoops.Standard,
adhoc: true,
boundary: ej.datavisualization.Diagram.BPMNBoundary.Call,
compensation: true,
collapsed: false
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess`
var nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'SubProcess',
subProcess: { adhoc: false, boundary: 'Default', collapsed: true }
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the collection of events that need to be appended with BPMN Sub-Process |
Property:`nodes.subProcess.events`
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
type: "transaction",
events: [{
name:"intermediate1",
event: "intermediate",
offset: {
x: 0.25,
y: 1
}
},
{
event: "intermediate",
trigger: "error",
offset: {
x: 0.75,
y: 1
}
}
]
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess.events`
var nodes = [{
id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200,
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
activity: 'SubProcess',
subProcess: {
type: 'Event', loop: 'ParallelMultiInstance',
compensation: true, adhoc: false, boundary: 'Event', collapsed: true,
events: [{
height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 },
horizontalAlignment: 'Left',
verticalAlignment: 'Top',
event: 'Intermediate', trigger: 'Error'
}]
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a port |
Property:`nodes.subProcess.events.ports`
var nodes;
nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
type: "transaction",
events: [{
event: "intermediate",
offset: {
x: 0.25,
y: 1
},
ports: [{
name: "port1",
offset: {
x: 0.5,
y: 0
}
},
{
name: "port2",
offset: {
x: 0.5,
y: 1
}
}
]
}]
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess.events.ports`
var nodes = [{
id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200,
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
activity: 'SubProcess',
subProcess: {
type: 'Event', loop: 'ParallelMultiInstance',
compensation: true, adhoc: false, boundary: 'Event', collapsed: true,
events: [{
height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 },
horizontalAlignment: 'Left',
verticalAlignment: 'Top',
ports: [{
id: 'port1', visibility: PortVisibility.Visible,
shape: 'Circle', offset: { x: 0, y: 0 }
}],
event: 'Intermediate', trigger: 'Error'
}]
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| A collection of objects where each object represents a label |
Property:`nodes.subProcess.events.labels`
var label = [];
label = { "text": "Node1", "fontColor": "Red"};
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "subprocess",
subProcess: {
type: "transaction",
events: [{
event: "intermediate",
offset: {
x: 0.25,
y: 1
},
{labels:label}
}]
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.subProcess.events.annotations`
var nodes = [{
id: 'node1', width: 190, height: 190, offsetX: 300, offsetY: 200,
shape: {
type: 'Bpmn', shape: 'Activity', activity: {
activity: 'SubProcess',
subProcess: {
type: 'Event', loop: 'ParallelMultiInstance',
compensation: true, adhoc: false, boundary: 'Event', collapsed: true,
events: [{
height: 20, width: 20, offset: { x: 0, y: 0 }, margin: { left: 10, top: 10 },
horizontalAlignment: 'Left',
verticalAlignment: 'Top',
annotations: [{
id: 'label3', margin: { bottom: 10 },
horizontalAlignment: 'Center',
verticalAlignment: 'Top',
content: 'Event', offset: { x: 0.5, y: 1 },
style: {
color: 'black', fontFamily: 'Fantasy', fontSize: 8
}
}],
event: 'Intermediate', trigger: 'Error'
}]
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the task of the BPMN activity. Applicable, if the type of activity is set as task |
Property:`nodes.task`
var nodes = [{
name: "node1",
width: 100,
height: 100,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "activity",
activity: "task",
task: {
compensation: true,
call: true,
loop: ej.datavisualization.Diagram.BPMNLoops.Standard,
type: ej.datavisualization.Diagram.BPMNTasks.Service
}
}];
$("#diagramcontent").ejDiagram({
nodes: nodes
});
|
Property:`nodes.shape.activity.task`
var nodes = [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'Task',
task: {
call: true,
compensation: false,
type: 'Service',
loop: 'ParallelMultiInstance'
}
}
}
}];
var diagram = new ej.diagrams.Diagram({
width: '100%', height: '600px',
nodes: nodes
});
diagram.appendTo('#diagram');
diagram.tool = DiagramTools.ZoomPan;
|