html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create a stage    

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

​

    // 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:  undefined},

      {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"}

    ];

​

    // create and configure the first waterfall chart

    var chart1 = anychart.waterfall(data);

  chart1.getSeriesAt(0).connectMissingPoints(false);

    chart1.title("Data Mode: Difference");

    chart1.bounds(0, 0, "100%", "50%");

    chart1.legend(false);

    // set the data mode

    chart1.dataMode("diff");

    // set the chart container

    chart1.container(stage);

    // initiate drawing the chart

    chart1.draw();

​

    // create and configure the second waterfall chart

    var chart2 = anychart.waterfall(data);

    chart2.title("Data Mode: Absolute");

    chart2.bounds(0, "50%", "100%", "50%");

    chart2.legend(false);

    // set the data mode

    chart2.dataMode("absolute");

    // set the chart container

    chart2.container(stage);

    // initiate drawing the chart

    chart2.draw();

});