html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function() {

  // data

  var dataSet = 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(dataSet);

  // create new button

  var triggerButton = document.createElement("div");

  // set button style

  triggerButton.style.top = "5px";

  triggerButton.style.right = "5px";

  triggerButton.style.width = "auto";

  triggerButton.style.height = "auto";

  triggerButton.style.backgroundColor = "#444444";

  triggerButton.style.color = "white";

  triggerButton.style.position = "absolute";

  triggerButton.style.zIndex = 2;

  triggerButton.style.transition = "0.5s";

  triggerButton.style.textAlign = "center";

  triggerButton.style.border = "3px solid #444444";

  triggerButton.style.borderRadius = "7px 7px 7px 7px";

  triggerButton.style.fontSize = "18px";

  triggerButton.style.cursor = "pointer";

  triggerButton.style.MozUserSelect= "none";

  triggerButton.style.KhtmlUserSelect= "none";

  triggerButton.style.WebkitUserSelect= "none";

  triggerButton.style.userSelect= "none";

  triggerButton.innerHTML = "Add Point";

  triggerButton.onclick = function() {

    addPoint();

  };

  // append button to container

  container.appendChild(triggerButton);

  // function, if listener triggers

  function addPoint(e) {

    var view = dataSet.mapAs();

    // set default color for each point

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

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

    // get random position in range of chart length

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

    // insert data

    dataSet.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

      );

    }

  }

  // set container and draw chart

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

});