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": "Progress",
      "items": [
        {"name": "Kendo UI",
         "items":[
           {"name": "TreeList"},
           {"name": "Chart"}
         ]
        },
        {"name": "NativeScript"}
      ]
    }],
    schema: {
      model: {
        children: "items"
      }
    }
  });
  $("#diagram").kendoDiagram({
    dataSource: dataSource,
    layout: {
      type: "tree",
      subtype: "down"
    },
    shapeDefaults: {
      type: "circle",
      content: {
        template: "#= name #"
      },
      width: 80,
      height: 80,
      hover: {
        fill: "Orange"
      }
    },
    connectionDefaults: {
      stroke: {
        color: "#979797",
        width: 1
      },
      type: "polyline",
      startCap: "FilledCircle",
      endCap: "ArrowEnd"
    }
  });
</script>