title: Highcharts series and categories not adding dynamically from ajax request
body: <p>I am working on the highchart.I came across a problem where the categories data  and series data which I am loading dynamically is not showing up. Here is my code.</p>
  
  <pre><code>    function loadChart() {              
          var categories = [];    
          var trend_series = [];
          $.ajax({
              type:'POST',
          url : '/trends.php',
          dataType: 'json',
          async : 'false',
              data: { date: d, item_name: item },
          success: function( data ) {
              $.each( data, function( key, val ) {
              categories.push( key );
              trend_series.push( parseFloat( val ) );
              });
              },
          error: function( data ) {               
              //alert(data['responseText']);
          }
          });
  
          $( function () {
          var chart = new Highcharts.Chart({
             chart: {
                renderTo: 'container',
                type: 'line'                    
                 },                           
             xAxis: {
                categories: {}
             },
  
                 series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
             }]
               });
  
               chart.xAxis[0].setCategories( categories );
              chart.addSeries({
              name: 'App Summary',
              data:  trend_series       
              });
           });
          }
  </code></pre>
  
  <p>I am calling the <code>loadChart()</code> from another file. </p>
  
  <p>One of the main problem which I notice that the categories and trend_series (these are arrays )is empty inside the highchart function . But it is not empty inside the ajax function call. How can I pass those values to highchart function or is there any other method to achieve this.</p>