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 :)
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire