Highchart JS Set data not updating Export: ShowTable on Dropdown Event but chart updates fine

Question

I have an .aspx file which has drop-down lists and on selected index changed a javascript function is being called to update the series data points on a highchart rather than rendering the entire chart again. I have created the below function but this doesnt seem to be updating the highchart table.It works when updating the chart. Used this example to create the chart and table that synchronize together: https://www.highcharts.com/blog/tutorials/synchronize-selection-bi-directionally-between-chart-and-table/ But when I click an item on the dropdown which refreshes the points using setData the table is not updating the values!!!

function salesPurchaseScatter() {

console.log("I am in the function");

var scatterData = [];
var xAxisLabels = [];
var scatterDatas;
$.ajax({
    type: "POST",
    async: false,
    url: "Index.aspx/ReturnData",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        scatterDatas = data.d;


    }
});
const chart = window.chart;
console.log("CHart: ", chart);
chart.series[0].setData(scatterDatas.map(item => item["bucket5"]));
chart.series[1].setData(scatterDatas.map(item => item["bucket10"]));
chart.series[2].setData(scatterDatas.map(item => item["bucket15"]));
chart.series[3].setData(scatterDatas.map(item => item["bucket20"]));
chart.series[4].setData(scatterDatas.map(item => item["bucket25"]));
chart.series[5].setData(scatterDatas.map(item => item["bucket30"]));

chart.viewData();

}

The above is not updating the data points on the data table!

My original function to create the chart in the first place which works fine is below:

  var scatterData = [];
    var xAxisLabels = [];
    var scatterDatas;
    $.ajax({
        type: "POST",
        async: false,
        url: "Index.aspx/ReturnData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            scatterDatas = data.d;


        }
    });

    let chart = Highcharts.chart('container1', {
        chart: {
            type: 'scatter',
            events: {
                selection: selectPointsByDrag,
                click: unselectByClick
            },
            // necesssary to be able to select by dragging
            zoomType: 'xy'
        },
        title: {
            text: '(' + minDWT + ' <DWT ' + ' < ' + maxDWT + ')',
            style: {
                fontWeight: 'bold',
                fontSize: '20px'
            }
        },
        plotOptions: {
            scatter: {
                lineWidth: 2,
                dashStyle: 'dot'
            },
            series: {
                connectNulls: true,
                allowPointSelect: true,
                pointPadding: 0,
                point: {
                    events: {
                        select: function (e) {
                            selectTableCell(this, true);
                        },
                        unselect: function (e) {
                            selectTableCell(this, false);
                        }
                    }
                },
                marker: {
                    states: {
                        select: {
                            fillColor: 'tomato',
                            borderColor: 'green'
                        }
                    }
                }
            }
        },
        series: [{
            name: 'bucket5',
            data: scatterDatas.map(item => item["bucket5"]),
            turboThreshold: 0,
            id: 'Results1',
            marker: {
                symbol: 'circle'
            },

        },
        {
            name: 'bucket10',
            data: scatterDatas.map(item => item["bucket10"]),
            turboThreshold: 0,
            id: 'Results2',
            marker: {
                symbol: 'circle'
            },
        },
        {
            name: 'bucket15',
            data: scatterDatas.map(item => item["bucket15"]),
            turboThreshold: 0,
            id: 'Results3',
            marker: {
                symbol: 'circle'
            },
        },
        {
            name: 'bucket20',
            data: scatterDatas.map(item => item["bucket20"]),
            turboThreshold: 0,
            id: 'Results4',
            marker: {
                symbol: 'circle'
            },
        },
        {
            name: 'bucket25',
            data: scatterDatas.map(item => item["bucket25"]),
            turboThreshold: 0,
            id: 'Results5',
            marker: {
                symbol: 'circle'
            },

        }, {
            name: 'bucket30',
            data: scatterDatas.map(item => item["bucket30"]),
            turboThreshold: 0,
            id: 'Results6',
            marker: {
                symbol: 'circle',
                fillColor: 'red',
                radius: 10
            },

        }],
        xAxis: {
            categories: scatterDatas.map(item => item["date"])
        },
        tooltip: {

            formatter: function () {
                var s = '<span style="color:' + this.point.color + '">\u25CF</span> ' + this.point.series.name + '<br /><b>Date: ' + this.x + '</b><br/><b>Sales Price: ' + this.y + '</b>';
                return s;
            }
        },
        exporting: {
            showTable: true
        },
    });

UPDATE:

I have managed to get a step further. The chart is updating with the new data points but the table is not : exporting: { showTable: true },

The fix i put in place:

    const chart = window.chart;
console.log("CHart: ", chart);
for (i = 0; i < chart.series.length; i++) //Added this
    chart.series[i].setData([]);
chart.series[0].setData(scatterDatas.map(item => item["bucket5"]));
chart.series[1].setData(scatterDatas.map(item => item["bucket10"]));
chart.series[2].setData(scatterDatas.map(item => item["bucket15"]));
chart.series[3].setData(scatterDatas.map(item => item["bucket20"]));
chart.series[4].setData(scatterDatas.map(item => item["bucket25"]));
chart.series[5].setData(scatterDatas.map(item => item["bucket30"]));

chart.viewData();
chart.redraw(); //Added this

Have i missed something out? Struggling to debug and identify what is going wrong

Found a JSFiddle which is similar to my current set up. http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/export-data/showtable/

The above JS Fiddle has a similar chart and table output. When i click on a drop down item I am trying to setData (the data point values) as per above code and this should update the chart and table. In my case it is only updating the chart and not the table. The function I am calling is salesPurchaseScatter on dropdown selected index changed event.

ATTEMPTED THIS:

    const table = window.table;

table.series[0].setData(scatterDatas.map(item => item["saleagebucket5"]));
table.series[1].setData(scatterDatas.map(item => item["saleagebucket10"]));
table.series[2].setData(scatterDatas.map(item => item["saleagebucket15"]));
table.series[3].setData(scatterDatas.map(item => item["saleagebucket20"]));
table.series[4].setData(scatterDatas.map(item => item["saleagebucket25"]));
table.series[5].setData(scatterDatas.map(item => item["imo"]));

chart.redraw();
table.redraw();

but series is not possible using a table. How can i update the data using setData for the table? I tried using chart.viewData() but this doesnt seem to work either.

My guess is: const chart= window.chart; is only referring to the chart but dont know how to re-do the entire high chart canvas just the chart on it own!

A JSFiddle I tried to follow - https://jsfiddle.net/hxgp0yvj/ but same issue happening- Table not updating in this but chart does. I moved the code into my own solution to test it out. What am i missing?

Answer 1

Thank you for sharing it, after digging into I found out that it is a regression. I reported it on the Highcharts GitHub issue channel where you can follow this thread. If you don't need any new functionalities please use the previous version of the Highcharts until the bug will be fixed.

https://github.com/highcharts/highcharts/issues/14320