title: How do I initialize HighChart series values with AJAX?
body: <p>I'm trying to dynamically initialize my HighChart series values before first data point is requested using ajax. I can't seem to figure out what is going wrong or if what I'm trying is even possible. Can someone please take a look and help? </p>
  
  <pre><code>$(document).ready(function() {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              defaultSeriesType: 'spline',
              marginRight: 10,
              events: {
                  load: requestData
              }
          },
          title: {
              text: 'Test'
          },
          xAxis: {
              type: 'datetime',
              tickPixelInterval: 100,
          },
          yAxis: {
              title: {
                  text: 'Test'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          tooltip: {
              formatter: function () {
                  return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' +
                      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '&lt;br/&gt;' +
                      Highcharts.numberFormat(this.y, 2);
              }
          },
          series: [{
              //AJAX NOT WORKING HERE
              name: 'Random data',
              data: (function() {
                  var data = [];
                  $.ajax({
                      type: "GET",
                      url: "/test/random2.php",
                      data: "p=2",
                      dataType: "json",
                      async: false,
                      success: function(result){
                          var values = JSON.parse(JSON.stringify(result));
                          var time = (new Date()).getTime();
                          for (i = -19; i &lt;= 0; i += 1) {
                              data.push({
                                  x: time + i * 60000,
                                  y: values[i+19];
                              });
                          }
                      }
                  });
                  return data;})
          }]
      });        
  });
  </code></pre>
  
  <p><strong>UPDATED CODE</strong>
  Here is my working solution</p>
  
  <pre><code>    function doHighChart(data) {
      chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              type: 'spline',
              marginRight: 10,
              events: {
                  load: requestData
              }
          },
          title: {
              text: 'Test'
          },
          xAxis: {
              type: 'datetime',
              tickPixelInterval: 100,
          },
          yAxis: {
              title: {
                  text: 'Test'
              },
              plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
              }]
          },
          tooltip: {
              formatter: function () {
                  return '&lt;b&gt;' + this.series.name + '&lt;/b&gt;&lt;br/&gt;' +
                      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '&lt;br/&gt;' +
                      Highcharts.numberFormat(this.y, 2);
              }
          },
          series: [{
              name: 'Random data',
              data: data
          }]
      });        
  }
  
      $(document).ready(function() {
      var data = [];
  
      $.ajax({
          type: "GET",
          url: "/test/random2.php",
          data: "p=2",
          dataType: "json",
          async: false,
          success: function(result){
              var values = JSON.parse(JSON.stringify(result));
              var time = (new Date()).getTime();
              for (i = -19; i &lt;= 0; i += 1) {
                  //data.push([i, -i]);
                  //data.push("{x:" + (time + i * 1000) ", y: " + values[i+19] + "}");
                  data.push([
                      time + i * 1000,
                      values[i+19]
                  ]);
              }
              doHighChart(data);
          }
      });
  });
  </code></pre>