html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // get data

    var data = getData(); 

​

    // create a data tree

    var treeData = anychart.data.tree(data, "as-tree");

​

    // get the traverser of a tree

    traverser = treeData.getTraverser();

​

    // skip the root node

    traverser.advance();

​

    // create a chart and set the data

    chart = anychart.treeMap(treeData);

​

    // set the depth of hints

    chart.hintDepth(2);

​

    // configure labels

    chart.labels().format("{%name}");

    // set the chart title

    chart.title("Tree Data Model: Traversing");

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

// get data

function getData() {

  // create data

  var data = [

    {name:       "Root", children: [

      {name:     "Item 1", children: [

        {name:   "Item 1-1", children: [

          {name: "Item 1-1-1", value: 1000},

          {name: "Item 1-1-2", value:  600},

          {name: "Item 1-1-3", value:  550},

          {name: "Item 1-1-4", value:  300},

          {name: "Item 1-1-5", value:  150}

        ]},

        {name:   "Item 1-2",   value: 2300},

        {name:   "Item 1-3",   value: 1500}

      ]},

      {name:     "Item 2", children: [

        {name:   "Item 2-1", children: [

          {name: "Item 2-1-1", value: 2100},

          {name: "Item 2-1-2", value: 1000},

          {name: "Item 2-1-3", value:  800},

          {name: "Item 2-1-4", value:  750}

        ]},

        {name:   "Item 2-2", children: [

          {name: "Item 2-2-1", value:  560},

          {name: "Item 2-2-2", value:  300},

          {name: "Item 2-2-3", value:  150},

          {name: "Item 2-2-4", value:   90}

        ]},

        {name:   "Item 2-3",   value:  400}

      ]},

      {name:     "Item 3", children: [

        {name:   "Item 3-1", children: [

          {name: "Item 3-1-1", value:  850},

          {name: "Item 3-1-2", value:  400},

          {name: "Item 3-1-3", value:  150}

        ]},

        {name:   "Item 3-2",   value: 1350},

        {name:   "Item 3-3",   value: 1300},

        {name:   "Item 3-4", children: [

          {name: "Item 3-4-1", value:  400},

          {name: "Item 3-4-2", value:  300},

          {name: "Item 3-4-3", value:  250},

          {name: "Item 3-4-4", value:  150}

        ]}

      ]}  

    ]} 

  ];

  return data;

}

​

// get the next data item and drill to it

function nextItem() {

  // try to go to the next item

  if (traverser.advance()) {

    /* get the current item

    as an instance of the dataItem class */

    var dataItem = traverser.current();

    // drill down to the item

    chart.drillTo(dataItem);

  }

  else {

    //reset the traverser

    traverser.reset();

  }

}