Wrong info after data update

[csl-init]

Hello,
I have implemented a Gannt chart which:
- it reads data from the database on load
- shows work tasks for the employees
- shows the times when they are supposed to be working on that task
- it is possible to drag and drop between employees and times

Pretty much all features are working well, the issue I am facing is with a pop-up I implemented, where you can also see the task details and change the data.
After the user changes times (for example), and it is posted into the database, I clear the data, I redraw the chart but still the "shadow" task still appears (so duplicated, one with the new data and the other with the previous data).

Only if I reload the page, the final result is ok, but for the application itself it is a "bad" solution.

Any suggestions on what I could be doing wrong?
I am using angular 15.2.8, highcharts 11.1.0 and highcharts-angular 3.1.2.

Thank you,
Carla Lima

[jedrzej.r]

Hi!

Welcome to our forum and thanks for reaching out to us with your question!

Reloading page in order to show correct chart isn't an acceptable solution. Unfortunately, without looking at your code, I'm not able to provide any solution, as there are too many factors that can impact the chart behaviour. Could you please reproduce a minimal example of your application, so that I can investigate it further? Only this way I'll be able to come up with a solution to your problem. You can start by editing this demo: https://stackblitz.com/edit/highcharts- ... mponent.ts.

I'm waiting for your reply.
Best regards!

[csl-init]

Hello,
Thank you for your quick reply.
I added all the config I am using: https://stackblitz.com/edit/highcharts- ... mponent.ts

On the load event, I add the series and I set the chart extremes from yesterday to one week after today.
I update data on drop with no issues whatsoever, but then on the afterClosed event of the angular dialog, even after chart.redraw and/or calling load event again with no data on the chart, the issue occurs...

I guess it is hard to reproduce, if you need anything else don't hesitate to ask.
I've tried several things already, I've read most of the examples here also but I still can't figure out what I am doing wrong.

Thanks,
Carla Lima

[jedrzej.r]

Hi again!

Firstly, I've noticed that you didn't import and declare the draggable-points module. After that, I've tried to reproduce this issue by simply changing the position of points, and then updating chart series with initial data, but the shadow task didn't appear afterwards. Perhaps it might have something to do with how the data is sent and retrieved from your database. Also, you could add a [oneToOne] parameter to the Highcharts instance, so that all the changes are reflected directly on the chart.

If you could replicate the process of updating the database and redrawing the chart (or share a code snippet responsible for this action), then I could investigate it further. Without it, I'm not able to reproduce this issue.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

API: https://github.com/highcharts/highchart ... ns-details

I'm waiting for your reply.
Best regards!

[csl-init]

Hi Jędrzej!
So sorry for the late reply, but now I will try to demonstrate it better.
I updated the demo with a more detailed version, but so far I noticed that I didn't use the update flag on my project..
I will take a look at that and the oneToOne parameter as well and keep you posted.

Thank you again for your time!
Best regards,
Carla Lima

Editor URL: https://stackblitz.com/edit/highcharts- ... mponent.ts
Application URL: https://highcharts-angular-gantt-nhhmqg.stackblitz.io

[jedrzej.r]

Not a problem at all! Thanks for sharing the reproducible demo of your solution.

After a brief inspection of the code, I was able to determine what could be the cause of the problem. Whilst clicking the "update and redraw" button, the onLoad function is called, which basically adds series to the chart config, instead of updating present series. This results in duplicated tasks, since there are more series than on initial load of the chart.

In order to properly update chart with new data, you should follow this example, where series is updated with new data: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if you have any further questions!
Best regards!