Appending content dynamically

Question

I use javascript to display a series of charts (graphs) one under the other. The Javascript script requests data from a PHP script then draws the charts and displays it. It doesn't take much time to fetch data for one chart and diplay it but with many charts the time accumulates which is boring. I would like to display the first chart when it is ready and then the second chart etc. so user sees how those get dynamically appended on the page making the page longer and longer.

Basically here is what I have:

<script>
var i=0;
$.getJSON('stats.php', function (data) {
    for (chartData in data) {
        i++;
        var chart = new AmStockChart();
        dataSet.dataProvider = chartData;
        // etc. etc.

        $('#stats').append('div id="chartdiv' + i + '"></div>');
        chart.write("chartdiv" + i);
    }
});
</script>

<div id="stats"></div>

That produces about 10 graphs one under the other but the problem is that shows empty screen for about 3-5 seconds and then displays all the graphs at once. If I limit it to diplay only one graph it shows up much faster. It would be nice to show those graphs gradually one by one when each graph is ready.

UPD: Here is the jsfiddle I put test data and cycled through one graph 20 times.

Answer 1

Some thing along the lines of this should help.....

var i = 0;
$.getJSON('stats.php', function (data) {
    for (chartData in data) {
        i++;
        setTimeout(function(index,d1){
            return function() {
                  var chart = new AmStockChart();
                  dataSet.dataProvider = data[d1];
                  // etc. etc.

                  $('#stats').append('div id="chartdiv' + index + '"></div>');
                  chart.write("chartdiv" + index);
            }
        }(i,chartData), 3000*i);
    }
});

Here is the demo