title: jquery ajax success function returns undefined variable
body: <p>I am trying something simple which is to set a variable to the results of an jquery ajax call which I have set to NON synchronous.</p>
  
  <p>All attempts so far return undefined and I don't know why.</p>
  
  <p>I understand I cannot use a synchronous call as the code would have moved on before the results are returned.</p>
  
  <p>Here's my basic code:</p>
  
  <pre><code>$(document).ready(function() {
      var test = visitorData();
      console.info(test);
  });
  </code></pre>
  
  <p>and the ajax call:</p>
  
  <pre><code>function visitorData() {
  
  var chartValues = [];
  var chartLabels = [];
  
  //console.info("chartValues:"+chartValues);
  //return "TEST";
  $.blockUI({message: '&lt;h1&gt;&lt;img src="/img/icons/icon_loading_red.gif" /&gt; Please wait - grabbing data...&lt;/h1&gt;'});
  
  $.ajax({
          url: '/visitdata',
          type: 'GET',
          async: false,
          dataType: "json",
          success: function (data) {
              visitors = data;
              console.warn(data);
              for (var k in visitors){
                  if (typeof visitors[k] !== 'function') {
                      chartValues.push(visitors[k].average_order);
                  }
              }
  
              console.info(chartValues);
              return chartValues;
          }
      });
  }
  </code></pre>
  
  <p>The values are being obtained in the success function and chartValues exists before the return. But no data is given to the original call.</p>
  
  <p>Not sure why and what I need to do?</p>