html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

    // create stage to put sort buttons along the chart

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

​

    // create treemap

    var chart = anychart.treeMap();

    // setting the maximum levels depth

    chart.maxDepth(4);

    // set title

    chart.title("Sorting sample: click buttons to sort");

​

    // create ascending sort label

    sortAsc = createLabel("Ascending", 10, function() {

// ascending sorting

chart.sort(anychart.enums.Sort.ASC);

chart.title("Ascending");

    });    

​

    // create descending sort label

    sortDesc = createLabel("Descending", 90, function() {

// descending sorting

chart.sort(anychart.enums.Sort.DESC);

chart.title("Descending");

    });    

​

    // create no sort sort label

    sortAsc = createLabel("No sorting", 180, function() {

// remove sorting

chart.sort(anychart.enums.Sort.NONE);

chart.title("No sorting");

    });    

    // data

    var data = [

    {name: 'Eurasia',

children:[

    {name: "Asia", children:[

        {name: "Eastern Asia", children:[

            {name:"Mongolia", value: 1564116, capital: 'Ulan-Bator'},

            {name: "China", value: 1564116, capital: 'Beijing'},

            {name: "Southern Korea", value: 1564116, capital: 'Seoul'},

            {name: "Northern Korea", value: 120540, capital: 'Pyongyang'},

            {name: "Japan", value: 1564116, capital: 'Tokio', children:[

                {name: "Hokkaido", value: 83400},

                {name: "Kyushu", value: 35640},

                {name: "Honshu", value: 230500},

                {name: "Shikoku", value: 1200}

            ]}

        ]},

        {name: "Western Asia", children:[

            {name: "Jordan", value: 92300, capital: 'Amman'},

            {name: "Georgia", value: 69700, capital: 'Tbilisi'},

            {name: "Israel", value: 20770, capital: 'Jerusalem'},

            {name: "Armenia", value: 29743, capital: 'Yerevan'},

            {name: "Azerbaijan", value: 86600, capital: 'Baku'},

            {name: "Bahrain", value: 750, capital: 'Manama'},

        ]},

        {name: "Southern Asia", children:[

            {name:"India", value: 3287263, capital: "New Delhi"},

            {name: 'Iran', parent: 'Southern Asia', value: 16480},

            {name: 'Shri-Lanka', value: 65610, capital: 'Colombo'},

            {name: 'Nepal', value: 140800, capital: 'Kathmandu'}

        ]},

        {name: "South-Eastern Asia", children:[

            {name: "Singapoor", value: 718.3, capital: 'Singapoor'},

            {name: "Indonesia", value: 1919440, capital: "Jakarta", children:[

                {name: "Java", value: 128297},

                {name: "Kalimantan (Borneo)", value: 174600},

                {name: "Sulawesi", value: 174600},

                {name: "Sumatra", value: 473481}

            ]},

            {name: "Thailand", value: 513.120, capital: 'Bangkok'},

            {name: "Philippines", value: 300000, capital: 'Manila', children:[

                {name: "Luzon", value: 104688},

                {name: "Eastern Visayas", value: 15875},

                {name: "Central Visayas", value: 21562},

                {name: "Mindanayo", value: 21562}

            ]},

            {name: "Laos", value: 236800, capital: 'Vientiane'},

            {name: "Cambodia", value: 181040, capital: 'Phnom Penh'}

        ]},

        {name: "Central Asia", children:[

            {name: "Kazakhstan", value: 2724902, capital: 'Astana'},

            {name: "Kyrgyzstan", value: 199951, capital: 'Bishkek'},

            {name: "Tajikistan", value: 142000, capital: 'Dushanbe'},

            {name: "Turkmenistan", value: 491200, capital: 'Ashgabat'},

            {name: "Uzbekistan", value: 447400, capital: 'Tashkent'}

        ]}

    ]},

    {name: "Europe", children: [

        {name: "Eastern Europe", children:[

            {name: "Poland", value: 312679, capital: 'Warsaw'},

            {name: "Ukraine", value: 603628, capital: 'Kiev'}

        ]},

        {name: "Western Europe", children:[

            {name: "Austria", value: 83879, capital: 'Vienna'},

            {name: "Germany", value: 357168, capital: 'Berlin'},

            {name: "France", value: 643801, capital: 'Paris'}

        ]},

        {name: "Southern Europe", children:[

            {name: "Malta", value: 316, capital: 'Valletta'},

            {name: "Greece", value: 131957, capital: 'Athens'},

            {name: "Italy", value: 301338, capital: 'Rome'}

        ]},

        {name: "Northern Europe", children:[

            {name: "Finland", value: 338424, capital: 'Helsinki'},

            {name: "Great Britain", value: 209331, capital: 'London'},

            {name: "Ireland", value: 84421, capital: 'Dublin'},

            {name: "Scandinavia", value: 928057, children:[

                {name: "Sweden", value: 450295, capital: 'Stockholm'},

                {name: "Norway", value: 385178, capital: 'Oslo'},

                {name: "Denmark", value: 42923.53, capital: 'Copenhagen'}

            ]},                        

        ]}

    ]}

 ]}

    ];

​

    // set data and type settings to a chart 

    chart.data(data, anychart.enums.TreeFillingMethod.AS_TREE);

    // remove headers

    chart.headers().enabled(null);

    // format labels

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

​

    // set chart bounds and display it

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

    chart.container(stage);

    chart.draw();

});

​

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

    label.listen("mouseOver", function(){

label.background().fill("#9E9E9E 0.5")

document.body.style.cursor = "pointer";

label.draw();

    });

    label.listen("mouseOut", function(){

label.background().fill("#9E9E9E")

document.body.style.cursor = "auto";

label.draw();

    });    

    return label;

}