I have a Pie chart that's based on a HTML table. The chart is working, but it doesn't update after a search.
I have a live demo of it here.
```
https://jsfiddle.net/spacemancw/4yheu0c1/48/
```
The table has hidden columns, the first and the last. The first column contains data that is in the other columns.
Column 2 uses CSS to apply a serial number, and that changes depending of the selected data set, which is great.
The search and exclude boxes work on column 0, the first hidden column.
The Pie chart is drawn on the the last hidden column, column 12. That column is either success or fail. The chart is green for success and red for fail.
When I search and/or exclude key words, I want the chart to auto update. So if I search for 'fail" the chart should be completely red. If I search for success, the chart should be green.
I have tried a few things . I tried some listener function, it's commented out in the javascript window.
The javascript window contains JS for the Pie chart and the serach/exclude fields.
If I could get that last piece working, I would really appreciate it. thanks
To update data in chart you can use Highcharts.Series.setData() method:
const chart = Highcharts.chart('container', {
series: [{
type: 'pie',
data: [5, 2, 3, 3]
}]
});
document.getElementById('btn').addEventListener('click', function() {
chart.series[0].setData([5, 6, 2])
})<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button id="btn">Update data</button>Demo: https://jsfiddle.net/BlackLabel/jus8vdkt/
API: https://api.highcharts.com/class-reference/Highcharts.Series#setData