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([

   {x: "P1", value: 10},

   {x: "P2", value: 2},

   {x: "P3", value: 15},

   {x: "P4", value: 10}

 ]);

​

 // set chart type

 var chart = anychart.column();

 chart.title().text("Click on Button to Add a Point");

 // set data

 chart.column(data);

 // set container and draw chart

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

});

​

// add point function

function addPoint() {

 var view = data.mapAs();

 // set default color for each point

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

   view.set(i,"fill", undefined);

 // get random position in range of chart length

 var randomIndex = Math.floor((Math.random() * (view.getRowsCount())) + 1);

 // insert data

 data.insert(

   {

      x: "P" + ((randomIndex)+1),                   // set name

      value : Math.floor((Math.random() * 100)+ 1), // set random value in range 1 - 100

      fill: "red"                                   // set red color to define inserted column from others

   },

   randomIndex                                     // position for inserting column

  );

  // get all columns after inserted one and change x value

  for(var indexCounter = randomIndex; indexCounter < view.getRowsCount(); indexCounter++){

    view.set(

               (indexCounter),         // column index

               "x",                    // parameter to adjust

               "P" + (indexCounter+1)  // set as new parameter

    );

  }

}