Search code examples
highcharts

How to update Highcharts data connector linked to DataGrid?

Using Highcharts Dashboards I have created a dataPool with a single data connector that is used by a DataGrid component. Now, I want to update the data in the connector and have that reflected in the DataGrid. I've spent the last hour wrangling this without success. The thing that seems to work is:

dashboard.dataPool.setConnectorOptions({
  id: "my-data",
  options: {
    data: createDataTable(), // returns row-oriented matrix
  },
  type: "JSON"
})

dataGrid.component.load()

However, the load() call is also duplicating event functions that are on the data grid particularly the click event. Thus clicking on a DataGrid row after calling this will call two event handlers.

And in any case, it feels strange to be re-loading a component when it's wired up to a data connector. My question then is either:

  • How can I update the data connector so that its data is reflected in the DataGrid automatically?
  • How can I refresh the data grid so that it picks up the current data connector's data table?

UPDATE: I have verified that calling load() on either the component or its data connector (as suggested by @Dominik Chudy) will duplicate events seemingly on purpose:

call stack for table refresh

multiple click events for the same row

Solution

  • You should edit the options that data connector uses, and then call connector.load() function.

    Demo: https://jsfiddle.net/BlackLabel/byenxdL6/

    function updateData() {
  data.push(["Abc", 600]);
  dash.dataPool.connectors["synchro-data"].load();
}