Edit this page

dataSource Object |Array |kendo.data.DataSource

Defines the data source of the diagram.

Example - defining a tree-diagram via the dataSource

Note that the HierarchicalDataSource needs to be used to define a hierarchy. See also the connectionsDataSource example for other ways to define a diagram through a data source.

<div id="diagram"></div>
<script>
 var dataSource = new kendo.data.HierarchicalDataSource({
    data: [{
        "name": "Telerik",
        "items": [
            {"name": "Kendo",
                "items":[
                    {"name": "Tree"},
                    {"name": "Chart"}
                ]
            },
            {"name": "Icenium"}
        ]
    }],
    schema: {
        model: {
            children: "items"
        }
    }
});
$("#diagram").kendoDiagram({
    dataSource:dataSource,
    layout: {
        type: "tree",
        subtype: "radial"
    },
    shapeDefaults: {
        type: "circle",
        content: {
            template: "#= name #"
        },
        width: 70,
        height: 70,
        hover: {
            fill: "Orange"
        }
    },
    connectionDefaults: {
        stroke: {
            color: "#979797",
            width: 1
        },
        type: "polyline",
        startCap: "FilledCircle",
        endCap: "ArrowEnd"
    },

    autoBind: true
});
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy