html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

// data set

var data = [

    {x:"2000", value: 10048, qtrBreakdown: [["Q1", 761], ["Q2", 530], ["Q3", 890], ["Q4", 979]]},

    {x:"2001", value: 10938, qtrBreakdown: [["Q1", 886], ["Q2", 580], ["Q3", 990], ["Q4", 997]]},

    {x:"2002", value: 9989,  qtrBreakdown: [["Q1", 832], ["Q2", 740], ["Q3", 912], ["Q4", 850]]},

    {x:"2003", value: 10226, qtrBreakdown: [["Q1", 904], ["Q2", 912], ["Q3", 914], ["Q4", 899]]},

    {x:"2004", value: 11004, qtrBreakdown: [["Q1", 886], ["Q2", 980], ["Q3", 109], ["Q4", 812]]},

    {x:"2005", value: 10934, qtrBreakdown: [["Q1", 902], ["Q2", 867], ["Q3", 830], ["Q4", 993]]},

    {x:"2006", value: 11275, qtrBreakdown: [["Q1", 104], ["Q2", 839], ["Q3", 854], ["Q4", 993]]},

    {x:"2007", value: 11945, qtrBreakdown: [["Q1", 855], ["Q2", 103], ["Q3", 982], ["Q4", 100]]},

    {x:"2008", value: 12245, qtrBreakdown: [["Q1", 934], ["Q2", 982], ["Q3", 973], ["Q4", 999]]},

    {x:"2009", value: 12056, qtrBreakdown: [["Q1", 134], ["Q2", 873], ["Q3", 109], ["Q4", 903]]},

    {x:"2010", value: 11734, qtrBreakdown: [["Q1", 928], ["Q2", 103], ["Q3", 793], ["Q4", 887]]},

    {x:"2011", value: 12337, qtrBreakdown: [["Q1", 934], ["Q2", 982], ["Q3", 973], ["Q4", 124]]},

    {x:"2012", value: 12761, qtrBreakdown: [["Q1", 982], ["Q2", 965], ["Q3", 100], ["Q4", 183]]},

    {x:"2013", value: 13390, qtrBreakdown: [["Q1", 182], ["Q2", 110], ["Q3", 995], ["Q4", 999]]},

    {x:"2014", value: 13818, qtrBreakdown: [["Q1", 400], ["Q2", 507], ["Q3", 380], ["Q4", 620]]},

    {x:"2015", value: 13188, qtrBreakdown: [["Q1", 156], ["Q2", 120], ["Q3", 100], ["Q4", 890]]}

];

​

// create and configure chart

chart = anychart.column();

chart.legend(true);

chart.tooltip().title(false).separator(false);

chart.tooltip().format("{%x}: {%value}");

​

// create column series on the main chart

chart.column(data).name("ACME Corp. sales");

​

// chart titles and settings

chart.title('Sales volume: ACME Corp.');

​

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

  var x = e.point.get('x');

  var drillData = e.point.get('qtrBreakdown');

  chart.removeAllSeries();  

  if (drillData!==undefined) {

    chart.column(drillData).name(x);

  } else {

    chart.column(data).name("ACME Corp. sales");

  }

});

​

// draw charts

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

});