title: creating highchart with ajax json data
body: <p>I'm trying to create a simple chart in a page using mysql data retrieved using a mysql script</p>
  
  <p>I don't understand how to integrate the ajax call with the data required for the chart. I don;t know enough about the various charting plugins to make my life easy and am currently trialing highchart.</p>
  
  <p>My php script returns the following json:</p>
  
  <pre><code>[{"name":"golfers"},{"data":[5.7879,6.6286,6.1724,5.3125,7.1481,6.1333,4.5769]}]
  </code></pre>
  
  <p>My chart script is:</p>
  
  <pre><code>$(function () {
  
  visitorData(function(data) {
      console.info(data);
      $('#chart1').highcharts({
          chart: {
              type: 'column'
          },
          title: {
              text: 'Average Visitors'
          },
          xAxis: {
              categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
          },
          yAxis: {
              title: {
                  text: 'Number of visitors'
              }
          },
          series: data,
      });
  });
  });
  </code></pre>
  
  <p>my function to make the ajax call:</p>
  
  <pre><code>$.ajax({
          url: '/visitdata',
          type: 'GET',
          async: true,
          dataType: "json",
          success: function (data) {
              console.warn(data);
              return data;
  
          }
      });
  </code></pre>
  
  <p>But at the moment nothing is being displayed.</p>
  
  <p>I'm not sure how to effectively make the ajax call and integrate it into the chart function. I decided on a callback based on earlier attempts and posts to ensure data is returned before creating the chart - is this bit correct?</p>
  
  <p>I'm not 100% sure the json data is structured correctly</p>
  
  <p>I'm not sure i;ve applied the data variable to the series correctly</p>
  
  <p>Basically - need a tutorial on this so I can get it working and experiment</p>
  
  <p>All help appreciated</p>
  
  <p>Thanks</p>