html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

    stage = anychart.graphics.create("container");

​

    var data = [

{id: 'Eurasia', parent: null},

{id: 'Asia', parent: 'Eurasia'},

{id: 'Eastern Asia', parent: 'Asia'},

{id: 'Mongolia', parent: 'Eastern Asia', value: 1564116, capital: 'Ulan-Bator'},

{id: 'China', parent: 'Eastern Asia', value: 1564116, capital: 'Beijing'},

{id: 'Southern Korea', parent: 'Eastern Asia', value: 1564116, capital: 'Seoul'},

{id: 'Northern Korea', parent: 'Eastern Asia', value: 120540, capital: 'Pyongyang'},

{id: 'Japan', parent: 'Eastern Asia', value: 1564116, capital: 'Tokio'},

{id: 'Europe', parent: 'Eurasia'},

{id: 'Northern Europe', parent: 'Europe'},

{id: 'Finland', parent: 'Northern Europe', value: 338424, capital: 'Helsinki'},

{id: 'Great Britain', parent: 'Northern Europe', value: 209331, capital: 'London'},

{id: 'Ireland', parent: 'Northern Europe', value: 84421, capital: 'Dublin'},

{id: 'Scandinavia', parent: 'Northern Europe', value: 928057}];

​

    // create treemap chart

    var chart = anychart.treeMap();

​

    // create storage for tree data

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

    // set data to chart

    chart.data(treeData);

​

    // locate an item in a tree data and get it as an object

    // that can be used in drillTo method

    var item = treeData.search("id", "Finland");

    // create drill to label

    drillToLabel = createLabel("Drill To Finland.", 10, function() {

// Drill down to the specified item.

chart.drillTo(item);

    });

    // create drill up label

    drillUpLabel = createLabel("Drill Up a Level", 130, function() {

chart.drillUp();

    });

​

    // listen for draw event and update path in a title

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

chart.title(printPath(chart.getDrilldownPath()))

    });

​

    // put title with path to the bottom of the chart

    chart.title().orientation("bottom");

    chart.title().padding(10);

    // format labels

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

    // set chart bounds and display it

    chart.bounds(0, "30", "100%", "90%");

    chart.container(stage);

    chart.draw();

});

​

// function to turn current drill down path structure to string

function printPath(path){

    // simply go through the array of Tree Data Items (https://api.anychart.com/7.14.3/anychart.data.Tree.DataItem)

    // and use get() method to obtain id field which stores region names in this case

    var text = "";

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

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

    }

    return text;

}

​

// helper function to create buttons

function createLabel(text, offset, action){

    var label = anychart.standalones.label();

    label.background({fill: "#9E9E9E"});

    label.text(text);

    label.fontColor("#fff");

    label.padding(5);

    label.parentBounds(offset, 5, 130, 100);    

    label.listen("click", action);

    label.container(stage);

    label.draw();

    return label;

}