KendoUI Diagram

Diagram

by JSDavi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.css">
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<body>
    <div id="example" class="k-content absConf">
        <div class="diagram-wrapper" style="margin: auto;">
            <div id="diagram"></div>
        </div>
    </div>
</body>

CSS

g.append(new dataviz.diagram.Rectangle({
        width: 210,
        height: 75,
        stroke: {
            width: 0
        },
        background: dataItem.colorScheme
    }));

    g.append(new dataviz.diagram.TextBlock({
        text: dataItem.firstName + " " + dataItem.lastName,
        x: 85,
        y: 20,
        color: "#fff"
    }));

    g.append(new dataviz.diagram.TextBlock({
        text: dataItem.title,
        x: 85,
        y: 40,
        color: "#fff"
    }));

    g.append(new dataviz.diagram.Image({
        source: "http://demos.telerik.com/kendo-ui//content/dataviz/diagram/people/" + dataItem.image,
        x: 3,
        y: 3,
        width: 68,
        height: 68
    }));

    return g;
}

JavaScript

//Demo kendo ui diagram
var data = [{
    firstName: "Server0",
    lastName: "S",
    image: "antonio.jpg",
    title: "状态良好",
    colorScheme: "#1696d3",
    items: [{
        firstName: "Server1",
        image: "elizabeth.jpg",
        lastName: "S",
        title: "状态良好！",
        colorScheme: "#ef6944"        
    }, {
        firstName: "Server2",
        lastName: "S",
        image: "diego.jpg",
        title: "状态良好",
        colorScheme: "#ee587b"
    }, {
        firstName: "Server3",
        lastName: "S",
        image: "felipe.jpg",
        title: "状态良好",
        colorScheme: "#75be16"
    }]
}];

function visualTemplate(options) {
    var dataviz = kendo.dataviz;
    var g = new dataviz.diagram.Group();
    var dataItem = options.dataItem;

    g.append(new dataviz.diagram.Rectangle({
        width: 110,
        height: 35,
        stroke: {
            width: 0
        },
        background: dataItem.colorScheme
    }));

    g.append(new dataviz.diagram.TextBlock({
        text: dataItem.firstName,
        x: 38,
        y: 5,
        fontSize:16,
        color: "#fff"
    }));

    g.append(new dataviz.diagram.TextBlock({
        text: dataItem.title,
        x: 38,
        y: 23,
        fontSize:12,
        color: "#fff"
    }));

    g.append(new dataviz.diagram.Image({
        source: "http://demos.telerik.com/kendo-ui//content/dataviz/diagram/people/" + dataItem.image,
        x: 1,
        y: 1,
        width: 33,
        height: 33
    }));

    return g;
}

function createDiagram() {
    $("#diagram").kendoDiagram({
        dataSource: new kendo.data.HierarchicalDataSource({
            data: data,
            schema: {
                model: {
                    children: "items"
                }
            }
        }),
        layout: {
            type: "layered"
        },
        shapeDefaults: {
            visual: visualTemplate,
            editable: false,
            rotatable: true,
            resizable: false
        },
...