Passing JSON data to build HighCharts plots Dynamically (using SetInterval)

As a reminder, here is the way of simply I did use previously to draw a Highcharts chart from JSON data :

 $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'graph_retard_refund',
                        type: 'area',
                        marginRight: 130,
                        marginBottom: 25
                    },
                    title: {
                        text: 'Nbre Commandes en Retards de remboursement par mois',
                        x: -20 //center
                    },
                    subtitle: {
                        text: '',
                        x: -20
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: 'Nb de Commandes'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    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: 0
                    },
                    plotOptions: {
                        area: {
                            stacking: 'normal',
                            lineColor: '#666666',
                            lineWidth: 1,
                            marker: {
                                lineWidth: 1,
                                lineColor: '#666666'
                            }
                        }
                    },
                    series: []
                }

                $.getJSON("http://localhost/boot/late_payment.php?function=controle_remboursement_retard&param=graph", function(json) {
                    options.xAxis.categories = json[0]['data'];
                    options.series[0] = json[1];
                    chart = new Highcharts.Chart(options);
                });
            });


Now, if you want an automatic refresh of the graph every minute, you will to use  the "destroy()" function from HighCharts and the well-known setinterval JavaScript function  :

( see http://stackoverflow.com/questions/11752320/auto-refreshing-highcharts-with-php-js)

$(document).ready(function() {
    var options_payment = {
        chart: {
            renderTo: 'graph_retard_payment',
            type: 'area',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'Répartitions du nbre Commandes en Retards de paiements dans le temps',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'Nb de Commandes'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        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: 0
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: []
    }
    $.getJSON("http://localhost/boot/late_payment.php?function=controle_paiement_retard&param=graph", function(json) {
        // $('#graph_retard_payment').highcharts().destroy();
        // if(chart) chart.destroy();
        options_payment.xAxis.categories = json[0]['data'];
        options_payment.series[0] = json[1];
        chart = new Highcharts.Chart(options_payment);
        $("#hour_retard_payment").text('à '+ getActualHour()); 
    });

    var autoRefreshGraph_retard_paiement = setInterval(function() {

        $.getJSON("http://localhost/boot/late_payment.php?function=controle_paiement_retard&param=graph", function(json) {
            // $('#graph_retard_payment').highcharts().destroy();
            if(chart) chart.destroy();
            options_payment.xAxis.categories = json[0]['data'];
            options_payment.series[0] = json[1];
            chart = new Highcharts.Chart(options_payment);
            $("#hour_retard_payment").text('à '+ getActualHour()); 
        });
        } , delay);  
    }
);