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

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

​

    // 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}");

​

    /* listen to the chartDraw event

    and add the drilldown path to the chart title */

    chart.listen("chartDraw", function() {

      // get the drilldown path and convert it to a string

      var text = printPath(chart.getDrilldownPath());

      // set the chart title

      chart.title().useHtml(true);

      chart.title("Tree Data Model: search()<br><br>Path: " +

                  "<span style = 'color:#990000; font-style:italic'>" +

                  text + "</span>");

    });

​

    // 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;

}

​

// convert the current drilldown path to a string

function printPath(path) {

  /* go through the array of data items

  and use the get() method to obtain the "name" field */

  var text = "";

  for (i = 0; i <  path.length; i++){ 

    text += path[i].get("name") + "\\";

  }

  return text;

}

// drill down to a data item

function drillToItem() {

  /* locate an item in the data tree

  and get it as an object */

  var item = treeData.search("name", "Item 3-4");

  // drill down to the item

  chart.drillTo(item);

}

​

// drill up a level

function drillUpALevel() {

  chart.drillUp();

}