Question

I have an object charts,

 var charts = {
        chart1 : function (){
            return {
                key1 : value1,
                key2: value2,
                key3, value3
            }
        },
        chart2 : function(){
            return {
                key1 : value1,
                key2: value2,
                key3, value3
            }
        },
        chart3 : function(){
            return {
                key1 : value1,
                key2: value2,
                key3, value3
            }
        } 
    }

A function callback

function callback(instance){
    .....
    .....
}

I can draw chart chart1 like this,

var chart = new Highcharts.Chart(charts.chart1(),callback);
// callback is a function which gets called when drawing of chart is completed.

And all charts like this,

 for(chart in charts){
        if(charts.hasOwnProperty(chart)){
            new Highcharts.Chart(charts.chart(),callback);
        }
    }

But, drawing a lot of charts simultaneously hangs firefox.
So, I want to call charts one by one on callback of previous chart.
(When drawing of one is completed, draw the second one and so on…)

I can achieve this by creating an array having names of each chart. On callback function, I will increment the index and call the next chart.

Here’s the question,

How can I draw all charts without manually creating a list of chart names ?

Answer 1

You can create an iterable array of all the keys in your object and then cycle through them one by one as each chart is done being constructed:

function makeAllCharts() {
    // make list of charts
    var chartList = [], pos = 0;
    for (chart in charts) {
        chartList.push(chart);
    }

    function nextChart() {
        if (pos < chartList.length) {
            var key = chartList[pos++];
            new Highcharts.Chart(charts[key](), function() {
                callback();
                nextChart();
            });
        }
    } 
    nextChart();
}

Because you can’t iterate a list of keys directly from the object one at a time without a for (x in y) loop, you do need to create the intermediate array that can be iterated by incrementing the index.