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 |
| addInfo |
Property:`connectors.addInfo`
let addInfo = {
Description: "Bidirectional Flow"
};
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
addInfo: addInfo
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.addInfo`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the bridgeSpace of connector |
Property:`connectors.bridgeSpace`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 200,
y: 200
},
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.bridgeSpace`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
bridgeSpace: 15,
targetPoint: {
x: 600,
y: 200
}
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Enables or disables the behaviors of connectors |
Property:`connectors.constraints`
let ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.Select
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.constraints`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
constraints: ConnectorConstraints.Default | ConnectorConstraints.Drag
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the radius of the rounded corner |
Property:`connectors.cornerRadius`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cornerRadius: 10, segments:[{ type: "orthogonal"}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.cornerRadius`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
cornerRadius: 10,
type: 'Orthogonal',
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| cssClass |
Property:`connectors.cssClass`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
cssClass: "hoverConnector"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Alignment |
Property:`connectors.horizontalAlign`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
horizontalAlign:ej.datavisualization.Diagram.HorizontalAlignment.Right
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| A collection of JSON objects where each object represents a label |
Property:`connectors.labels`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
labels:[{ text:"connector" }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.annotations`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
annotations: [{ id: 'label', content: 'Text', offset: 0.5 }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| stroke color of the connector |
Property:`connectors.lineColor`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor:"blue"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.style.strokeColor`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue' },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the pattern of dashes and gaps used to stroke the path of the connector |
Property:`connectors.lineDashArray`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineColor:"blue", lineDashArray: "2,2"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.style.strokeDashArray`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the width of the line |
Property:`connectors.lineWidth`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineWidth: 10
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.style.strokeWidth`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2' },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the padding value to ease the interaction with connectors
|
Property:`connectors.lineHitPadding`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
lineHitPadding: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.hitPadding`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
hitPadding: 10
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the bottom of parent bounds and the connector
|
Property:`connectors.marginBottom`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginBottom: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.margin.bottom`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { bottom: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the top of parent bounds and the connector
|
Property:`connectors.marginTop`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginTop: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.margin.top`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { top: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the left of parent bounds and the connector
|
Property:`connectors.marginLeft`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginLeft: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.margin.left`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { left: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the minimum space to be left between the right of parent bounds and the connector
|
Property:`connectors.marginRight`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
marginRight: 15
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.margin.right`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
margin: { right: 3 }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets a unique name for the connector |
Property:`connectors.name`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.id`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
}
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the transparency of the connector |
Property:`connectors.opacity`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
opacity: 0.5
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.style.opacity`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
style: { strokeColor: 'blue', strokeWidth: 3, strokeDashArray: '2,2', opacity: 0.5 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the parent name of the connector.
|
Property:`connectors.parent`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
parent:"group"
};
let group = { name :"group", children:["connector"] };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector],
nodes:[group]
});
|
Not applicable
|
| An array of JSON objects where each object represents a segment
|
Property:`connectors.segments`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the direction of orthogonal segment
|
Property:`connectors.segments.direction`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }, direction:"bottom"}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.direction`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length of orthogonal segment
|
Property:`connectors.segments.length`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 }, length:50 }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.length`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
{ type: 'Orthogonal', length: 80, direction: 'Right' }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the end point of bezier/straight segment |
Property:`connectors.segments.point`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{type:"straight", point: { x:75, y:150 } }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.point`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [
{ type: 'Straight', point: { x: 800, y: 50 } }]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the first control point of the bezier segment |
Property:`connectors.segments.point1`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50} }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.point1`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the second control point of bezier segment |
Property:`connectors.segments.point2`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier", point1: { x:150, y:50}, point2:{ x: 150, y: 150 } }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.point2`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the segment
|
Property:`connectors.segments.type`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type: ej.datavisualization.Diagram.Segments.Bezier }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.type`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length and angle between the first control point and the start point of bezier segment |
Property:`connectors.segments.vector1`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180} }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.vector1`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 900, y: 160 },
vector1: { angle: 20, distance: 75 },
vector2: { angle: 20, distance: 75 }
}],
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Describes the length and angle between the second control point and end point of bezier segment
|
Property:`connectors.segments.vector2`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
segments: [
{ type:"bezier",
vector1: { distance:75, angle: 0},
vector2: { distance:75, angle: 180}
}]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.segments.vector2`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 900, y: 160 },
vector1: { angle: 20, distance: 75 },
vector2: { angle: 20, distance: 75 }
}]
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the type of the connector
|
Property:`connectors.shape.type`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
shape: { type: "bpmn"},
segments: [{ type:"straight" }]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.shape.type`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
segments: [{
type: 'Bezier',
point: { x: 600, y: 300 },
point1: { x: 525, y: 475 },
point2: { x: 575, y: 475 }
}],
shape: { type: 'Bpmn', flow: 'Message', message: 'InitiatingMessage' }
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the source decorator of the connector
|
Property:`connectors.sourceDecorator`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the source decorator |
Property:`connectors.sourceDecorator.borderColor`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", borderColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.strokeColor`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
style: { strokeColor: 'red' },
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property:`connectors.sourceDecorator.borderWidth`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", borderWidth: 5 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.strokeWidth: 5`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow', strokeWidth: 5
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize sourceDecorator appearance using user-defined CSS
|
Property:`connectors.sourceDecorator.cssClass`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the source decorator
|
Property:`connectors.sourceDecorator.fillColor`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", fillColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.style.fill`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow', fill: 'black'
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the source decorator |
Property:`connectors.sourceDecorator.height`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.height`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
height: 10, width: 10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the source decorator
|
Property:`connectors.sourceDecorator.pathData`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"path", pathData:"M 376.892, 225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.pathData`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Custom',
pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the source decorator.
|
Property:`connectors.sourceDecorator.shape`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.shape`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the source decorator
|
Property:`connectors.sourceDecorator.width`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
sourceDecorator: { shape:"openarrow", width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourceDecorator.width`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
sourceDecorator: {
shape: 'Arrow',
width: 10, height:10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source node of the connector
|
Property:`connectors.sourceNode`
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.sourceID`
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between the source node and the source point of a connector |
Property:`connectors.sourcePadding`
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target",
sourcePadding: 2, targetPadding: 2
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.hitPadding`
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector
|
Property:`connectors.sourcePoint`
let connector = {
name: "connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.sourcePoint`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the source port of the connector
|
Property:`connectors.sourcePort`
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
sourceNode:"source", targetNode:"target",
sourcePort: "port", targetPort:"port1" };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.sourcePortID`
let nodeport1: PointPortModel = { id: ‘port’, shape: ‘Square’, offset: { x: 1, y: 0.5 } };
let nodeport2: PointPortModel = { id: ‘port1’, shape: ‘Square’, offset: { x: 0, y: 0.5 } };
let nodes: NodeModel[] = [
{
id: ‘source’, width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
id: ‘target’, width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];
let connectors: ConnectorModel[] = [{
id: ‘connector’,
type: ‘Straight’,
sourceID: ‘source’, targetID: ‘target’,
sourcePortID: ‘port’,
targetPortID: ‘port1’,
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo(‘#diagram’);
|
| Defines the target decorator of the connector
|
Property:`connectors.targetDecorator`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border color of the target decorator |
Property:`connectors.targetDecorator.borderColor`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", borderColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.strokeColor`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
style: { strokeColor: 'red' },
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the border width of the decorator |
Property:`connectors.targetDecorator.borderWidth`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", borderWidth: 5 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.strokeWidth: 5`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow', strokeWidth: 5
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines to customize target Decorator appearance using user-defined CSS
|
Property:`connectors.targetDecorator.cssClass`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", cssClass:"hoverDecorator" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Sets the fill color of the target decorator
|
Property:`connectors.targetDecorator.fillColor`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", fillColor:"red" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator.style.fill`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow', fill: 'black'
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the height of the target decorator |
Property:`connectors.targetDecorator.height`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator.height`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
height: 10, width: 10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the custom shape of the target decorator
|
Property:`connectors.targetDecorator.pathData`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"path", pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z" }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator.pathData`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Custom',
pathData:"M 376.892,225.284 L 371.279,211.95 L 376.892,198.617 L 350.225,211.95 L 376.892,225.284 Z"
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the shape of the target decorator.
|
Property:`connectors.targetDecorator.shape`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape: ej.datavisualization.Diagram.DecoratorShapes.Circle }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator.shape`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Defines the width of the target decorator
|
Property:`connectors.targetDecorator.width`
let connector = {
name: "connector",
sourcePoint: {
x: 100,
y: 100
},
targetPoint: {
x: 200,
y: 200
},
targetDecorator: { shape:"openarrow", width: 10, height:10 }
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetDecorator.width`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: {
x: 500,
y: 100
},
targetPoint: {
x: 600,
y: 200
},
targetDecorator: {
shape: 'Arrow',
width: 10, height:10
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target node of the connector
|
Property:`connectors.targetNode`
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.targetID`
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Defines the space to be left between the target node and the target point of a connector |
Property:`connectors.targetPadding`
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50 };
let node2 = {name:"target", offsetX:300, offsetY:300, width: 50, height: 50 };
let connector = {
name: "connector",
sourceNode:"source", targetNode:"target",
sourcePadding: 2, targetPadding: 2
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.hitPadding`
let nodes: NodeModel[] = [
{
id: 'source', width: 60, height: 60, offsetX: 75, offsetY: 90
},
{
id: 'target', width: 75, height: 70, offsetX: 210, offsetY: 90
}];
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
hitPadding: 2
sourceID: 'source', targetID: 'target'
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo('#diagram');
|
| Describes the start point of the connector
|
Property:`connectors.targetPoint`
let connector = {
name: "connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.targetPoint`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x: 100, y: 100 },
targetPoint: { x: 200, y: 200 },
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the target port of the connector
|
Property:`connectors.targetPort`
let node1 = {name:"source", offsetX:100, offsetY:100, width: 50, height: 50,
ports:[{ name:"port", offset: { x:1, y:0.5 } }] };
let node2 = {name:"target", offsetX:200, offsetY:200, width: 50, height: 50,
ports:[{ name:"port1", offset: { x:0, y:0.5 } }] };
let connector = { name:"connector",
sourceNode:"source", targetNode:"target",
sourcePort: "port", targetPort:"port1" };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector], nodes:[ node1, node2 ]
});
|
Property:`connectors.targetPortID`
let nodeport1: PointPortModel = { id: ‘port’, shape: ‘Square’, offset: { x: 1, y: 0.5 } };
let nodeport2: PointPortModel = { id: ‘port1’, shape: ‘Square’, offset: { x: 0, y: 0.5 } };
let nodes: NodeModel[] = [
{
id: ‘source’, width: 60, height: 60, offsetX: 75, offsetY: 90, ports: [nodeport1]
},
{
id: ‘target’, width: 75, height: 70, offsetX: 210, offsetY: 90, ports: [nodeport2]
}];
let connectors: ConnectorModel[] = [{
id: ‘connector’,
type: ‘Straight’,
sourceID: ‘source’, targetID: ‘target’,
sourcePortID: ‘port’,
targetPortID: ‘port1’,
}];
let diagram: Diagram = new Diagram({
connectors: connectors, nodes: nodes
});
diagram.appendTo(‘#diagram’);
|
| Defines the tooltip that should be shown when the mouse hovers over connector
|
Property:`connectors.tooltip`
let tooltip = {
templateId: "mouseovertooltip",
alignment: {
horizontal: "center",
vertical: "bottom"
}
};
let ConnectorConstraints = ej.datavisualization.Diagram.ConnectorConstraints;
let connector = {
name: "flow",sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
constraints: ConnectorConstraints.Default & ~ConnectorConstraints.InheritTooltip,
tooltip:tooltip
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.tooltip`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint: { x:100, y: 100 }, targetPoint :{ x:200, y:200 },
constraints: ConnectorConstraints.Default | ConnectorConstraints.Tooltip,
tooltip: {
content: 'Connector',
position: 'TopCenter', showTipPointer: true,
},
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of connector
|
Property:`connectors.verticalAlign`
let connector = {
name:"connector",
sourcePoint:{x:100, y:100}, targetPoint:{x:150, y:150},
verticalAlign:ej.datavisualization.Diagram.VerticalAlignment.Bottom };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Not applicable |
| Enables or disables the visibility of connector
|
Property:`connectors.visible`
let connector = { name:"connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
visible: true
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.visible`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
visible: true
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Sets the z-index of the connector
|
Property:`connectors.zOrder`
let connector = { name:"connector",
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
zOrder: 1000 };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
connectors: [connector]
});
|
Property:`connectors.zIndex`
let connectors: ConnectorModel[] = [{
id: 'connector',
type: 'Straight',
sourcePoint:{x:100, y:100},
targetPoint:{x:200, y:200},
zIndex: -1
}];
let diagram: Diagram = new Diagram({
connectors: connectors
});
diagram.appendTo('#diagram');
|
| Binds the custom JSON data with connector properties
|
Property:`connectors.connectorTemplate`
let data = [
{ "Id": "E1", "Name": "Maria Anders", "Designation": "Managing Director" },
{ "Id": "E2" , "Name": "Ana Trujillo", "Designation": "Project Manager", "ReportingPerson": "E1" } ];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
dataSourceSettings: { id: "Id", parent: "ReportingPerson", dataSource: data },
connectorTemplate :"connectorTemplate"
});
function connectorTemplate(diagram, connector) {
if(connector.sourceNode && connector.targetNode){
connector.lineColor = "green";
}
}
|
Not applicable |
| Enables/Disables the default behaviors of the diagram
|
Property:`constraints`
let DiagramConstraints = ej.datavisualization.Diagram.DiagramConstraints;
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging });
|
Property:`constraints`
let diagram: Diagram = new Diagram({
constraints: DiagramConstraints.Default | DiagramConstraints.Bridging
});
diagram.appendTo('#diagram');
|
| behavior |
API in Essential JS 1 |
API in Essential JS 2 |
| Array of JSON objects where each object represents a node |
Property:`nodes`
let nodes = [{ name: "node1", width: 175, height: 60, offsetX:100, offsetY:100}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`annotations.content`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the type of BPMN Activity. Applicable, if the node is a BPMN activity |
Property:`nodes.activity`
let nodes = [{
type: "bpmn", shape: ej.datavisualization.Diagram.BPMNShapes.Activity, activity: ej.datavisualization.Diagram.BPMNActivity.SubProcess, width:50, height:50
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`nodes.shape.activity`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'Activity',
activity: {
activity: 'Task'
},
},
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| To maintain additional information about nodes |
Property:`nodes.addInfo`
let addInfo = { TooltipData: "Shares the information with the customer" };
let node1 = { name: “node1”, addInfo: addInfo, offsetX:100, offsetY:100, width:50, height:50 };
let node2 = { type: “swimlane”, name: “swimlane”, addInfo: addInfo };
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {nodes:[node1, node2]});
|
Property:`nodes.addInfo`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
addInfo: {
"borderColor": "black", "borderWidth": '1px'
},
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the additional information of a process. It is not directly related to the message flows or sequence flows of the process |
Property:`nodes.annotation`
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45, length: 150, direction: "top"
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`nodes.shape.annotations`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
length: 150,
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the angle between the BPMN shape and the annotation |
Property:`nodes.annotation.angle`
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`nodes.shape.annotations.angle`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
angle: 45,
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the direction of the text annotation |
Property:`nodes.annotation.direction`
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
angle: -45, length: 150, direction: "top"
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Not applicable |
| Sets the height of the text annotation |
Property:`nodes.annotation.height`
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`nodes.shape.annotations.height`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
height: 50
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the distance between the BPMN shape and the annotation |
Property:`nodes.annotation.length`
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50,
length: 150
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`nodes.shape.annotations.length`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
length: 150,
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines the additional information about the flow object in a BPMN Process |
Property:`nodes.annotation.text`
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape"
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`nodes.shape.annotations.text`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the width of the text annotation |
Property:`nodes.annotation.width`
let nodes = [{
name: "node1", width: 100, height:100, offsetX:50, offsetY:50,
type:"bpmn", shape: "activity",
annotation: {
text: "This is a BPMN Activity shape", width: 100, height: 50
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Property:`nodes.shape.annotations.width`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
width: 45,
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Sets the id for the annotation |
Not applicable
|
Property:`nodes.shape.annotations.id`
let node: NodeModel = {
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: true,
type: 'Input'
},
annotations: [{
id: 'left',
text: 'Left',
}]
}
};
let diagram: Diagram = new Diagram({
nodes: [node]
});
diagram.appendTo('#diagram');
|
| Defines whether the group can be ungrouped or not |
Property:`nodes.canUngroup`
let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};
let group = { name :"group", children:[node1, node2], canUngroup: false };
let diagram = new ej.datavisualization.Diagram($("#diagram"), {nodes:[group]});
|
Not applicable
|
| Array of JSON objects where each object represents a child node/connector |
Property:`nodes.children`
let node1 = { name: "node1", width: 50, height:50, offsetX:50, offsetY:50, borderColor: "red" , borderDashArray: "4,2"};
let node2 = { name: "node2", width: 50, height:50, offsetX:150, offsetY:150, borderColor: "red" , borderDashArray: "4,2"};
let group = { name :“group”, children:[node1, node2]};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), { nodes:[group] });
|
Property:`nodes.children`
let node1: NodeModel = {
id: 'node1',
offsetX: 250,
offsetY: 250,
width: 100,
height: 100,
};
let node2: NodeModel = {
id: 'node2',
offsetX: 450,
offsetY: 450,
width: 100,
height: 100,
};
let group: NodeModel = {
id: 'group',
};
group.children = ['node1', 'node2'];
let diagram: Diagram = new Diagram({
nodes: [group]
});
diagram.appendTo('#diagram');
|
| Sets the type of UML classifier |
Property:`nodes.classifier`
let nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.Class
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of class |
Property:`nodes.class.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.class.attributes`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.class.attributes.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.class.attributes.type`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.class.attributes.scope`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a Class |
Property:`nodes.class.methods`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property:`nodes.class.methods.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.class.methods.arguments`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the name, attributes and methods of a Class. Applicable, if the node is a Class |
Property:`nodes.class.methods.arguments.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.class.methods.arguments.type`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.class.methods.type`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.class.methods.scope`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Class,
"class": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the state of the node is collapsed |
Property:`nodes.collapseIcon`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}],
});
|
Property:`nodes.collapseIcon`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the border color for collapse icon of node |
Property:`nodes.collapseIcon.borderColor`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
borderColor: "red"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderColor: "red"
}
}],
});
|
Property:`nodes.collapseIcon.borderColor`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderColor: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderColor: 'red' }
}]
});
diagram.appendTo('#diagram');
|
| Sets the border width for collapse icon of node |
Property:`nodes.collapseIcon.borderWidth`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
borderWidth: "2"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
borderWidth: "2"
}
}],
});
|
Property:`nodes.collapseIcon.borderWidth`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", borderWidth: '2' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", borderWidth: '2' }
}]
});
diagram.appendTo('#diagram');
|
| Sets the fill color for collapse icon of node |
Property:`nodes.collapseIcon.fillColor`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
fillColor: "green"
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
fillColor: "green"
}
}],
});
|
Property:`nodes.collapseIcon.fill`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", fill: 'red' }
}]
});
diagram.appendTo('#diagram');
|
| Defines the height for collapse icon of node |
Property:`nodes.collapseIcon.height`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown"
}
}],
});
|
Property:`nodes.collapseIcon.height`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the icon |
Property:`nodes.collapseIcon.horizontalAlignment`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
horizontalAlignment:ej.datavisualization.Diagram.HorizontalAlignment.Left
}
}],
});
|
Property:`nodes.collapseIcon.horizontalAlignment`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", horizontalAlignment:'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", horizontalAlignment:'Center' }
}]
});
diagram.appendTo('#diagram');
|
| To set the margin for the collapse icon of node |
Property:`nodes.collapseIcon.margin`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
margin:{ left: 5 }
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
margin:{ left: 5 }
}
}],
});
|
Property:`nodes.collapseIcon.margin`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red',
margin:{ left: 5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
margin:{ left: 5 } }
}]
});
diagram.appendTo('#diagram');
|
| Sets the fraction/ratio(relative to node) that defines the position of the icon |
Property:`nodes.collapseIcon.offset`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
offset:ej.datavisualization.Diagram.Point(0,0.5)
},
expandIcon: {
height: 10,
width: 10,
shape: "ArrowDown",
offset:ej.datavisualization.Diagram.Point(0,0.5)
}
}],
});
|
Property:`nodes.collapseIcon.offset`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown",
offset: { x: 0, y: 0.5 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp",
offset: { x: 0, y: 0.5 } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the shape of the collapsed state of the node |
Property:`nodes.collapseIcon.shape`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10
},
expandIcon: {
height: 10,
width: 10,
shape: "arrowdown"
}
}],
});
|
Property:`nodes.collapseIcon.shape`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", fill: 'red' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp" }
}]
});
diagram.appendTo('#diagram');
|
| Sets the vertical alignment of the icon |
Property:`nodes.collapseIcon.verticalAlignment `
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
collapseIcon: {
shape:"arrowup",
width:10,
height:10,
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top
},
expandIcon: {
height: 10,
width: 10,
shape: "arrowdown",
verticalAlignment:ej.datavisualization.Diagram.VerticalAlignment.Top
}
}],
});
|
Property:`nodes.collapseIcon.verticalAlignment `
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", verticalAlignment: 'Center' },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", verticalAlignment: 'Center' }
}]
});
diagram.appendTo('#diagram');
|
| Defines the custom content of the icon |
Not applicable
|
Property:`nodes.collapseIcon.content`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
expandIcon: {
height: 20,
width: 20,
shape: "Template",
content: '' +
''
},
collapseIcon: {
height: 20,
width: 20,
shape: "ArrowUp"
}
}]
});
diagram.appendTo('#diagram');
|
| Defines the geometry of a path |
Not applicable
|
Property:`nodes.collapseIcon.pathData`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" },
collapseIcon: { height: 20, width: 20, shape: "Path", pathData: "M0,0 L0,100" }
}]
});
diagram.appendTo('#diagram');
|
| Defines the corner radius of the icon border |
Not applicable
|
Property:`nodes.collapseIcon.cornerRadius`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", cornerRadius: 3},
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", cornerRadius: 3 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the space that the icon has to be moved from the icon border |
Not applicable
|
Property:`nodes.collapseIcon.padding`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
,
expandIcon: { height: 20, width: 20, shape: "ArrowDown", padding: { left: 50 } },
collapseIcon: { height: 20, width: 20, shape: "ArrowUp", padding: { left: 50 } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the distance to be left between a node and its connections(In coming and out going connections) |
Property:`nodes.connectorPadding`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
connectorPadding: 5
}],
});
|
Not applicable |
| Enables or disables the default behaviors of the node |
Property:`nodes.constraints`
let NodeConstraints = ej.datavisualization.Diagram.NodeConstraints;
$(“#diagram”).ejDiagram({
nodes: [{
name: “node”,
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
constraints: NodeConstraints.Default & ~NodeConstraints.Select
}],
});
|
Property:`nodes.constraints`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
constraints: NodeConstraints.Default | NodeConstraints.Select
}]
});
diagram.appendTo('#diagram');
|
| Defines how the child objects need to be arranged(Either in any predefined manner or automatically). Applicable, if the node is a group |
Property:`nodes.container`
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "stack"
},
offsetX: 200,
offsetY: 100
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| Defines the orientation of the container. Applicable, if the group is a container |
Property:`nodes.container.orientation`
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "stack",
orientation: "horizontal"
},
offsetX: 200,
offsetY: 100
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| Sets the type of the container. Applicable if the group is a container. |
Property:`nodes.container.type`
let node1 = {
name: "node1",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let node2 = {
name: "node2",
width: 50,
height: 50,
borderColor: "red",
borderDashArray: "4,2"
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: ej.datavisualization.Diagram.ContainerType.Stack
},
offsetX: 200,
offsetY: 100
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| Defines the corner radius of rectangular shapes |
Property:`nodes.cornerRadius`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
type:"basic",
shape:"rectangle",
cornerRadius:5
}],
});
|
Not applicable |
| This property allows you to customize nodes appearance using user-defined CSS |
Property:`nodes.cssClass`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
cssClass: "hoverNode"
}],
});
|
Not applicable |
| Defines the BPMN data object |
Property:`nodes.data.type`
$("#diagram").ejDiagram({
nodes: [{
name: "dataobject",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.DataObject,
data: {
type: ej.datavisualization.Diagram.BPMNDataObjects.Input
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}]
});
|
Property:`nodes.shape.dataObject.type`
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
});
diagram.appendTo('#diagram');
|
| Defines whether the BPMN data object is a collection or not |
Property:`nodes.data.collection`
$("#diagram").ejDiagram({
nodes: [{
name: "dataobject",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.DataObject,
data: {
type: ej.datavisualization.Diagram.BPMNDataObjects.Input,
collection: false
},
width: 50,
height: 50,
offsetX: 100,
offsetY: 100
}]
});
|
Property:`nodes.shape.dataObject.collection`
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: {
type: 'Bpmn',
shape: 'DataObject',
dataObject: {
collection: false,
type: 'Input'
}
}
}]
});
diagram.appendTo('#diagram');
|
| Defines an Enumeration in a UML Class Diagram |
Property:`nodes.enumeration`
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
});
|
Not applicable |
| Sets the name of the Enumeration |
Property:`nodes.enumeration.name`
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
}
}]
});
|
Not applicable |
| Defines the collection of enumeration members |
Property:`nodes.enumeration.members`
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
});
|
Not applicable |
| Sets the name of the enumeration member |
Property:`nodes.enumeration.members.name`
$("#diagram").ejDiagram({
nodes : [{
name: "Enums",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.Enumeration,
enumeration: {
name: "AccountType",
members: [{ name: "CheckingAccount"}]
}
}]
});
|
Not applicable |
| Sets the type of the BPMN Events. Applicable, if the node is a BPMN event |
Property:`nodes.event`
$("#diagram").ejDiagram({
nodes : [{
name: "nodeEvent",
type: "bpmn",
shape: "event",
event: ej.datavisualization.Diagram.BPMNEvents.Intermediate,
width: 50,
height: 50
}]
});
|
Property:`nodes.shape.event`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
});
diagram.appendTo('#diagram');
|
| Defines the type of the trigger |
Property:`nodes.event.trigger`
$("#diagram").ejDiagram({
nodes : [{
name: "nodeEvent",
type: "bpmn",
shape: ej.datavisualization.Diagram.BPMNShapes.Event,
trigger: ej.datavisualization.Diagram.BPMNTriggers.None,
width: 50,
height: 50
}]
});
|
Property:`nodes.shape.event.trigger`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
shape: {
type: 'Bpmn', shape: 'Event',
event: { event: 'Start', trigger: 'None' } }
}]
});
diagram.appendTo('#diagram');
|
| Defines whether the node can be automatically arranged using layout or not |
Property:`nodes.excludeFromLayout`
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
excludeFromLayout: true
};
let node2 = {
name: “node2”,
width: 50,
height: 50
};
let node3 = {
name: “node3”,
width: 50,
height: 50
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1, node2, node3],
layout: {
type: “hierarchicaltree”
}
});
|
Property:`nodes.excludeFromLayout`
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
excludeFromLayout: true,
},
{ id: 'node1', width: 70, height: 70, annotations: [{ content: 'node1' }] },
{ id: 'node2', width: 70, height: 70, annotations: [{ content: 'node2' }] };
],
layout: {
type: 'RadialTree',
},
});
diagram.appendTo('#diagram');
|
| Defines the fill color of the node |
Property:`nodes.fillColor`
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
fillColor:"red"};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.fill`
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
style: { fill: 'red' }
},
],
});
diagram.appendTo('#diagram');
|
| Sets the type of the BPMN Gateway. Applicable, if the node is a BPMN gateway |
Property:`nodes.gateway`
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
type: "bpmn",
shape: "gateway" ,
gateway: ej.datavisualization.Diagram.BPMNGateways.Exclusive
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.shape.gateway`
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node', width: 100, height: 100, offsetX: 100, offsetY: 100,
shape: { type: 'Bpmn', shape: 'Gateway', gateway: { type: 'Exclusive' }
}
}],
});
diagram.appendTo('#diagram');
|
| Paints the node with linear color transitions |
Property:`nodes.gradient.type`
let gradient = {
LinearGradient: {
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0 }, { color: "red", offset: 50 }]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient: gradient
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.type`
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: ‘node’,
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo(‘#diagram’);
|
| Defines the x1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x1`
let gradient = {
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.x1`
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: ‘node’,
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo(‘#diagram’);
|
| Defines the x2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.x2`
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.x2`
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: ‘node’,
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo(‘#diagram’);
|
| Defines the y1 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y1`
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
}
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.y1`
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: ‘node’,
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo(‘#diagram’);
|
| Defines the y2 value of linear gradient |
Property:`nodes.gradient.LinearGradient.y2`
let gradient = {
LinearGradient:{
type: "linear", x1: 0, x2: 50, y1: 0, y2: 50, stops: [
{ color: "white", offset: 0}, { color: "red", offset: 50}]
};
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
gradient : gradient
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.LinearGradient.y2`
let stopscol: StopModel[] = [];
let stops1: StopModel = {
color: 'white',
offset: 0
};
stopscol.push(stops1);
let stops2: StopModel = {
color: 'red',
offset: 50
};
stopscol.push(stops2);
let gradient1: LinearGradientModel = {
x1: 0,
x2: 50,
y1: 0,
y2: 50,
stops: stopscol,
type: 'Linear'
};
let diagram: Diagram = new Diagram({
nodes: [{
id: ‘node’,
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient1
}
}],
});
diagram.appendTo(‘#diagram’);
|
| Defines the type of gradient |
Property:`nodes.gradient.RadialGradient.type`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.type`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the position of the outermost circle
|
Property:`nodes.gradient.RadialGradient.cx`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.cx`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the outer most circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.cy`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.cy`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the innermost circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.fx`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.fx`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the innermost circle of the radial gradient |
Property:`nodes.gradient.RadialGradient.fy`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.fy`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the different colors and the region of color transitions |
Property:`nodes.gradient.RadialGradient.stops`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.RadialGradient.stops`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Sets the color to be filled over the specified region |
Property:`nodes.gradient.stops.color`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.color`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Sets the position where the previous color transition ends and a new color transition starts |
Property:`nodes.gradient.stops.offset`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.offset`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Describes the transparency level of the region |
Property:`nodes.gradient.stops.opacity`
let node = {
name: "node",
width: 50,
height: 50,
offsetX: 100,
offsetY: 100,
gradient: {
RadialGradient:{
type: "radial",
fx: 50,
fy: 50,
cx: 50,
cy: 50,
stops: [{
color: "white",
offset: 0
}, {
color: "red",
offset: 100,
opacity: 0.5
}]
}
}
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1],
});
|
Property:`nodes.style.gradient.stops.opacity`
let stops: StopModel[] = [{ color: 'white', offset: 0 }, { color: 'red', offset: 50, opacity: 0.5 }];
let gradient: RadialGradientModel = { cx: 50, cy: 50, fx: 50, fy: 50, stops: stops, type: 'Radial' };
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
style: {
gradient: gradient
}
}],
});
diagram.appendTo('#diagram');
|
| Defines the header of a swimlane/lane |
Property:`nodes.header`
let swimlane = {
type: "swimlane",
name: "swimlane",
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the height of the node |
Property:`nodes.height`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
}],
});
|
Property:`nodes.height`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
|
| Sets the horizontal alignment of the node. Applicable, if the parent of the node is a container |
Property:`nodes.horizontalAlign`
let node1 = {
name: "node1",
width: 50,
height: 50
};
let node2 = {
name: "node2",
width: 50,
height: 50,
horizontalAlign: ej.datavisualization.Diagram.HorizontalAlignment.Right
};
let group = {
name: "group",
children: [node1, node2],
container: {
type: "canvas"
},
offsetX: 200,
offsetY: 100,
minWidth: 200,
minHeight: 200,
fillColor: "red"
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [group]
});
|
Not applicable |
| A read only collection of the incoming connectors/edges of the node |
Property:`nodes.inEdges`
let node = diagram.selectionList[0];
for(let i = 0; i < node.inEdges.length; i++){
console.log(node.inEdges[i]);
};
|
Property:`nodes.height`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
let node: string[] = (diagram.nodes[0] as Node).inEdges;
for (let i: number = 0; i < node.length; i++) {
console.log(node[i]);
};
|
| Defines an interface in a UML interface Diagram |
Property:`nodes.interface`
let nodes = [{
name: "Patient", offsetX: 100, offsetY: 100, borderWidth: 2, borderColor: "black",
type: "umlclassifier", classifier: ej.datavisualization.Diagram.ClassifierShapes.interface
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), { nodes:nodes });
|
Not applicable |
| Defines the name, attributes and methods of a Interface. Applicable, if the node is a Interface |
Property:`nodes.interface.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of attributes |
Property:`nodes.interface.attributes`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted"}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the attribute |
Property:`nodes.interface.attributes.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the data type of attribute |
Property:`nodes.interface.attributes.type`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the visibility of the attribute |
Property:`nodes.interface.attributes.scope`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
attributes: [{ name: "accepted", type: "Date", scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the collection of methods of a interface |
Property:`nodes.interface.methods`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient", methods: [{ name: "getHistory" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the name of the method |
Property:`nodes.interface.methods.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the arguments of the method |
Property:`nodes.interface.methods.arguments`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{
name: "Date",
type:"String"
}]
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines the name, attributes and methods of a interface. Applicable, if the node is a interface |
Property:`nodes.interface.methods.arguments.name`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the type of the argument |
Property:`nodes.interface.methods.arguments.type`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [
{
name: "getHistory",
arguments: [
{ name: "Date" }
],
type: "History"
}]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the return type of the method |
Property:`nodes.interface.methods.type`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Sets the visibility of the method |
Property:`nodes.interface.methods.scope`
let nodes = [{
name: "Patient",
offsetX: 100,
offsetY: 100,
borderWidth: 2,
borderColor: "black",
type: "umlclassifier",
classifier: ej.datavisualization.Diagram.ClassifierShapes.interface,
"interface": {
name: "Patient",
methods: [{
name: "getHistory",
arguments: [{name: "Date" }],
type: "History",
scope:"protected" }]
}
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Not applicable |
| Defines whether the sub tree of the node is expanded or collapsed |
Property:`nodes.isExpanded`
let node1 = {
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
isExpanded: false
};
let node2 = {
name: “node2”,
width: 50,
height: 50
};
let connector = {
sourceNode: “node1”,
targetNode: “node2”,
name: “connector”
};
let diagram = new ej.datavisualization.Diagram($(“#diagram”), {
nodes: [node1, node2],
connectors: [connector],
layout: {
type: “hierarchicaltree”
}
});
|
Property:`nodes.isExpanded`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
id: 'node1',
isExpanded: true,
},
{
id: 'node2',
width: 50,
height: 50
}],
connectors: [{
sourceNode: 'node1',
targetNode: 'node2',
id: 'connector'
}],
layout: {
type: "hierarchicaltree"
}
});
diagram.appendTo('#diagram');
|
| Sets the node as a swimlane |
Property:`nodes.isSwimlane`
let swimlane = {
type: "swimlane",
name: "swimlane",
isSwimlane: true,
header: {
text: "Swimlane",
fontSize: 12,
bold: true
}
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| A collection of objects where each object represents a label |
Property:`nodes.labels`
$("#diagram").ejDiagram({
nodes: [{
name: "node",
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
labels: [
{
text: "Label",
fontColor: "Red"
}
]
}],
});
|
Property:`nodes.annotations`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
annotations: [{
content: 'Annotation'
}]
}]
});
diagram.appendTo('#diagram');
|
| An array of objects where each object represents a lane. Applicable, if the node is a swimlane |
Property:`nodes.lanes`
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| This property allows you to customize lanes appearance using user-defined CSS |
Property:`nodes.lanes.cssClass`
let addInfo = { Description:"Describe the functionality" };
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
cssClass:"hoverLane",
addInfo: addInfo,
fillColor:"lightgrey"
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the header of the lane |
Property:`nodes.lanes.header`
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
header: {
fillColor:"blue",
fontColor:"white",
text:"Function 1"
}
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the width of lane |
Property:`nodes.lanes.width`
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
zOrder:10
},
{
name: "lane2",
width: 100
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| An array of objects where each object represents a child node of the lane |
Property:`nodes.lanes.children`
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200
},
{
name: "lane2",
width: 100,
children:[{name:"process", width: 50, height: 50 }]
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the object as a lane |
Property:`nodes.lanes.isLane`
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
height: 200,
isLane:true,
orientation:"vertical"
},
{
name: "lane2",
width: 100
}
]
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Not applicable |
| Defines the minimum space to be left between the bottom of parent bounds and the node |
Property:`nodes.margin`
let swimlane = {
type: "swimlane",
name: "swimlane",
offsetX: 300,
offsetY: 200,
lanes: [{
name: "lane1",
width: 200,
children: [{
name: "process",
width: 50,
height: 50,
marginBottom: 50,
marginLeft: 10,
marginRight: 10,
marginTop: 10
}]
}]
}
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: [swimlane]
});
|
Property:`nodes.margin`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
margin : { left: 15, right: 15, top: 15, bottom: 15 }
}]
});
diagram.appendTo('#diagram');
|
| Defines the maximum height limit of the node |
Property:`nodes.maxHeight`
let nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Property:`nodes.maxHeight`
let diagram: Diagram = new Diagram({
nodes: [{
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
maxHeight: 100,
maxWidth: 100,
minHeight: 10,
minWidth: 10
}]
});
diagram.appendTo('#diagram');
|
| Sets the unique identifier of the node |
Property:`nodes.name`
let nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Property:`nodes.id`
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
}]
});
diagram.appendTo('#diagram');
|
| Defines the opaque of the node |
Property:`nodes.opacity`
let nodes = [{
name: "node1",
width: 50,
height: 50,
offsetX: 50,
offsetY: 50,
opacity: 0.5,
rotateAngle: 70
}];
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
nodes: nodes
});
|
Property:`nodes.style.opacity`
let diagram: Diagram = new Diagram({
nodes: [{
id: 'node1'
offsetX: 100,
offsetY: 100,
width: 100,
height: 100,
rotateAngle: 70,
style: {
opacity: 0.5
}
}]
});
diagram.appendTo('#diagram');
|
| Defines the minimum padding value to be left between the bottom most position of a group and its children. Applicable, if the group is a container |
Property:`nodes.paddingBottom`
let node1 = { name: "node1", width: 50, height:50};
let node2 = { name: "node2", width: 50, height:50, verticalAlign: "bottom"};
let group = { name :"group", children:[ node1, node2 ],
container: { type: "canvas" }, offsetX:200, offsetY:100,
fillColor:"gray", minWidth:200, minHeight:200,
paddingBottom:10, paddingLeft:10, paddingRight:10, paddingTop:10
};
let diagram = new ej.datavisualization.Diagram($("#diagram"), {nodes:[group]});
|
Not applicable |
Property:`pageSettings.background.color`
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
pageSettings: {
background: {
color: 'red',
source: 'Clayton.png',
scale: 'Meet',
align: 'XMidYMid'
}
},
});
diagram.appendTo('#diagram');
| Defines the scrollable area of diagram. Applicable, if the scroll limit is “limited” |
Property:`pageSettings.scrollableArea`
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
pageSettings: {
scrollableArea: { x:0, y:0, width:1000, height:1000}
}
});
|
Property:`scrollSettings.scrollableArea`
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
scrollSettings: {
scrollableArea: new Rect(0, 0, 300, 300),
},
});
diagram.appendTo('#diagram');
|
| Defines the draggable region of diagram elements |
Property:`pageSettings.boundaryConstraints`
let diagram = new ej.datavisualization.Diagram($("#diagram"), {
pageSettings: {
boundaryConstraints: ej.datavisualization.Diagram.BoundaryConstraints.Diagram
}
});
|
Property:`pageSettings.boundaryConstraints`
let diagram: Diagram = new Diagram({
width: '100%', height: '600px',
pageSettings: {
width: 800, height: 600, boundaryConstraints: 'Diagram'
},
});
diagram.appendTo('#diagram');
|