html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

​

  // set data and define chart type

  var chart = anychart.pie([

    {name: "John", value: 10000},

    {name: "Jake", value: 12000},

    {name: "Peter", value: 16000},

    {name: "Alex", value: 11000},

    {name: "Tom", value: 13000},

    {name: "Julia", value: 18000}

  ]);

​

  var menu = chart.contextMenu();

  menu.itemsProvider(function(){

    var data = chart.data();

    var slices = [];

    for (var i=0;i<data.getRowsCount();i++)

      slices.push({text: data.get(i, "name"), action: function(){

var slice = data.find("name", this.item.text);

chart.explodeSlice(slice, !chart.getPoint(slice).selected());

      }});

    return [

      {

enabled: allState(true),

text: "Explode All",

action: function(){

  chart.explodeSlices(true)

}

      },

      {

enabled: allState(false),

text: "Explode None",

action: function(){

  chart.explodeSlices(false);

}

      },

      {

text: "Slices",

subMenu: slices

      }

    ];

  });

​

  function allState (state){

    for (var i=0;i<chart.data().getRowsCount();i++)

      if (state != chart.getPoint(i).selected()) return true;

    return false;

  }

​

  chart.title("Custom Context Menu");

​

  // draw

  chart.container("container");

  chart.draw();

});