html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

​

var data = [

  {x: "A", value: 637166 , "drillDown" :[

    {"x": "Q1", "value": 792026},

    {"x": "Q2", "value": 610501},

    {"x": "Q3", "value": 441843},

    {"x": "Q4", "value": 350711}

  ]},

  {x: "B", value: 721630},

  {x: "C", value: 148662},

  {x: "D", value: 78662},

  {x: "E", value: 90000}

];

​

var chart;

createPie();

​

function createPie() {

  if (chart)

    chart.dispose();

​

  chart = anychart.pie(data);

  // tune interactivity selection mode

  chart.interactivity().selectionMode('none');

​

  // configire drilldown on point click

  chart.listen('pointClick', function (e) {

    if (e.point.get('drillDown')) {

      var data = e.point.get('drillDown');

      if (data) {

        createBar(data);

      }

    }

  });

  chart.container("container").draw();  

}

​

function createBar(data) {

  chart.dispose();

  chart = anychart.bar(data);

  chart.container("container").draw();

  chart.label(0, {position: 'rightTop', anchor: 'rightTop', padding: 5, offsetX: 5, offsetY: 5, text: "Back", background: {stroke: "1 black", enabled: true}});

  // load initial data on label click

  chart.label(0).listen('click', function () {

    chart.label(0).enabled(false);

    createPie();

  });  

}