Highcharts ajax load

Question

I have a problem using Highcharts.

I want to get an array from my php API and treat the results as my datapoints.

Here is the code :

$(function () {
        $(document).ready(function () {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
            var chart;
            $('#graph_temperature').highcharts({
                chart: {
                    zoomType: 'x',
                    type: 'area'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: 'Temperature'
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    type: 'datetime'
                },
                series: [{
                    name: 'Temperature',
                    color: '#ff851b',
                    marker: {
                        enabled: false
                    },
                    data: (function () {
                        var data_graph;
                        $.ajax({
                            url: "https://urlhidden.com/ajaxsql.php?f=get_all_temperature",
                            type: "GET",
                            async: false,
                            success: function (data) {
                               data_graph = [].concat(data);
                               $("#debug").html(data_graph);
                            }
                        });
                        return data_graph;                            
                    })()
                }]
            })
        })
    });

My array is like :

[[1394908920000,20.87], [1394908980000,20.87], [1394909040000,20.87], [1394909100000,20.87], [1394909160000,20.87], [1394909220000,20.87],...]

My problem is that Highchart doesnt draw my chart. Axis, title are OK but my area is missing.

In order to debug i used this line :

$("#debug").html(data_graph);

And the array is well formed as i can see in my "debug" div.

When i put manually the entire array : data:[[1394908920000,20.87], [1394908980000,20.87], [1394909040000,20.87], [1394909100000,20.87], [1394909160000,20.87], [1394909220000,20.87],...], it works well.

Anybody have an idea to help me ?

Answer 1

I haven't test my code but it should work.I hope you'll understand my idea.

    $(function () {
        $(document).ready(function () {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
            var chart;
            params = {
                chart: {
                    zoomType: 'x',
                    type: 'area'
                },
                credits: {
                    enabled: false
                },
                title: {
                    text: 'Temperature'
                },
                legend: {
                    enabled: false
                },
                xAxis: {
                    type: 'datetime'
                },
                series: [{
                    name: 'Temperature',
                    color: '#ff851b',
                    marker: {
                        enabled: false
                    }
                }]
            };
            $.ajax({
                url: "https://urlhidden.com/ajaxsql.php?f=get_all_temperature",
                type: "GET",
                async: false,
                context:document.body,
                success: function (data) {
                    //data should be converted to json object using  [..]
//remove data variable in this format you should get the data
                    data = [[1394908920000,20.87], [1394908980000,20.87], [1394909040000,20.87]];
                    params.series[0].data = data;
                    $('#graph_temperature').highcharts(params);
                }
            });
        })
    });

Updated