Filter Data before Rendering Highcharts - mysql

Question

I have a Highcharts Gantt chart which is pulling parsed JSON data from a MySQL table.
The data spans 4 years, but I need to filter it so that it only shows data for 2022.
The issue is that I cannot use the standard Highcharts data filter as it does not remove empty rows without any data.
I would like to filter the data before the chart is even rendered so that rows without bars are not shown at all. Is that possible?

Answer 1

It is really easy, you just need to filter your JSON data before creating a chart. A simplified process will be like below:
const receivedData = [{
name: 'Start prototype',
start: '2021-04-11',
end: '2021-04-17'
}, {
name: 'Test prototype',
start: '2022-04-11',
end: '2022-04-17'
}, {
name: 'Develop',
start: '2022-06-11',
end: '2022-07-11'
}, {
name: 'Run acceptance tests',
start: '2022-09-11',
end: '2022-09-21'
}];
const filteredData = receivedData.filter(
dataEl => new Date(dataEl.start) > new Date('2022')
);
// THE CHART
Highcharts.ganttChart('container', {
series: [{
name: 'Project 1',
data: filteredData.map(({
name,
start,
end
}) => ({
name,
start: new Date(start).getTime(),
end: new Date(end).getTime()
}))
}]
});
Live demo: https://jsfiddle.net/BlackLabel/0vhdg5jw/