May ajax\getJSON be attached

[baileigh]

I have

http://jsfiddle.net/27rafmcq/3/

    $(function() {
      var seriesOptions = [],
       // seriesCounter = 0,
        names = [{
          'div': 'con',
          'ids': [{
            'name': 'MSFT'
          }]
        }, {
          'div': 'con2',
          'ids': [{
            'name': 'AAPL'
          }, {
            'name': 'MSFT'
          }]
        }, {
          'div': 'con3',
          'ids': [{
            'name': 'GOOG'
          }]
        }];
  /**
   * Create the chart when all data is loaded
   * @returns {undefined}
   */
  function createChart(div) {

    $('#' + div).highcharts('StockChart', {

      rangeSelector: {
        selected: 4
      },

      yAxis: {
        labels: {
          formatter: function() {
            return (this.value > 0 ? ' + ' : '') + this.value + '%';
          }
        },
        plotLines: [{
          value: 0,
          width: 2,
          color: 'silver'
        }]
      },

      plotOptions: {
        series: {
          compare: 'percent'
        }
      },

      tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
        valueDecimals: 2
      },

      series: seriesOptions
    });
  }

  $.each(names, function(i, name) {
   var seriesCounter = 0;
    for (var x = 0, cnt = Object.keys(name['ids']).length; x < cnt; x++) {
       console.log(x);
      var name_ = name['ids'][x]['name'];
      $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name['ids'][x]['name'].toLowerCase() + '-c.json&callback=?', function(data) {

        seriesOptions[i] = {
          name: name_,
          data: data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter += 1;

        if (seriesCounter === cnt) {
          createChart(name['div']);
        }
      });
    }
    seriesCounter = 0;
  });
});

So there is no guarantee that the data will come when necessary. How can I guarantee that in one cycle I will get a full set of data, then depict it and draw the next schedule?

[Alberto]

We need to use technology. https://learn.javascript.ru/promise or not to support the browsers, http://api.jquery.com/jQuery.Deferred/ ♪

There is a need to create a deferred one-time set-up. When all requests are met, the processor will be called in and will need to createChart.