highcharts pie ajax,javascript - How to refresh highcharts (pie chart) data via ajax - Stack Overflo...

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}: {point.percentage:.1f}%'

},

accessibility: {

point: {

valueSuffix: '%'

}

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

format: '{point.name}: {point.percentage:.1f} %'

}

}

},

series: [{

name: 'Number of Leads in Percent',

colorByPoint: true,

animation: false,

data: []

}]

});

});

Appreciate your help :)