Creating hierarchical structural diagrams using layouts

In this recipe, we will take a look at building hierarchical structural diagrams or tree-like diagrams using the layout option in kendoDiagram. The hierarchical structure can be represented in the JSON format, and it can be used as a DataSource object when building the diagram.

How to do it…

Let's create a hierarchical structure in the JSON format, which can then be used as a DataSource object for building the tree diagram:

var data = [
  {
    "designation": "CEO",
    "name": "Mitchell Johnson",
    "manages": [
      {
        "designation": "Vice President",
        "name": "Smith Cooper",
        "manages": [
          {
            "designation": "Director",
            "name": "Andrew Walker"
          },
          {
            "designation": "Director",
            "name": "Robert Thompson"
          }
        ]
      },
      {
        "designation": "Vice President",
        "name": "Harris Jones",
        "manages": [
    ...