title: Use ajax to draw graph dynamically using Highcharts
body: <p>I trying to use highchart's ajax functionality to draw this graph 
  <a href="http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-negative/" rel="nofollow noreferrer">http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-negative/</a></p>
  
  <p>Here is my javascript code</p>
  
  <pre><code>$(document).ready(function() {
      $.getJSON('http://localhost/dashboard/graphdata', function(data) {
          console.log(data);
          var options = $('#container').highcharts({
          chart: {
              renderTo: 'container',
              type: 'column'
          },
          title: {
              text: 'Column chart with negative values'
          },
          xAxis: {
              categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
          },
          credits: {
              enabled: false
          },
          series: data
      });
      });
  });
  </code></pre>
  
  <p>This is the response of <a href="http://localhost/dashboard/graphdata" rel="nofollow noreferrer">http://localhost/dashboard/graphdata</a></p>
  
  <pre><code>"\"\\\"[{name: 'John', data: [5, 3, 4, 7, 2]},\\\\n            {name: 'Jane', data: [2, -2, -3, 2, 1]},\\\\n            {name: 'Joe', data: [3, 4, 4, -2, 5]}]\\\"\""
  </code></pre>
  
  <p>However instead of a graph I'm getting this
  <a href="https://i.stack.imgur.com/rcsPp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rcsPp.png" alt="Instead of graph getting series"></a></p>