Problem description:
I am using the Highcharts library to create a chart. I want to update the chart data every second, but the chart is not updating. The console doesn’t show me any error. The chart is ok to be manually redraw.
Code:
function updateChart()
{
if (chart1 == undefined) {// I used to redraw the whole chart each time I update my data and it works fine
chart1 = Highcharts.chart('hccont', {
chart:
{
type: 'column',
options3d: {
enabled: true,
alpha: 5,
beta: 5,
depth: 55,
},
events: {
load: function () {
//the update() is called in debug each second but it doesn't actually do anything to my chart. no error shown in console.
setInterval(function () {
chart1.update({
series: [{
data: count,
name: 'Picked',
showInLegend: false
}],
xAxis: {
categories: studentsName,
title: {
text: 'Names'
},
labels: {
skew3d: true
}
}
});
}, 1000);
}
}
},
title: {
text: 'Statistic'
},
subtitle: {
text: 'Let's see who are picked the most.'
},
colors: generateColorArray("#31c1ff", "#ffa4ff", "#ff6464")
,
xAxis: {
categories: studentsName,
title: {
text: 'Names'
},
labels: {
skew3d: true
}
},
yAxis: {
title: {
margin: 20,
text: 'Picked'
},
labels: {
skew3d: true
}
},
credits: { enabled: false },
navigation: {
buttonOptions: {
enabled: false
}
},
tooltip: {
headerFormat: '<b>{point.x} is Picked: {point.y} time(s)</b><br>'
},
plotOptions: {
series: {
depth: 25,
colorByPoint: true
}
},
series: [{
data: count,
name: 'Picked',
showInLegend: false
}]
});
}
}
The var ‘count’,’studentsName’ are properly updated arrays. If I manually redraw the whole chart it works fine. But I don’t like the animation of redraw.
Additional information:
I am using Highcharts v11.2.0.
I am using the Edge browser.