html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a chart and set the data

    var chart = anychart.treeMap(getData(), "as-tree");

​

    // set the depth of hints

    chart.hintDepth(2);

​

    // configure labels

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

​

    // play with the drilldown feature

    chart.listen("drillChange", function(e){

        // Treemap listen() Callback method. Function that looks like:

        // function(event){

        //   event.actualTarget - actual event target

        //   event.currentTarget - current event target

        //   event.iterator - event iterator

        //   event.originalEvent - original event

        //   event.point - event point

        //   event.pointIndex - event point index

        // }

      console.log(e.current.get('name'));

      // 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("Treemap: Interactivity (Drillchange)" +

                  "<br><br>currentTarget: " + e.currentTarget + 

                  "<br><br>current.get('name'): " + e.current.get('name') + 

                  "<br><br>Path: " + text

                 );

    });

​

    // set the chart title

    chart.title("Treemap: Interactivity (Drillchange)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});

​

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

};

​

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

};