Arearange series is not visible on some zoom levels

[simdevmon]

Expected behaviour

When I have a series without data gaps, I would expect the series to be visible on all zoom levels.

Actual behaviour

• On initial view the series is visible
• When I zoom in at a certain level, the series becomes invisible but tooltip is still working
• When I zoom in further the series becomes visible again

Live demo with steps to reproduce

http://jsfiddle.net/simdevmon/s2my775k/1/

On initial view everything looks ok:

After zoom in one series is not visible anymore, but tooltips are still there:

After zoom in further the series becomes visible again:

Affected browser(s)

Chrome 59

[KacperMadej]

Hi,

Thank you for reporting about the problem.

Internal note: The missing series has line path build out of M x y - it lacks L and high equals low, so range in between equals zero.

[KacperMadej]

Hi,

Thank you for reporting about the problem.

Internal note: The missing series has line path build out of M x y - it lacks L and high equals low, so range in between equals zero.

[KacperMadej]

The problem seems to be coming from different point interval for multiple series and setting gapSize at the same time.

Minimal demos:

1. http://jsfiddle.net/BlackLabel/cjvrcnm8/3/ - second sereis (black) is hidden, try to hover points to see that they are there
2. http://jsfiddle.net/BlackLabel/cjvrcnm8/2/ - very strange behavior. Gaps are between points, so maybe the problem is directly connected to gapSize and data used (?)

[KacperMadej]

The problem seems to be coming from different point interval for multiple series and setting gapSize at the same time.

Minimal demos:

1. http://jsfiddle.net/BlackLabel/cjvrcnm8/3/ - second sereis (black) is hidden, try to hover points to see that they are there
2. http://jsfiddle.net/BlackLabel/cjvrcnm8/2/ - very strange behavior. Gaps are between points, so maybe the problem is directly connected to gapSize and data used (?)

[KacperMadej]

After further investigation. The gapSize is working correctly based on grouped data that should be aligned for chart - as explained here, so that's why the line was missing in some cases.

I am closing the issue, but will reopen in case of new info.

[KacperMadej]

After further investigation. The gapSize is working correctly based on grouped data that should be aligned for chart - as explained here, so that's why the line was missing in some cases.

I am closing the issue, but will reopen in case of new info.

[simdevmon]

Thank you for the update. I still do not exactly understand why the data series is not visible at some zoom levels. I have the following situation:

• I have multiple data series with different intervals (e.g. 1min, 10min, 1 hour, 2 hours, ...) in one chart
• High and low value in raw data is always the same
• I want to display gaps if data is missing. E.g. in a 10min series if I have 10:00, 10:10, 10:30, 10:40, ... there should be a gap between 10:10 and 10:30, because 10:20 is missing)
• Since there can be a lot of data (> 1 million) data grouping should be used.

How is the current behavoir for gaps in data grouping? What would I need to change in my current configuration to have two different options:

• Draw point for data group if at least one value is present
• Show gap for data group if at least one value is missing

[simdevmon]

Thank you for the update. I still do not exactly understand why the data series is not visible at some zoom levels. I have the following situation:

• I have multiple data series with different intervals (e.g. 1min, 10min, 1 hour, 2 hours, ...) in one chart
• High and low value in raw data is always the same
• I want to display gaps if data is missing. E.g. in a 10min series if I have 10:00, 10:10, 10:30, 10:40, ... there should be a gap between 10:10 and 10:30, because 10:20 is missing)
• Since there can be a lot of data (> 1 million) data grouping should be used.

How is the current behavoir for gaps in data grouping? What would I need to change in my current configuration to have two different options:

• Draw point for data group if at least one value is present
• Show gap for data group if at least one value is missing

[KacperMadej]

@simdevmon
Series type doesn't matter that much - the same problem is visible with line series: http://jsfiddle.net/BlackLabel/cjvrcnm8/4/

In case of multiple series dataGrouping is supposed to be aligned, so that all series on one axis have one data grouping in common. dataGrouping + gapSize is used to calculate gaps in case of grouped data, so if one series has denser points, then another will be full of gaps. Markers are not visible, so series looks like if it weren't there, but please check the demo below with markers enabled:
http://jsfiddle.net/BlackLabel/cjvrcnm8/5/

[KacperMadej]

@simdevmon
Series type doesn't matter that much - the same problem is visible with line series: http://jsfiddle.net/BlackLabel/cjvrcnm8/4/

In case of multiple series dataGrouping is supposed to be aligned, so that all series on one axis have one data grouping in common. dataGrouping + gapSize is used to calculate gaps in case of grouped data, so if one series has denser points, then another will be full of gaps. Markers are not visible, so series looks like if it weren't there, but please check the demo below with markers enabled:
http://jsfiddle.net/BlackLabel/cjvrcnm8/5/

[simdevmon]

@KacperMadej I understand the reason now, but I still have no solution for my use case. What I would need is an individual data grouping for each series and not a common one.

The intervals can be very different e.g. I have 1min temperature values and 1 month average. If I look at the data for one year the 1min series has > 500k values whereas the monthly series has only 12 values. Markers are no solution for me. In the example above they would be hardly visible and if there is no gap, they should be connected with a line.

The current behavior was hardly comprehensible for me and would be also confusing for users. Since the values should be comparable, one axis for each series is also not possible. Do you have any idea how I can achieve the desired behavoir?

[simdevmon]

@KacperMadej I understand the reason now, but I still have no solution for my use case. What I would need is an individual data grouping for each series and not a common one.

The intervals can be very different e.g. I have 1min temperature values and 1 month average. If I look at the data for one year the 1min series has > 500k values whereas the monthly series has only 12 values. Markers are no solution for me. In the example above they would be hardly visible and if there is no gap, they should be connected with a line.

The current behavior was hardly comprehensible for me and would be also confusing for users. Since the values should be comparable, one axis for each series is also not possible. Do you have any idea how I can achieve the desired behavoir?

[KacperMadej]

@simdevmon
Currently there's no such option to get the chart that you need. I'm marking this as an enhancement suggestion. I also think that it should be at least possible for a user to select which way should the chart work.

For now you could use this wrapper: http://jsfiddle.net/BlackLabel/j08g1roq/1/
It calculates closestPointRange based on series groupedXData. If this will work fine for you I could prepare a better wrapper - less code, add option to select default or enhanced way of gaps calculations, etc., but first please test this solution and let me know if this is acceptable solution for you.

@pawelfus @TorsteinHonsi What's your insight on the case? If this will work, would that be a good enhancement for the core function, an idea for a plugin or something else?

[KacperMadej]

@simdevmon
Currently there's no such option to get the chart that you need. I'm marking this as an enhancement suggestion. I also think that it should be at least possible for a user to select which way should the chart work.

For now you could use this wrapper: http://jsfiddle.net/BlackLabel/j08g1roq/1/
It calculates closestPointRange based on series groupedXData. If this will work fine for you I could prepare a better wrapper - less code, add option to select default or enhanced way of gaps calculations, etc., but first please test this solution and let me know if this is acceptable solution for you.

@pawelfus @TorsteinHonsi What's your insight on the case? If this will work, would that be a good enhancement for the core function, an idea for a plugin or something else?

[simdevmon]

@KacperMadej Thank you for the workaround. I tried it, but I noticed many side effects and errors.

This is my data after loading

When I zoom in and reset the zoom afterwards it looks like this:

If I do any zoom operation after that I get all kinds of errors

core.js:1350 ERROR TypeError: Cannot read property 'isSVG' of undefined
    at a.SVGElement.destroy (http://localhost:4200/scripts.bundle.js:11313:483)
    at p.destroyElements (http://localhost:4200/scripts.bundle.js:11521:284)
    at p.generatePoints (http://localhost:4200/scripts.bundle.js:11537:49)
    at p.<anonymous> (http://localhost:4200/scripts.bundle.js:11661:444)
    at p.a.(anonymous function) (http://localhost:4200/scripts.bundle.js:11279:235)
    at p.b.generatePoints (http://localhost:4200/scripts.bundle.js:11672:369)
    at p.translate (http://localhost:4200/scripts.bundle.js:11538:164)
    at p.<anonymous> (http://localhost:4200/scripts.bundle.js:11843:407)
    at p.a.(anonymous function) [as translate] (http://localhost:4200/scripts.bundle.js:11279:235)
    at p.translate (http://localhost:4200/scripts.bundle.js:11803:518)
defaultErrorLogger @ core.js:1350
ErrorHandler.handleError @ core.js:1411
next @ core.js:5373
schedulerFn @ core.js:4220
SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
SafeSubscriber.next @ Subscriber.js:186
Subscriber._next @ Subscriber.js:127
Subscriber.next @ Subscriber.js:91
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4200
(anonymous) @ core.js:4648
ZoneDelegate.invoke @ zone.js:392
Zone.run @ zone.js:142
NgZone.runOutsideAngular @ core.js:4574
onHandleError @ core.js:4648
ZoneDelegate.handleError @ zone.js:396
Zone.runTask @ zone.js:195
ZoneTask.invokeTask @ zone.js:499
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
core.js:1350 ERROR TypeError: Cannot read property 'plotX' of undefined
    at scripts.bundle.js:11541
    at Array.filter (<anonymous>)
    at a.grep (scripts.bundle.js:11287)
    at p.getValidPoints (scripts.bundle.js:11541)
    at scripts.bundle.js:11557
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4617)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at ZoneTask.invokeTask (zone.js:499)

I would really appreciate it, if this use case could be supported within the core function of Highcharts. In measuring technology it is not uncommon to have different intervals of the same measuring (which can also represent different aggregations such as minimum, maximum, average, percentile, ...).

Edit: Can you reopen this issue again?

[simdevmon]

@KacperMadej Thank you for the workaround. I tried it, but I noticed many side effects and errors.

This is my data after loading

When I zoom in and reset the zoom afterwards it looks like this:

If I do any zoom operation after that I get all kinds of errors

core.js:1350 ERROR TypeError: Cannot read property 'isSVG' of undefined
    at a.SVGElement.destroy (http://localhost:4200/scripts.bundle.js:11313:483)
    at p.destroyElements (http://localhost:4200/scripts.bundle.js:11521:284)
    at p.generatePoints (http://localhost:4200/scripts.bundle.js:11537:49)
    at p.<anonymous> (http://localhost:4200/scripts.bundle.js:11661:444)
    at p.a.(anonymous function) (http://localhost:4200/scripts.bundle.js:11279:235)
    at p.b.generatePoints (http://localhost:4200/scripts.bundle.js:11672:369)
    at p.translate (http://localhost:4200/scripts.bundle.js:11538:164)
    at p.<anonymous> (http://localhost:4200/scripts.bundle.js:11843:407)
    at p.a.(anonymous function) [as translate] (http://localhost:4200/scripts.bundle.js:11279:235)
    at p.translate (http://localhost:4200/scripts.bundle.js:11803:518)
defaultErrorLogger @ core.js:1350
ErrorHandler.handleError @ core.js:1411
next @ core.js:5373
schedulerFn @ core.js:4220
SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
SafeSubscriber.next @ Subscriber.js:186
Subscriber._next @ Subscriber.js:127
Subscriber.next @ Subscriber.js:91
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4200
(anonymous) @ core.js:4648
ZoneDelegate.invoke @ zone.js:392
Zone.run @ zone.js:142
NgZone.runOutsideAngular @ core.js:4574
onHandleError @ core.js:4648
ZoneDelegate.handleError @ zone.js:396
Zone.runTask @ zone.js:195
ZoneTask.invokeTask @ zone.js:499
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
core.js:1350 ERROR TypeError: Cannot read property 'plotX' of undefined
    at scripts.bundle.js:11541
    at Array.filter (<anonymous>)
    at a.grep (scripts.bundle.js:11287)
    at p.getValidPoints (scripts.bundle.js:11541)
    at scripts.bundle.js:11557
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4617)
    at ZoneDelegate.invokeTask (zone.js:424)
    at Zone.runTask (zone.js:192)
    at ZoneTask.invokeTask (zone.js:499)

I would really appreciate it, if this use case could be supported within the core function of Highcharts. In measuring technology it is not uncommon to have different intervals of the same measuring (which can also represent different aggregations such as minimum, maximum, average, percentile, ...).

Edit: Can you reopen this issue again?

[KacperMadej]

@simdevmon
Please add a live demo in JSFiddle for testing and debugging.

[KacperMadej]

@simdevmon
Please add a live demo in JSFiddle for testing and debugging.

[simdevmon]

Would it be also fine if I try to reproduce this with Plunker (https://plnkr.co/), since I can easier bootstrap my Angular application there.

[simdevmon]

Would it be also fine if I try to reproduce this with Plunker (https://plnkr.co/), since I can easier bootstrap my Angular application there.

[KacperMadej]

@simdevmon
Yes, any live demo will work fine.

[KacperMadej]

@simdevmon
Yes, any live demo will work fine.

[simdevmon]

I have created a demo now where the problem can be reproduced: http://plnkr.co/edit/7cPdbH44fX9SXcGS11sf?p=preview

If you zoom in several times you see that the dots do not really fit. I put your workaround into highcharts.patches.js

[simdevmon]

I have created a demo now where the problem can be reproduced: http://plnkr.co/edit/7cPdbH44fX9SXcGS11sf?p=preview

If you zoom in several times you see that the dots do not really fit. I put your workaround into highcharts.patches.js

[KacperMadej]

The markers issue is visible (markers needs to be enabled) in a simple demo: http://jsfiddle.net/BlackLabel/y1hhy8t1/
Steps: zoom into the chart and previous markers are not cleared

Maybe @pawelfus knows more about markers in arearange series?

[KacperMadej]

The markers issue is visible (markers needs to be enabled) in a simple demo: http://jsfiddle.net/BlackLabel/y1hhy8t1/
Steps: zoom into the chart and previous markers are not cleared

Maybe @pawelfus knows more about markers in arearange series?

[pawelfus]

Thanks for the info. It looks like dense markers cause the issue. For now, please disable them: http://jsfiddle.net/y1hhy8t1/1/

[pawelfus]

Thanks for the info. It looks like dense markers cause the issue. For now, please disable them: http://jsfiddle.net/y1hhy8t1/1/

[simdevmon]

Thank you for the update. For my use-case the user can show and hide the markers with a button.

[simdevmon]

Thank you for the update. For my use-case the user can show and hide the markers with a button.

[TorsteinHonsi]

Thanks for the fix! There's also an issue on the boosted arearange.

• Zoom in until you see the markers
• Reset zoom
• => JS error.

Didn't have time to debug it yet, but maybe it is related.

[TorsteinHonsi]

Thanks for the fix! There's also an issue on the boosted arearange.

• Zoom in until you see the markers
• Reset zoom
• => JS error.

Didn't have time to debug it yet, but maybe it is related.

[pawelfus]

Thanks!

It looks like problem with not cleared point from chart.hoverPoints. This is what actually happens:

• zoom in until we see markers
• reset zoom and don't move mouse
• you can still observe markers from previously zoomed range (shouldn't that be cleaned in reset zoom?)
• original points (series.points) are correct, but in chart.hoverPoints we still have a point from the old range - but point.graphic was destroyed (nullified points). Interesting part: that marker is still visible..

Should I reopen this ticket or create a new one for the issue you mentioned?

[pawelfus]

Thanks!

It looks like problem with not cleared point from chart.hoverPoints. This is what actually happens:

• zoom in until we see markers
• reset zoom and don't move mouse
• you can still observe markers from previously zoomed range (shouldn't that be cleaned in reset zoom?)
• original points (series.points) are correct, but in chart.hoverPoints we still have a point from the old range - but point.graphic was destroyed (nullified points). Interesting part: that marker is still visible..

Should I reopen this ticket or create a new one for the issue you mentioned?

[TorsteinHonsi]

It looks like a new one...

[TorsteinHonsi]

It looks like a new one...

[pawelfus]

Reported as #7557

[pawelfus]

Reported as #7557