html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  // create data   

  var data = [

    {x: "Start", value:  23},

    {x: "Jan",   value:  22},

    {x: "Feb",   value: -46},

    {x: "Mar",   value: -91},

    {x: "Apr",   value:  37},

    {x: "May",   value: -21},

    {x: "Jun",   value:  53},

    {x: "Jul",   value:  31},

    {x: "Aug",   value: -15},

    {x: "Sep",   value:  42},

    {x: "Oct",   value:  53},

    {x: "Nov",   value: -15},

    {x: "Dec",   value:  51},

    {x: "End", isTotal: true}

  ];

​

  // create a waterfall chart

  var chart = anychart.waterfall();

​

  // create a series and set the data

  var series = chart.waterfall(data);

​

  // set the chart title

  chart.title("Waterfall Chart: Basic Sample");

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

​

  var btn = document.getElementById('btn');

  btn.addEventListener('click', function() {

    var newData = [

      {x: "Start", value:  13},

      {x: "Jan",   value:  28},

      {x: "Feb",   value: -26},

      {x: "Mar",   value: 18},

      {x: "Apr",   value:  17},

      {x: "May",   value: -21},

      {x: "Jun",   value:  13},

      {x: "Jul",   value:  31},

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

      {x: "Sep",   value:  -42},

      {x: "Oct",   value:  53},

      {x: "Nov",   value: -15},

      {x: "Dec",   value:  51},

      {x: "End", isTotal: true}

    ];

​

    chart.data(newData);

  });

});