How to refresh highcharts (pie chart) data via ajax

I'm trying to auto-refresh my ajax queries in highcharts (pie chart). Basically i want my data to refresh every 5 seconds. But nothing appears in my screen. Trying to use events for highcharts, but I'm not sure if this is the right way to do it.

Here's a snippet of my JS:

const leadstatus_peryear_title = $('#valLeadPerYear').val();
    var leadbyyear_chart;
    function requestLeadStatusByYear(){
        $.ajax({
            url: '/sample/dashboard/query',
            method: 'get',
            dataType: 'json',
            success:function(result){
                var resultsArr = [];
            $.each(result, function(index, element) {
                    resultsArr.push({
                        status: index,
                        status_count: parseFloat(element)
                    });
                });

                var data = [];
                $.each(resultsArr, function(index, element) {
                    data.push({
                        name: element.status,
                        y: element.status_count
                    });
                });
                leadbyyear_chart.series[0].data = data;
                // call it again after one second
                setTimeout(requestLeadStatusByYear, 1000);
            },
            cache: false
        });
    }

    document.addEventListener('DOMContentLoaded', function() {
        leadbyyear_chart = Highcharts.chart('leadsPerYear', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie',
                events: {
                    load: requestLeadStatusByYear
                }
            },
            title: {
                text: leadstatus_peryear_title
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                name: 'Number of Leads in Percent',
                colorByPoint: true,
                animation: false,
                data: []
            }]
        });
    });

Appreciate your help :)

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/31eOrfF
via IFTTT