Highcarts不会加载我的JSON数据

Question

I'm trying to create a chart using Highcharts. My JSON output is a regular JSON format, generated by PHP's json_encode(). Here is my JSON output:

[["2015-07-13 16:41:05","3"],["2015-08-15 16:41:05","1"],["2015-09-18 16:41:05","4"],["2015-10-28 16:41:05","3"],["2015-11-20 16:41:05","1"],["2015-11-28 16:41:05","5"],["2015-12-13 16:41:05","1"],["2015-12-21 16:41:05","2"],["2015-12-24 16:41:05","1"],["2015-12-25 16:41:05","2"],["2015-12-28 16:41:05","1"],["2016-01-03 16:41:05","2"],["2016-01-09 16:41:05","4"],["2016-01-14 16:41:05","6"],["2016-01-17 16:41:05","3"],["2016-01-18 16:41:05","3"],["2016-01-20 16:41:05","2"],["2016-01-21 16:41:05","2"],["2016-01-22 16:41:05","2"],["2016-01-23 16:41:05","1"],["2016-01-24 16:41:05","5"],["2016-01-25 13:41:05","1"],["2016-01-25 16:41:00","1"],["2016-01-25 16:41:05","1"],["2016-01-27 16:41:05","1"],["2016-01-28 16:41:05","1"],["2016-01-29 16:41:05","1"],["2016-02-09 16:41:05","1"],["2016-02-10 16:41:05","2"],["2016-02-11 16:41:05","3"],["2016-02-15 16:41:05","2"],["2016-02-18 16:41:05","1"],["2016-02-21 16:41:05","1"],["2016-02-23 16:41:05","1"],["2016-02-24 16:41:05","1"],["2016-02-25 16:41:05","1"],["2016-02-26 16:41:05","1"],["2016-02-28 16:41:05","1"],["2016-03-01 16:41:05","1"],["2016-03-02 16:41:05","1"],["2016-03-05 16:41:05","1"],["2016-03-12 16:41:05","1"],["2016-03-21 16:41:05","1"],["2016-04-25 16:41:05","1"],["2016-05-05 16:41:05","2"],["2016-05-11 16:41:05","1"],["2016-05-12 16:41:05","1"],["2016-05-24 16:41:05","1"],["2016-05-25 16:41:05","1"],["2016-06-01 16:41:05","1"],["2016-06-12 16:41:05","1"],["2016-06-25 10:41:05","1"],["2016-06-25 16:41:05","1"],["2016-07-01 10:41:05","1"],["2016-07-01 16:41:05","1"],["2016-07-02 16:41:05","1"],["2016-07-25 16:21:05","1"],["2016-07-25 16:41:05","1"],["2016-08-13 16:41:05","1"],["2016-08-28 16:41:05","1"],["2016-09-20 16:41:05","3"],["2016-09-29 16:41:05","2"],["2016-10-01 14:20:18","1"],["2016-10-09 14:20:18","1"],["2016-10-10 14:20:18","1"],["2016-10-28 14:20:18","2"],["2016-10-30 14:20:18","2"],["2016-11-01 13:44:29","1"],["2016-11-06 08:26:18","2"],["2016-11-10 13:44:29","1"],["2016-11-13 13:44:29","2"],["2016-11-14 19:13:42","4"],["2016-11-15 23:27:39","3"],["2016-12-06 19:04:06","3"],["2016-12-08 10:49:28","3"],["2016-12-10 23:01:44","1"],["2016-12-14 21:27:44","1"],["2016-12-15 23:27:44","2"],["2016-12-15 23:27:53","3"],["2016-12-18 18:06:28","1"],["2016-12-21 20:06:28","3"],["2016-12-23 20:06:20","5"],["2016-12-29 20:18:18","3"],["2017-01-03 20:06:32","3"]]

But Highcarts doesn't load the data in the chart. The URL, output and data are all set. The request returns 200 and the data can be loaded regularly as I've checked it by AJAX. Here is my Highchart function. Please note that I got several reports in my application. It's why I've specified the cartFilling() function:

function cartFilling() {
    var url = 'components/com_product/views/reports/callback.php?callback=cart-filling&date='+date_scope;
    jQuery.getJSON(url, function (data) {
        Highcharts.chart('cartFilling', {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Shopping Cart Filling Actions'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Carts Filled'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'Cart Filling',
                data: data
            }]
        });
    });
}

Any help is highly appreciated.

Answer 1

Your solution works perfectly, you just need to rewrite the data array.

Instead of this:

["2015-07-13 16:41:05", "3"]

Use this:

[Date.UTC(2015,6,13,16,41,5), 3]

Please note that in the Date.UTC function 0=January,1=February, etc.

http://jsfiddle.net/dpegbt7t/