This article is an example of the Kendo Diagram Component. The framework used is the Kendo UI for jQuery. In this example, we are tasked to create a link graph.
Here are the requirements:
- Zoomable
- Not editable
- Nodes must be movable
- Connections between nodes have labels
Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Diagram Example</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
editable: {
remove: false,
resize: false,
tools: false,
},
zoomRate: 0.5,
zoomMax: 1.5,
zoomMin: 0.6,
dataSource: [
{id:'king', name:'King'},
{id:'queen', name:'Queen'},
{id:'bishop', name:'Bishop'},
],
connectionsDataSource:[
{from:'king', to:'queen', label: "10%"},
{from:'king', to:'bishop', label: "40%"},
{from:'queen', to:'bishop', label: "55%"},
],
layout: {
type: 'force',
nodeDistance: 200,
},
shapeDefaults: {
type: 'circle',
content: {
template: '#= name #'
},
width: 70,
height: 70,
hover: {
fill: 'Orange'
},
editable: {
connect: false,
tools: false,
},
},
connectionDefaults: {
type: 'polyline',
editable: false,
content:{
template: '#= label#'
}
}
});
</script>
</body>
</html>Open the HTML file in a browser and you should see an output similar to the one shown below.
Kendo Diagram Example
There you have it. A quick and simple example of how to use the Kendo Diagram component.
No comments:
Post a Comment