AJAX data vs d3.csv data availability

Question

I have two fiddles which are the same with the exception of the way in which the data is made available to the document.

• Fiddle 1 works how I would like, I call the data using the d3.csv method and make the data available to my handsontable
• Fiddle 2 uses ajax and I assign the data to a global array in which I would have thought would be available to other functions to work however the data does not show up in my handsontable.

I am assuming that something about the way I am referencing the data is incorrect but I really do not have any idea why my handsontable is able to realize 9 rows of data thus a non zero array is being passed yet no data is displayed? I am new to javascript.

Update 1: Fiddle 2 UPDATED I have data pulling through by changing asynch to false anyone care to explain why this resolves the issue?

Javascript for Fiddle 2

var csvLink = 'https://storage.googleapis.com/directionalsurvey/testDScsv.csv';
var csvdata = [];
//var trueTVD = X6J374YZ;
var trueTVD = 700;

$( document ).ready(function() {
$.ajax({
   url:csvLink,
   dataType:"text",
   success:function(data)
   {
    var split_data = data.split(/\r?\n|\r/);
    //console.log(split_data);

    for(var i = 0; i < split_data.length-1; i++){
        var cell_data = split_data[i].split(",");
        var inner = [];
        inner.push(cell_data[0]);
        inner.push(cell_data[1]);
        inner.push(cell_data[2]);
        csvdata.push(inner);
    }
   }
  });
    console.log( "ready!" );
    console.log(csvdata);
});

  var container1 = document.getElementById('Table'),
    hot1;

  var hot1 = new Handsontable(container1, {
    data: csvdata,
    colHeaders: ['Measured Depth', "Inclination", "Azimuth"],
    rowHeaders: true,
    minSpareRows: 0,
    contextMenu: ['row_above', 'row_below', 'remove_row']
  });

Javascript for Fiddle 1

var csvLink = 'https://storage.googleapis.com/directionalsurvey/testDScsv.csv';
var data = [];
//var trueTVD = X6J374YZ;
var trueTVD = 700;
d3.csv(csvLink, function(dat) {
  for (i = 0; i < dat.length; i++) {
    var inner = [];
    inner.push(dat[i]['Measured Depth']);
    inner.push(dat[i]['Inclination']);
    inner.push(dat[i]['Azimuth']);
    data.push(inner);
  }

  var container1 = document.getElementById('Table'),
    hot1;

  var hot1 = new Handsontable(container1, {
    data: data,
    colHeaders: ['Measured Depth', "Inclination", "Azimuth"],
    rowHeaders: true,
    minSpareRows: 0,
    contextMenu: ['row_above', 'row_below', 'remove_row']
  });

Answer 1

The problem lies in that this is called asynchronously, and the data is not loaded completely before being passed to the other functions. By setting async: false the ajax call to get the csv file loads completely before moving on to execute the rest of the javascript.

$( document ).ready(function() {
$.ajax({
   url:csvLink,
   dataType:"text",
   async: false,
   success:function(data)
   {

This solved my issue.