AmChartService.updateChart always parses data

[KevinFernandes]

Calling the AmChartService.updateChart() method always causes the chart to re-parse the data even if the data has not changed.

Looking at the code, it appears that the service is calling validateNow(true) which indicates to the chart that it should always parse the data.

The updateChart() method needs to take the parameters that validateNow() needs so that we can pass them in and have the chart update without reprocessing the data. The documentation indicates that 2 parameters are possible for validateNow(), the first is to re-parse the data (or not), the second indicates if events should fire again.

With our data, the updateChart() method can take upwards of 5 or more seconds to re-process the data. If we call the validateNow() method directly, passing false instead of true, the update takes less than a second to complete.

[zuice32]

Check out the solution I created here. The updateChart needs to unwrap the chart properties to do the correct updates. And when it is disposed behind the scenes you have to recreate the chart. https://github.com/amcharts/amcharts3-angular2/issues/12

[KevinFernandes]

@zuice32 Thanks for the update, the link didn't work but I was able to track down the issue.

I am not quite sure how this would resolve the issue I mentioned.

The problem is that updateChart() is calling validateNow() with the parseData parameter always true. This forces AmCharts to always parse the data, even if it is not necessary. I don't see anything else in the updateChart() code that "unwraps" chart properties it just calls chart.validateNow() (with some Zone stuff in there).

Our data sets are large, maybe not very large, but large enough for us to see significant slowdowns in the browser when generating or updating the chart. In most cases our data does not change but how we want to show it does (ghosting or hiding series for instance based on user criteria). Maybe we are still doing something wrong with the way we are using the charts, but the chart.validateNow() method takes two parameters which we currently have no control over with the current updateChart() method.

Are still using AmCharts 3 - maybe going to v4 would yield different results but we are not able to do this any time soon.

[zuice32]

It sounds as though there is a part of your code which is doing continuous async calls to try and update the data. Usually components will only initialize once and that’s where you initialize the static data. When a user starts manipulating the data that’s when you hook the update into some event like I used the tab navigation event. Another thing that could help is using a progress overlay during async events like Observables. Look into ngx progress bar for that kind of solution. I think the validateNow method is necessary to avoid memory leaks.

[koraysels]

I am not sure if this is related to this. But I have dynamic data every two seconds updating a serial line chart. It has a lot of data so the user can zoom in using the amchart tools, but everytime the dataProvider is updated it zooms back out. (which is every two seconds) This is really annoying.. Is there a way arround this?

[KevinFernandes]

@zuice32
There are no async calls or continuous updates in our code, the chart is generated with static data. But what we do want to do is give the user the ability to manipulate the chart - similar to the way the AmCharts Legend does. We do not use the legend because we need to display more information or more complex information than the legend would currently allow. We also give the user the ability to change chart styles, like from line to area to bar etc..

Now it might be that we are just doing this wrong, but according to the AmCharts site, there are two ways to update the chart - calling validateData() which forces a re-parse of the data in the data provider - which in our case is not changing as the user manipulates the chart. Or call validateNow() which takes two parameters, the first tells the chart to re-parse the data and the second tells the chart to rebuild from the current data. Neither of these calls are exposed directly from this Angular service, only the updateChart() method is exposed as a way to update a chart.

So in our case, all of the manipulations of the chart only affect the "graphs" not the data provider - so there is no need to call validateData() - so validateNow(false, true) is the way to go in these instances. Doing this though requires the type of "Zone" magic that is currently done in the updateChart() method of this service - which calls validateNow(true) explicitly, forcing a re-parse of the data when it is not necessary.

If there is another way to do this, using this service, then I am not currently aware of it. If the idea is to call the methods directly on the chart object instead, then we would have to reproduce the "Zone" magic necessary to make sure it runs in Angular correctly. An understanding of Zone and the inner workings of this service are needed for that.

What I am suggesting is that the updateNow() method of this service, expose the two parameters that the validateNow() method exposes so that it can be called in both instances; to parse data and/or update the chart. It would be simple, I think, to just add the two parameters to the updateChart() method of this service and default them to true. This would keep the functionality in place and working as it always did, but then give callers the ability to call updateChart() and override the need to parse data or rebuild the chart.