html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // set stage

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

​

  var tableData = anychart.data.set([

    ["January", "$10000", "$12000"],

    ["February", "$12000", "$15000"],

    ["March", "$18000", "$16000"],

    ["April", "$11000", "$15000"],

    ["May", "$9000", "$14000"]

  ]);

  var contents = [];

​

  // create table

  var table = anychart.standalones.table();

​

  var contents = [[menuShow(),"2003 Sales", "2004 Sales"]];

​

  // add data to the table

  for(var i= 1; i<5; i++){

    contents.push([

      tableData.row(i)[0],  // get names for second column

      tableData.row(i)[1],  // get values for third column

      tableData.row(i)[2]   // get values for fourth column

    ]);

  }

​

  table.contents(contents);

​

  // settings for the first column

  table.getRow(0)

    .height(40)           // set column height

    .cellFill("#F5F5F5")  // set column background color

    .fontWeight(900);     // set font weight for text in the column

​

  table.getCol(0).width(90);    // set column width

  table.cellBorder("#B8B8B8").hAlign("center").vAlign("middle");

​

  // set table container and initiate draw

  table.container(stage).draw();

​

  // show context menu

  function menuShow(){

    var chart = anychart.sparkline();

​

    //get context menu instance

    var contextMenu = chart.contextMenu();

​

    // create label

    var label = chart.label();

    label.padding(5, 10);

    label.position("right-top");

    label.anchor("right-top");

    label.width(90);

    label.hAlign("center");

    label.text("Contex menu");

    label.listen(

      "click",

      function () {

        contextMenu.show();

      });

    return chart;

  }

});