Use ajax to draw graph dynamically using Highcharts
<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>