n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Data Table Close or Refresh

Hello again. You guys have been very helpful with my last couple questions so hoping to go three for three. I'm using the highcharts-angular wrapper in a project that I'm working on. The versions are "highcharts": "^9.2.2" and "highcharts-angular": "^2.10.0" with Angular 12.2.8. The UI I have allows the user to enter some parameters including a start and end date for the data that they want and when they have everything selected they hit a Recalculate button and I use the updateFlag to update the chart which works perfectly.

My issue is that if the user has the data table showing from the exporting menu the chart updates but the data table does not update. It would awesome to update the data table and keep it showing but at a minimum I'd like to at least close the data table when the chart updates so the user can open it again with the updated data. After a full day of working on this I'm here to try and find some help hopefully. My best solution at the end of today is to use the chartOptions.exporting showTable = false before updating with the updateFlag. This closes the table BUT when the user clicks on the exporting menu again, at the bottom it says "Hide data table" even though the data table isn't showing. So they have to click "Hide data table" and nothing happens, then they have to go back and click "Show data table" which works. Is there a proper way to close the data table that I'm missing or even better if data table could get updated with the new data? Any help is much appreciated as always.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Data Table Close or Refresh

Hi,
Glad to hear it :)

Could you please share with us your online code results so far?
It will help to have a better look at the problem and suggest something.

Best regards.
Sebastian Hajdus
Highcharts Developer
n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Re: Data Table Close or Refresh

Hey Sebastian. Thanks so much for the response and here is the link for the codesandbox https://codesandbox.io/s/angular-tableupdate-10eyh . To replicate the issue the data table needs to be open before hitting the recalculate button. It would be awesome if the data would update in the table and stay open but at a minimum I'd like to get the table to close which is what I'm trying to do in lines 327-329. I also tried grabbing the div class and setting the display to none which worked but then it's out of sync with what the show data table or hide data table says. Any advice would be great.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Data Table Close or Refresh

Hi,
Sorry for the late reply, It's not an obvious topic to resolve.

I have one idea for this, try updating your (recalculate) using update inside event chart.events.exportData.
I don't have tested yet but this should work.
Callback that fires while exporting data. This allows the modification of data rows before processed into the final format.
https://api.highcharts.com/highcharts/c ... exportData

API References:
https://api.highcharts.com/class-refere ... ies#update
https://api.highcharts.com/class-refere ... xis#update

You can also try to call series and axis update in events redraw and see how it behaves.

Let me know how are you doing with this, feel free to ask.
Best regards.
Sebastian Hajdus
Highcharts Developer
n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Re: Data Table Close or Refresh

No need to apologize at all, I really appreciate all the help you've provided me directly and all the times I referenced one of your answers to figure out a problem. I'm going to work on this tomorrow and will let you know how it goes, but it definitely sounds promising. Have a good night.
n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Re: Data Table Close or Refresh

I've been trying to mess with this but really lost on how the syntax should look. Can you take a look at what I have started below give me some advice? From everything I can find I need to reference the container or the highcharts element with "this" and then need to add the language. In my time working with highcharts angular I've never had to use any of the callbacks and it's just throwing me for a loop.

Code: Select all

this.productionCountChartOptions.chart.events.exportData = () => {
      let chart = Highcharts.chart(this, {
        // am I supposed to put the updated series array here?  or all the chart parameters like chart, title, subtitle, xAxis, etc.
        // if I'm setting chart equal to this then how am I calling chart?
    };
n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Re: Data Table Close or Refresh

Bumping to see if you had any insight on how to implementing that callback.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Data Table Close or Refresh

Hi,
I changed my support channel and missed your message.

I generally mean something like I posted below, also for update series you can use setData.
When you chose the export view data table, exportData() event fire.

Code: Select all

    chart: {
      zoomType: "xy",
      events: {
        exportData: function () {
          var chart = this;
          chart.series[0].setData([
            129.2,
            144.0,
            176.0,
            135.6,
            148.5,
            216.4,
            194.1,
            95.6,
            54.4,
            29.9,
            71.5,
            106.4
          ]);
        }
      }
    },

Live demo:
https://codesandbox.io/s/angular-tableu ... rked-pqgp3

API References:
https://api.highcharts.com/class-refere ... eries#data
https://api.highcharts.com/class-refere ... ml#setData
https://api.highcharts.com/class-refere ... ies#update


Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”