html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

#breadcrumbs {

    text-align: center;

    top: 10px;

    z-index: 99;

    position: relative;

}

#container {

    position: absolute;

    top: 0;

}

anychart.onDocumentReady(function () {

    var data = getData();

​

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

​

    var chart = anychart.sunburst();

    chart.data(treeData);

​

    // Listen for draw event and update path in 'bread crumbs'.

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

        printPath(chart.getDrilldownPath());

    });

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

    chart.title().padding(10);

​

    chart.container('container');

    chart.draw();

});

    function getData() {

        return [

            {name: 'Seasonal activities', id: 'activities', parent: null, value: 1000},

            {name: 'Winter', parent: 'activities', id: 'winter', value: 250},

            {name: 'Spring', parent: 'activities', id: 'spring', value: 250},

            {name: 'Summer', parent: 'activities', id: 'summer', value: 250},

            {name: 'Autumn', parent: 'activities', id: 'autumn', value: 250},

            {name: 'Running', parent: 'winter', id: 'run', value: 43},

            {name: 'Snowboarding', parent: 'winter', id: 'snowboard', value: 50},

            {name: 'Nordic Skiing', parent: 'winter', id: 'nordic', value: 50},

            {name: 'Working Out', parent: 'winter', id: 'workout', value: 30},

            {name: 'Ice Skating', parent: 'winter', id: 'iceskate', value: 40},

            {name: 'Kitesurfing', parent: 'winter', id: 'kitesurf', value: 37},

            {name: 'Riding', parent: 'spring', id: 'ride', value: 100},

            {name: 'Crossfit', parent: 'spring', id: 'crossfit', value: 30},

            {name: 'Hiking', parent: 'spring', id: 'hike', value: 30},

            {name: 'Yoga', parent: 'spring', id: 'yoga', value: 40},

            {name: 'Running', parent: 'spring', id: 'run', value: 50},

            {name: 'Riding', parent: 'summer', id: 'ride', value: 150},

            {name: 'Windsurfing', parent: 'summer', id: 'windsurf', value: 20},

            {name: 'Swimming', parent: 'summer', id: 'swim', value: 30},

            {name: 'Roller Skiing', parent: 'summer', id: 'roller', value: 10},

            {name: 'Rowing', parent: 'summer', id: 'rowing', value: 40},

            {name: 'Riding', parent: 'autumn', id: 'ride', value: 90},

            {name: 'Hiking', parent: 'autumn', id: 'windsurf', value: 20},

            {name: 'Swimming', parent: 'autumn', id: 'swim', value: 10},

            {name: 'Nordic Skiing', parent: 'autumn', id: 'nordic', value: 40},

            {name: 'Climbing', parent: 'autumn', id: 'climbing', value: 40}

        ];

    }

​

function printPath(path) {

    var crumbs = document.getElementById("breadcrumbs");

​

    var link;

​

    var text = "";

​

    crumbs.innerHTML = "";

​

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

        link = document.createElement("a");

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

        link.innerHTML = text;

        crumbs.appendChild(link);

        crumbs.appendChild(document.createTextNode(" \\ "));

​

        if (i + 1 == path.length) continue;

        link.setAttribute("href", "#");

        link.addEventListener("click", function () {

            chart.drillTo(this.innerHTML);

        });

    }

    return text;

}