html, body {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

#container {

    position: absolute;

    width: 100%;

    top: 35px;

    bottom: 0;

}

anychart.onDocumentReady(function () {

​

    // data

    data = anychart.data.set([

        ["Department Stores", 637166, 737166, 813000, 719242, 791736, 837164, 918364, 819363, 864213],

        ["Discount Stores", 721630, 537166, 128013, 471946, 385638, 764426, 237561, 628452 ,721645],

        ["Men's/Women's Specialty Stores", 148662, 188662, 194912, 573173, 384617, 481627, 615373, 274618 ,471846],

        ["Juvenile Specialty Stores", 78662, 178662, 612037, 589275, 128614, 201385, 171284, 317394 ,172846],

        ["All other outlets", 90000, 89000, 375913, 183613, 100847, 92714, 192483, 137184 ,99128]

    ]);

​

    // remapping data

    var Sales2003 = data.mapAs({x: 0, value: 1});

    var Sales2004 = data.mapAs({x: 0, value: 2});

    var Sales2005 = data.mapAs({x: 0, value: 3});

​

    // create a chart

    chart = anychart.cartesian();

​

    // set default series type

    chart.defaultSeriesType("column");

​

    // create multiple series

    chart.addSeries(Sales2003, Sales2004, Sales2005);

​

    // set title

    chart.title("Add/Remove Series sample");

​

    // set axes titles

    var xAxis = chart.xAxis();

    xAxis.title("Retail Channel");

    var yAxis = chart.yAxis();

    yAxis.title("Sales");

​

    // draw chart

    chart.container("container");

    chart.draw();

});

​

function add(){

  if (chart.getSeriesCount()<9)

      chart.addSeries(data.mapAs({x: 0, value: [chart.getSeriesCount()+1]}));

};

​

function remove(){

  if (chart.getSeriesCount()>0)

      chart.removeSeriesAt(chart.getSeriesCount()-1);

};

​

function removeAll(){

  chart.removeAllSeries();

};