Data Binding

The Diagram provides options for binding it to data.

Make sure that you are familiar with the Kendo UI for jQuery DataSource component.

To create a hierarchical Diagram, pass a Kendo UI template and a data source as an option.

var diagram = $("#diagram").kendoDiagram({
    theme: "default",
    dataSource: [{
      "name": "Telerik",
      "items": [{
        "name": "Kendo"
      }, {
        "name": "Icenium"
      }]
    }],
    shapeDefaults: {
      content: {
        template: "#= item.name #"
      }
    }
}).data("kendoDiagram");
diagram.layout();

The previous example produces a tree diagram with default rectangular shapes. Alternatively, you can also define the data binding through the setDataSource method.

diagram.options.template = "#= item.name #";
diagram.setDataSource([{"name": ... }]);

To provide more flexibility, you can control the location and the way to display the data by defining the visualTemplate option. This approach requires the creation of a function which returns a visual element (usually a Group) that contains other visuals which are bound to your data.

The following example demonstrates how to reproduce the same Diagram with ellipses instead with rectangular shapes. The function which returns a visual has a parameter that contains the data item which will be displayed.

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();

See Also

In this article
Not finding the help you need? Improve this article