Need some pointers regarding JSON formatting for Highcharts

Question

I have the following JSON that I am trying to use for a highcharts chart. Current I get nothing output in the chart (data), although I do see all four "questions" in the legend.

    [
    {
        "name": "Question 1",
        "data": [
            "1391981824000, 2",
            "1391981874000, 2",
            "1391981966000, 4",
            "1391982000000, 1"
        ]
    },
    {
        "name": "Question 2",
        "data": [
            "1391981830000, 3",
            "1391981878000, 4",
            "1391981971000, 2",
            "1391982005000, 2"
        ]
    },
    {
        "name": "Question 3",
        "data": [
            "1391981837000, 1",
            "1391981885000, 1",
            "1391981977000, 1",
            "1391982010000, 3"
        ]
    },
    {
        "name": "Question 4",
        "data": [
            "1391981842000, 4",
            "1391981898000, 3",
            "1391981982000, 3",
            "1391982015000, 4"
        ]
    }
]

And the javascript for the chart:

$(function () {
    var chart;

    $(document).ready(function() {
        $.getJSON("mysql/getChartData.php?sd=2012-02-09%2015:36:42&ed=2016-02-09%2016:37:39", function(json) {

            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'custom-range-line',
                    type: 'line'
                },
                xAxis: {
                    type: 'datetime'
                },
                title: {
                    text: 'Custom Date Range',
                    x: -20
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                yAxis: {
                    title: {
                        text: 'Number of Ratings'
                    }
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 2
                },
                series: json
            });
        });

    });

});

What am I doing wrong/why wouldn't this work? I've found a ton of example of how to do this, but none quite the way I need it. Let me know if there's anything else I can show.

Answer 1

Your data needs to be an array of tuples like so: For the UNIX timestamps, they need to be numeric, you currently have them as strings. It looks like you have correctly multiplied the UNIX timestamp * 1000 in order to work in JavaScript. Be assured that the value of options.data is an array so you can add more sets to it. Try it with one first, then gradually increase it so you can get used to the HighCharts API.

 var options = {
    "data": {[
        [1391981824000, 2],
        [1391981874000, 2],
        [1391981966000, 4],
        [1391982000000, 3],
     ]}
 }