Iterate over the data for multiple series in Highmaps - highcharts

Question

I am using a constructor to plot the Highmaps.
$(function() {
var options1 = {
chart: {
renderTo: 'container',
},
series: [{
name: 'Countries',
mapData: Highcharts.maps['custom/world'],
color: '#E0E0E0',
enableMouseTracking: false,
}, ]
};
var drawMap = function(data) {
var newSeriesData = {
type: 'mapbubble',
mapData: Highcharts.maps['custom/world'],
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
}
options1.series.push(newSeriesData);
var chart = new Highcharts.Map(options1);
};
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function(data) {
var i = 0;
/*while (i < data.length){
drawMap([data[i]]);
i++;
}*/
drawMap(data);
});
});
jsfiddle.
Using a function I am able to plot the whole data in a one go.
I want to iterate through the data and plot it one by one so that the page won't refresh and the new data will not replace the existing ones.
I have tried doing it like:
while (i < data.length){
drawMap([data[i]]);
i++;
}
But only the last point is plotted in the map. Rest of the points are not plotted. (I guess the map is plotted with all the points without persistence. So only the last point is there.)
Note: I followed this and tried for Highmaps.