html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

button {

    margin: 10px 0 0 10px;

}

var charts = [];

var stage;

anychart.onDocumentReady(function () {

    stage = anychart.graphics.create('container');

​

    createCharts(charts, true);

​

    var customTitle = anychart.standalones.title();

    customTitle.text('Set asynchronous/synchronous rendering for the charts');

    customTitle.parentBounds(0, '50%', 100, 100);

    customTitle.container(stage);

    customTitle.draw();

});

​

function createCharts(charts, sync) {

    for (var i = 0; i < 15; i++) {

        for (var j = 2; j < 15; j++) {

            var pieChart = anychart.pie([20, 30, 50]);

            pieChart.bounds(i * 10 + '%', j * 10 + '%', '10%', '10%');

            pieChart.labels(false);

            pieChart.legend(false);

            pieChart.padding(0);

            pieChart.margin(0);

            pieChart.container(stage);

​

            // Set render mode: true - async, false (default) - sync.

            pieChart.draw(sync);

            charts.push(pieChart);

        }

    }

}

​

function disposeCharts(charts) {

    for (var i = 0; i < charts.length; i++) {

        charts[i].dispose();

    }

}

​

function async() {

    disposeCharts(charts);

​

    // Set rendering mode to async.

    createCharts(charts, true);

}

​

function sync() {

    disposeCharts(charts);

    setTimeout(function () {

        // Set rendering mode to sync.

        createCharts(charts, false);

    }, 100);

}