KendoUI Diagram 2

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="diagram"></div>
</body>

JavaScript

var visualTemplate = function (options) {
    var dataviz = kendo.dataviz,
        dataItem = options.dataItem;

    var g = new dataviz.diagram.Group({
        autoSize: true
    });

    var r = new dataviz.diagram.Circle({
        width: 100,
        height: 60,
        background: "LimeGreen"
    });

    g.append(r);

    var fn = new dataviz.diagram.TextBlock({
        text: dataItem.name,
        color: "#ffffff",
        fontSize: 16,
        x: 30,
        y: 30
    });

    g.append(fn);
    return g;
};

var diagram = $("#diagram").kendoDiagram({
    dataSource: [{
        "name": "Telerik",
            "items": [{
            "name": "Kendo"
        }, {
            "name": "Icenium"
        }]
    }],
    shapeDefaults: {
        visual: visualTemplate
    }
}).data("kendoDiagram");
diagram.layout();