title: How to use ajax call to populate line graph in highcharts
body: <p>I am trying to draw a simple line graph with highcharts in asp.net.  I'm cannot get anything drawn though.  Here is what I've got so far:</p>
  
  <pre><code>var chart;
  
      $(document).ready(function () {
          chart = new Highcharts.Chart({  
              chart: {
                  renderTo: 'container',
                  type: 'line'  
              },
              title: {
                  text: 'Rank vs. Time'
              },    
              xAxis: {
                  numerical: [],
                  title: {
                      text: 'Year'
                  }
              },
              yAxis: {
                  title: {
                      text: 'Rank'
                  }
              },
  
          });
          getData();
      });
  
  function getData() {
          $.ajax({
              type: "GET",
              url: "/api/Name/GetBoyNamesByYear?name=matthew",
              success: function (data) {
                  chart.addSeries({
                      name: "Matthew",
                      data: data
                  });
              },
              cache: false
          });
      }    
  </code></pre>
  
  <p>My ajax returns something in the format of </p>
  
  <pre><code> [{"$id":"1","Year":1995,"Rank":2},{"$id":"2","Year":1996,"Rank":2},{"$id":"3","Year":1981,"Rank":3},{"$id":"4","Year":1982,"Rank":3}, .......
  </code></pre>
  
  <p>And if it matters in my html I have:</p>
  
  <pre><code>&lt;div id="container" style="width:100%; height:400px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>edit:  Solved the issue.<br>
      data.sort(function (a, b) {
                          return a.Year > b.Year ? 1 : -1;
                      });</p>
  
  <pre><code>                data = $.map(data, function (i) {
                      return { x: i['Year'], y: i['Rank'] };
                  });
  
                  chart.addSeries({
                      name: "Matthew",
                      data: data,
                      marker: {
                          enabled: true,
                          radius: 1
                      },
                  });
  </code></pre>