title: highcharts dynamic data populate in line chart
body: <p>I'm using highcharts and when i populate the data dynamically, its not showing up. Here's my code:</p>
  
  <pre><code>&lt;div id="chart"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>..</p>
  
  <pre><code>$(document).ready(function(e) {
  
      var options = {
          chart:{
              type:'line'
          },
          title:{
              text:'Line Chart'
          },
          xAxis:{
              title:'Date',
              categories:[]
          },
          yAxis:{
              title:'Val1/Val2'
          },
          series:[{name:'Val1', data:[]}, {name:'Val2', data:[]}]
      };
  
      $.ajax({
          url:'includes/getData.php', // select * from 'myTable' order by date
          dataType:'json',
          success:function(data){
              $.each(data, function(index, value){
                  options.xAxis.categories.push(value.date); // date = 'mm/dd'
                  options.series[0].data.push(value.val1); // val1 = integer
                  options.series[1].data.push(value.val2); // val2 = integer
              });
  
              $('#chart').highcharts(options);
          }
      });
  
  });
  </code></pre>
  
  <p>The categories show up just fine on the x-axis (the dates), but nothing else shows up. If I hard code the data like this:</p>
  
  <pre><code>$(document).ready(function(e) {
  
      var options = {
          chart:{
              type:'line'
          },
          title:{
              text:'Line Chart'
          },
          xAxis:{
              title:'Date',
              categories:['08/16','08/17','08/18','08/19']
          },
          yAxis:{
              title:'Val1/Val2'
          },
          series:[{name:'Val1', data:[23, 56, 73, 12]}, {name:'Val2', data:[12, 65, 23, 49]}]
      };
  
      $.ajax({
          url:'includes/getData.php', // select * from 'myTable' order by date
          dataType:'json',
          success:function(data){
              $.each(data, function(index, value){
                  //options.xAxis.categories.push(value.date); // date = 'mm/dd'
                  //options.series[0].data.push(value.val1); // val1 = integer
                  //options.series[1].data.push(value.val2); // val2 = integer
              });
  
              $('#chart').highcharts(options);
          }
      });
  
  });
  </code></pre>
  
  <p>it works perfectly. Notice i hardcoded the xaxis category array and the 2 series data arrays, and commented out the 3 lines in the ajax success handler where it populates using the data from the DB. </p>
  
  <p>Not sure why it works hardcoded by not dynamically. I outputted the data arrays to the console in the success handler and the data is there, as expected.</p>
  
  <p>Any thoughts whats wrong with this?</p>
  
  <p>EDIT: JSON returned by getData:</p>
  
  <pre><code> 0: {0:8, 1:120, 2:80, 3:08/06/2013, 4:1:00 am, id:8, val1:120, val2:80, date:08/06/2013, time:1:00 am}
   1: {0:5, 1:120, 2:80, 3:08/08/2013, 4:3:55 am, id:5, val1:120, val2:80, date:08/08/2013, time:3:55 am}
   2: {0:9, 1:120, 2:80, 3:08/10/2013, 4:2:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}
   3: {0:13, 1:120, 2:80, 3:08/19/2013, 4:12:00 am, id:9, val1:120, val2:80, date:08/10/2013, time:2:00 am}
  </code></pre>