html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

var chart;

var item;

anychart.onDocumentReady(function () {

    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}];

​

    chart = anychart.treeMap();

​

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

    chart.data(treeData);

​

    item = treeData.search('id', 'Asia');

​

    chart.title('Drill down to specified item and drill up');

    chart.bounds(0, 0, '100%', '90%');

    chart.container('container');

    chart.draw();

});

​

function drillTo() {

​

    // Drill down to specified item.

    chart.drillTo(item);

}

​

function drillUp() {

​

    // Drill up.

    chart.drillUp();

}