Series list and underlying JS series out of sync

[Ted Gardner]

Using moxie highcharts 1.6.

Hi, I'm having some trouble with a chart I'm working with. When the user navigates away from a page, we call removeAllSeries through the onUnload method. However, sometimes when they return, a couple series remain on the chart. Events that use GWT code and interact with these series throw exceptions, which leads me to believe that the series exist in the JS object but not the BaseChart seriesList, which is why subsequent removeAllSeries calls do nothing to these phantom series.

Has anyone experienced this issue before? Is this The widget that holds this chart also holds onto a lot of references to the Series objects themselves for management, if that helps. Thanks for any help you can provide!

[Shawn Quinn]

Just a note that we started noticing a similar issue here in a couple of applications, but it seems to happen very randomly. I have not yet found a way to get the issue to be reproducible, so it's unclear to be if there's an issue in GWT Highcharts or if this an underlying Highcharts JS issue. If anyone can create a code example that reproduces the issue and post here, that would be much appreciated!

[Shawn Quinn]

Well, some somewhat good news on this. We recently found a way to reproduce this issue in one of our GWT apps, which allowed us to dig into it a bit more and find a work around. We confirmed the issue is not with the GWT Highcharts wrapper, but rather within highcharts.js there seems to be code that is attempting to destroy the series data when the user switches places in the application - and then gets out of sync if the user returns to a place that contained the chart.

E.g. if the user moves from a URL of "application#!placeA" (which contains a chart) to "application#!placeB" and then back to "application#!placeA". Everytime the user moves away from "placeA" it appears that highcharts.js is invoking its "series.destroy()" method (you can confirm this by adding a console.debug() statement within that method in the highcharts JS file). Then, sometimes, when the user then returns to "placeA" if the application attempts to remove the series from the chart, highcharts will get out of sync and redraw the removed series inappropriately.

Even though we believe this is an issue with the core highcharts.js library, reproducing the problem with something like a jsfiddle is bit complicated - since we believe it requires unloading the panel containing the chart and then returning to the same panel (although not 100% sure on that.) To work around the problem though, we've found that simply calling "Chart.removeSeries()" or "Chart.removeAllSeries()" call as the user leaves the place that contained the chart (which critically needs to happen before highcharts.js would have invoked its series.destroy() method on each of the series.) Then, when the user returns to the place with the chart in it, when the new series are added they get rendered correctly without the old series getting mixed in.

In the application where we ran into the issue, we happen to be using GWTP. So, to implement this fix we simply needed to override the presenter's onHide() method, which ended up looking something like this:

protected void onHide() {
    super.onHide();
    chartA.removeAllSeries(false);
    chartB.removeAllSeries(false);
}

Or:

protected void onHide() {
    super.onHide();
    for (Series series : collectionOfSeriesToClear) {
        chartC.removeSeries(series, false);
    }
    collectionOfSeriesToClear.clear();
}

Note the use of "false" as the second parameter to prevent highcharts from attempting to immediately draw the changes as the user was leaving the screen.