title: Highcharts $.ajax() in jQuery - pie chart
body: <p>I'm new to Highcharts and all of the help from here and some research has got me to my current status using Highcharts in my project. I'm still having an issue, the pie chart isn't loading data retrieved using $.ajax(). I have no idea what to try next. Any direction or help is much appreciated. </p>
  
  <p>I'm getting data from MS SQL and using $.ajax().</p>
  
  <p>I want to replicate what I made here: <a href="http://jsfiddle.net/bvaxmcLr/" rel="nofollow">http://jsfiddle.net/bvaxmcLr/</a>, but with my data from SQL. I can see the data on the page, but I can't get the chart to show. All of my code is below. Does anyone have any suggestions/ideas? Thanks!</p>
  
  <p><strong>JavaScript file</strong></p>
  
  <pre><code>$(document).ready(function () {
  
  var options = {
  
      chart: {
          renderTo: 'container',
          type: 'pie',
          options3d: {
              enabled: true,
              alpha: 45
          }
      },
      title: {
          text: null
      },
      subtitle: {
          text: null
      },
      credits: {
          enabled: false
      },
      tooltip: {
          pointFormat: '{series.name}: &lt;b&gt;{point.y:.1f}&lt;/b&gt;'
      },
      plotOptions: {
          pie: {
              colors: ['#739600', '#bb0826', '#fcc60A'],
              size: '100%',
              //innerSize: 100,
              depth: 45,
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                  enabled: false
              },
              showInLegend: true
          }
      },
      series: [{
          name: 'Amount',
          data: []
      }]
  }
  
  $.ajax({
      type: "POST",
      url: "../../WebServices/ORM-CV-Service.asmx/fetch_A1ACicat",
      data: {},
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      async: true,
      success: OnSuccess,
      error: OnError
  });
  
  function OnSuccess(data) {
  
      $.each(data.d, function (key, value) {
  
          options.series[0].data.push([value.Status_Color, value.Corrective_Action_ID]);
          alert(value.Status_Color);
          alert(value.Corrective_Action_ID);
          //$("#ulItem").append("&lt;ul&gt;" + value.Status_Color + value.Corrective_Action_ID + "&lt;/ul&gt;");
  
      })
  
      chart = new Highcharts.Chart(options);
  
  }
  function OnError(data) {
      alert('fail');
  }});
  </code></pre>
  
  <p><strong>HTML file</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;title&gt;Pie Chart Example&lt;/title&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.highcharts.com/highcharts-3d.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.highcharts.com/highcharts-more.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>