html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  // set stage

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

  // manage data

  var data2005 = anychart.data.set([

    ["John",  10000, 12000, 20000, 16000],

    ["Jake",  12000, 15000, 19000, 21000],

    ["Peter", 16000, 17000, 21000, 22000]

  ]);

  var data2006 = anychart.data.set([

    ["John",  13000, 10000, 18000, 21000],

    ["Jake",  11700, 12000, 21000, 20000],

    ["Peter", 18000, 11000, 12000, 22000]

  ]);

  // create variables and count results

  var results2005 = [];

  for(var series2005=1;series2005<data2005.data()[0].length;series2005++){

    var total = 0;

    var values = [];

    var bestResult = 0;

    for(var points2005=0;points2005<data2005.mapAs().getRowsCount();points2005++){

      total+= data2005.data()[points2005][series2005];

      values.push(data2005.data()[points2005][series2005]);

      if (Math.max.apply(Math, values) == data2005.data()[points2005][series2005])

bestResult = data2005.data()[points2005][0];

    }

    results2005.push({total: total, bestResult: bestResult});

  }

  var results2006 = [];

  for(var n=1;n<data2006.data()[0].length;n++){

    var total2006 = 0;

    var values2006 = [];

    var bestResult2006 = 0;

    for(var r=0;r<data2006.mapAs().getRowsCount();r++){

      total2006+= data2006.data()[r][n];

      values2006.push(data2006.data()[r][n]);

      if (Math.max.apply(Math, values2006) == data2006.data()[r][n])

bestResult2006 = data2006.data()[r][0];

    }

    results2006.push({total: total2006, max: bestResult2006});

  }

  // set charts

  var chart2005 = anychart.column();

  chart2005.title("2005 Sales");

  // set data

  chart2005.column(data2005.mapAs({x: [0], value: [1]}))

    // set name

    .name("Quarter 1")

    // set data for legend tooltip content

    .meta({legendText: "<b>Year:</b> 2005"+

      "<br><b>Quarter</b> first"+

      "<br><b>Total Sales:</b> "+results2005[0].total+

      "<br><b>Best Result:</b> "+results2005[0].bestResult

    });

  chart2005.column(data2005.mapAs({x: [0], value: [2]}))

    .name("Quarter 2")

    .meta({legendText: "<b>Year:</b> 2005"+

      "<br><b>Quarter</b> second"+

      "<br><b>Total Sales:</b> "+results2005[1].total+

      "<br><b>Best Result:</b> "+results2005[1].bestResult

    });

  chart2005.column(data2005.mapAs({x: [0], value: [3]}))

    .name("Quarter 3")

    .meta({legendText: "<b>Year:</b> 2005"+

      "<br><b>Quarter</b> third"+

      "<br><b>Total Sales:</b> "+results2005[2].total+

      "<br><b>Best Result:</b> "+results2005[2].bestResult

    });

  chart2005.column(data2005.mapAs({x: [0], value: [4]}))

    .name("Quarter 4")

    .meta({legendText: "<b>Year:</b> 2005"+

      "<br><b>Quarter</b> forth"+

      "<br><b>Total Sales:</b> "+results2005[3].total+

      "<br><b>Best Result:</b> "+results2005[3].bestResult

    });

  chart2005.padding().right(0).bottom(0);

  chart2005.xAxis().title("Manager");

  chart2005.yAxis().orientation("right").title().text("Sales").rotation(0);

  // create second chart

  var chart2006 = anychart.column();

  // set title

  chart2006.title("2006 Sales");

  // set data

  chart2006.column(data2006.mapAs({x: [0], value: [1]}))

    // set name

    .name("Quarter 1")

    // set legend tooltip content

    .meta({legendText: "<b>Year:</b> 2006"+

      "<br><b>Quarter</b> first<br>"+

      "<b>Total Sales:</b> "+results2006[0].total+

      "<br><b>Best Result:</b> "+results2006[0].max

    });

  chart2006.column(data2006.mapAs({x: [0], value: [2]}))

    .name("Quarter 2")

    .meta({legendText: "<b>Year:</b> 2006"+

      "<br><b>Quarter</b> second<br>"+

      "<b>Total Sales:</b> "+results2006[1].total+

      "<br><b>Best Result:</b> "+results2006[1].max

    });

  chart2006.column(data2006.mapAs({x: [0], value: [3]}))

    .name("Quarter 3")

    .meta({legendText: "<b>Year:</b> 2006"+

      "<br><b>Quarter</b> third<br>"+

      "<b>Total Sales:</b> "+results2006[2].total+

      "<br><b>Best Result:</b> "+results2006[2].max

    });

  chart2006.column(data2006.mapAs({x: [0], value: [4]}))

    .name("Quarter 4")

    .meta({legendText: "<b>Year:</b> 2006"+

      "<br><b>Quarter</b> forth<br>"+

      "<b>Total Sales:</b> "+results2006[3].total+

      "<br><b>Best Result:</b> "+results2006[3].max

    });

  chart2006.xAxis().title("Manager");

  chart2006.padding().left(0).bottom(0);

  // create custom legend

  var legend = anychart.standalones.legend();

  // enable legend

  legend.enabled(true);

  // set items source

  legend.itemsSource([chart2005, chart2006]);

  // legend title settings

  var legendTitle = legend.title();

  // enable title

  legendTitle.enabled(true);

  // title text

  legendTitle.text("2005 - 2006 Sales");

  // title alignment

  legendTitle.hAlign("center");

  // legend tooltip settings

  legend.tooltip()

    .useHtml(true)    // enable using of html tags

    .fontWeight(400); // set font weigh

  // set legend tooltip content

  legend.tooltip().format(function(){

      return this.meta.legendText;

    });

  // draw legend

  legend.container(stage).draw();

  // manage charts size and position

  chart2005.bounds(0,0,"55%","100%");

  chart2006.bounds("55%",0,"45%","100%");

  // prevent legend overlapping

  chart2005.margin().bottom(stage.height() - legend.getRemainingBounds().getHeight());

  chart2006.margin().bottom(stage.height() - legend.getRemainingBounds().getHeight());

  // redraw legend every time the first chart is redrawn

  chart2005.listen(

    "chartDraw",

    function (){

      // define legend bounds

      var legendBounds = anychart.math.rect(

0,

legend.getRemainingBounds().getHeight(),

chart2005.container().width(),

chart2005.container().height()

      );

      // set bounds and draw legend

      legend.parentBounds(legendBounds).draw();

    }

  );

  // draw charts

  chart2005.container(stage).draw();

  chart2006.container(stage).draw();

});