html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

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

​

    var charts = [];

​

    createLabel("Render 80 Charts Async", 20, function () {

disposeCharts(charts);

​

// Set rendering mode to async.

createCharts(charts, true);

    });

​

    createLabel("Render 80 in sync", 200, function () {

disposeCharts(charts);

​

// Set rendering mode to sync.

createCharts(charts, false);

    });

​

    var customTitle = anychart.standalones.title();

    customTitle.text("Asynchronous/synchronous Rendering");

    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++) {

        pieChart = anychart.pie([Math.random(), Math.random(), Math.random()]);

        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 createLabel(text, offset, action) {

var customLabel = anychart.standalones.label();

customLabel.text(text);

customLabel.parentBounds(offset, 30, 100, 100);

customLabel.listen("click", action);

customLabel.listen("mouseOver", function () {

    document.body.style.cursor = "pointer";

});

customLabel.listen("mouseOut", function () {

    document.body.style.cursor = "auto";

});

customLabel.background({fill: "#9E9E9E"});

customLabel.fontColor("#fff");

customLabel.padding(5);

customLabel.container(stage);

customLabel.draw();

    }

});