$(function() {
$("#diagram").dxDiagram({
nodes: {
dataSource: new DevExpress.data.ArrayStore({
key: "id",
data: orgItems
}),
imageUrlExpr: "picture",
autoLayout: {
type: "tree",
orientation: "horizontal"
}
},
edges: {
dataSource: new DevExpress.data.ArrayStore({
key: "id",
data: orgLinks
})
},
toolbox: {
groups: ["general", { category: "orgChart", title: "Organizational Chart", expanded: true }]
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx-diagram.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx-diagram.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
<script src="data.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="diagram">
</div>
</div>
</body>
</html>
#diagram {
height: 900px;
}
var orgItems = [
{
"id":"106",
"text":"Development",
"type":"ellipse"
},
{
"id":"107",
"text":"WinForms\nTeam",
"type": "ellipse"
},
{
"id":"108",
"text":"WPF\nTeam",
"type": "ellipse"
},
{
"id":"109",
"text":"Javascript\nTeam",
"type": "ellipse"
},
{
"id":"110",
"text":"ASP.NET\nTeam",
"type": "ellipse"
},
{
"id":"112",
"text":"Ken Samuelson",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/32.png"
},
{
"id":"113",
"text":"Terry Bradley",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/33.png"
},
{
"id":"115",
"text":"Nat Maguiree",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/34.png"
},
{
"id":"116",
"text":"Gabe Jones",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/35.png"
},
{
"id":"117",
"text":"Lucy Ball",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/36.png"
},
{
"id":"119",
"text":"Bart Arnaz",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/37.png"
},
{
"id":"120",
"text":"Leah Simpson",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/38.png"
},
{
"id":"122",
"text":"Hannah Brookly",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/39.png"
},
{
"id":"123",
"text":"Arnie Schwartz",
"type": "cardWithImageOnLeft",
"picture": "../../../../images/employees/40.png"
}
];
var orgLinks = [
{
"id":"124",
"from":"106",
"to":"108",
},
{
"id":"125",
"from":"106",
"to":"109",
},
{
"id":"126",
"from":"106",
"to":"107",
},
{
"id":"127",
"from":"106",
"to":"110",
},
{
"id":"129",
"from":"110",
"to":"112",
},
{
"id":"130",
"from":"110",
"to":"113",
},
{
"id":"132",
"from":"107",
"to":"115",
},
{
"id":"133",
"from":"107",
"to":"116",
},
{
"id":"134",
"from":"107",
"to":"117",
},
{
"id":"136",
"from":"108",
"to":"119",
},
{
"id":"137",
"from":"108",
"to":"120",
},
{
"id":"139",
"from":"109",
"to":"122",
},
{
"id":"140",
"from":"109",
"to":"123",
}
];