[2.0.1] Removing series causes javascript on mouseout errors

[apphacker]

UPDATE:

reproduceable: drag horizontally to zoom in to see bug:


http://jsfiddle.net/ebuTs/160/


Previous:

Can't reproduce it in the demo (http://jsfiddle.net/ebuTs/158/) at but then my use of Highcharts is a bit more involved. Basically after removing a bunch of series via remove() method onMouseOut events fire and throw errors at line number 6896 in highcharts.src.js

6896 tooltip = chart.tooltip,

chart is undefined.

Thanks for any help.

[apphacker]

I should mention there were no errors prior to upgrading to 2.0.1 and all I did was upgrade.

[apphacker]

Here I have created a means to duplicate this bug:

http://jsfiddle.net/ebuTs/160/

If you zoom in by dragging across horizontally you'll see the javascript error.

[apphacker]

I should also mention that you can see in that example that setting marker radius in the point is totally ignored. It should not show big DOTS like that, it certainly didn't used to.

[apphacker]

I'm just going to create a new post for the marker radius being ignored, nevermind that. Thanks!

[apphacker]

Ok I think It's linked to a fade out animation.

If I add a setTimeout before removing the series:

http://jsfiddle.net/Q8e8D/

It doesn't throw an error. However if I add a new series after removing the previous one several times I get the error again unless I make the wait time about 350 miliseconds, which I think has to do with that fade out animation. Is there a way to just turn that off? I think it's related to: viewtopic.php?f=9&t=7076

[apphacker]

This change in highcharts seems to have fixed:


try {
var series = this,
options = series.options,
chart = series.chart,
tooltip = chart.tooltip,
hoverPoint = chart.hoverPoint;
} catch (e) {
return;
}

On line 6894.

[apphacker]

Now there's a new bug. Apparently after removing series and then adding some more, and then removing those in order to add more (read: zoom several times), the graph refuses to add anymore series. I'm going to have to look into setting the data instead of removing and adding series.

[not]

Referencing to the primary issue of this topic (as the title says: "Removing series causes javascript on mouseout errors"), errors you were receiving were appearing because you wanted to delete the series in the middle of other actions it refers to. Precisely, I have the point events on my mind.

In your example on http://jsfiddle.net/Q8e8D/, there was a situation i will try to explain.
When you start selecting you can hover another points at once. Then, when you release the mouse button to confirm selected range, the selection event is being fired. In your event handler you remove series[0] while some point events are still enqueued to be fired up on onMouseOut. Then, after the series[0] have disappeared, those events are refering to it but it's already gone. This causes the error you had reported. It can be easily fixed by removing all points of the series[0] before removing it in your event handler, so events don't need to be called after series[0] removing.

Code: Select all

events: {
   "selection": function(e) {
      e.preventDefault();
      this.series[0].setData([]);
      this.series[0].remove();
   }
}

Another thing is that you don't need to use setTimeout really. Though you should take care of repeating series[0] remove, because the selection event is attached to the chart, not series, so it doesn't disappear with removed series. In this case you can just check if there is a series you want to remove:

Code: Select all

events: {
   "selection": function(e) {
      e.preventDefault();
      if (this.series.length) {
         this.series[0].setData([]);
         this.series[0].remove();
      }
   }
}

Sorry for such a long answer, but your posts are a little chaotic so I had to tidy all those thoughts up :)

[not]

I should also mention that you can see in that example that setting marker radius in the point is totally ignored. It should not show big DOTS like that, it certainly didn't used to.

Added to tracker at: http://github.com/highslide-software/hi ... s/issue/44

[apphacker]

Thank you for your reply and sorry for my chaotic post. Can I prevent the other event with stopPropagation?

Thanks! I've solved this problem by simply destroying the graph and recreating it whenever one zooms in now. :/

[not]

stopPropagation() is the part of jQuery => http://api.jquery.com/event.stopPropagation/

You said you destroy the chart on selection event. I'm just curious: is there anything wrong with my solution, so you've decided not to only remove series like I had suggested? I'm asking because this is a nice future you're trying to implement. It would be useful for others if it turns out it can work smoothly this way. I can imagine it's a kind of auto completion with charts instead of words.

[apphacker]

I implemented my solution before I saw yours. I have not tried your solution although I'm a little worried about creating and destroying graphs. If it turns out to be bad to create graphs all the time then I may have to look at something else. Your solution seems like it could work but it would require rewriting what I have written now. I'm implementing a drilldown as explained here: http://www.highcharts.com/studies/drilldown.htm Except instead of using setData I was removing and adding series. I do this because this way it allows me to reuse the code that sets the series data when the user selects different graphs to look at. In retrospect it might have been better to use setData from the beginning.