Highcharts data import JSON - formatting

Question

I am trying to get some data to render a scatter plot using Highcharts. Here is a sample of the data.

{ "results": [ [ "2013-04-14 10:00", -1 ], 
               [ "2013-04-14 11:48", 0 ], 
               [ "2013-04-14 14:45", -1 ], 
               [ "2013-04-14 18:02", -1 ], 
               [ "2013-04-14 18:45", -1 ], 
               [ "2013-04-14 19:57", -1 ], 
               [ "2013-04-14 22:19", 0 ], 
               [ "2013-04-14 23:00", 0 ],
               [ "2013-04-14 23:00", -1 ], 
               [ "2013-04-14 23:00", 0 ], 
               [ "2013-04-14 23:00", 0 ], 
               [ "2013-04-14 23:00", 0 ], 
               [ "2013-04-14 23:00", 0 ], 
               [ "2013-04-14 23:00", 0 ], 
               [ "2013-04-14 23:00", 0 ], 
               [ "2013-04-15 00:18", 0 ], 
               [ "2013-04-15 00:21", 0 ], 
               [ "2013-04-15 00:22", 0 ], 
               [ "2013-04-15 00:24", 1 ], 
               [ "2013-04-15 04:15", -1 ], 
               [ "2013-04-15 09:02", -1 ] 
             ] 
}

Here is the js:

$(document).ready(function() {
  var options = {

    chart: {
        renderTo: 'container',
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Sentiment Report by Publish Date'
    },
    subtitle: {
        text: 'Written by Kat Chilton for Oxyme'
    },
    xAxis: {
        title: {
            text: 'Publish Date'
        },
        type: 'datetime'
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Sentiment',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    plotOptions: {
        scatter: {
            marker: {
                radius: 5,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(0,0,0)'
                    }
                }
            },
            states: {
                hover: {
                    marker: {
                        enabled: false
                    }
                }
            },
            allowPointSelect: true,
            dashStyle: 'dot',
        }
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'top',
        y: 0,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    credits: {
        enabled: false
    },
    series: [{}]
};
 $.getJSON('sample.json', function(data) {
    options.series[0].data = data;
    var chart = new Highcharts.Chart(options);
});

I'm not getting any points rendered on the page, but the chart does appear with the titles and what not. I presume this is an issue with data formatting, but I just can't seem to find the cause. Can anyone help out?

Answer 1

You need get results property from data, like so

options.series[0].data = data.results;

Example