New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Arearange series is not visible on some zoom levels #6985

Closed
simdevmon opened this Issue Jul 20, 2017 · 19 comments

Comments

Projects
None yet
4 participants
@simdevmon

simdevmon commented Jul 20, 2017

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:
2017-07-20_15h43_15

After zoom in one series is not visible anymore, but tooltips are still there:
2017-07-20_15h43_45

After zoom in further the series becomes visible again:
2017-07-20_15h43_58

Affected browser(s)

Chrome 59

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented Jul 21, 2017

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

This comment has been minimized.

Contributor

KacperMadej commented Oct 23, 2017

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

This comment has been minimized.

Contributor

KacperMadej commented Oct 23, 2017

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 KacperMadej removed the Bug label Oct 23, 2017

@simdevmon

This comment has been minimized.

simdevmon commented Oct 23, 2017

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

This comment has been minimized.

Contributor

KacperMadej commented Oct 23, 2017

@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

This comment has been minimized.

simdevmon commented Oct 24, 2017

@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

This comment has been minimized.

Contributor

KacperMadej commented Oct 24, 2017

@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

This comment has been minimized.

simdevmon commented Oct 24, 2017

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

This is my data after loading
2017-10-24_16h48_51

When I zoom in and reset the zoom afterwards it looks like this:
2017-10-24_16h49_24

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 KacperMadej reopened this Oct 30, 2017

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented Oct 30, 2017

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

@simdevmon

This comment has been minimized.

simdevmon commented Nov 6, 2017

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

This comment has been minimized.

Contributor

KacperMadej commented Nov 6, 2017

@simdevmon
Yes, any live demo will work fine.

@simdevmon

This comment has been minimized.

simdevmon commented Nov 10, 2017

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

2017-11-10_11h48_46

2017-11-10_11h48_56

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

@KacperMadej

This comment has been minimized.

Contributor

KacperMadej commented Nov 13, 2017

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 pawelfus added Bug and removed Enhancement labels Nov 13, 2017

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Nov 13, 2017

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

@pawelfus pawelfus self-assigned this Nov 13, 2017

@simdevmon

This comment has been minimized.

simdevmon commented Nov 13, 2017

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

@TorsteinHonsi

This comment has been minimized.

Collaborator

TorsteinHonsi commented Dec 18, 2017

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

This comment has been minimized.

Contributor

pawelfus commented Dec 18, 2017

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

This comment has been minimized.

Collaborator

TorsteinHonsi commented Dec 19, 2017

It looks like a new one...

@pawelfus

This comment has been minimized.

Contributor

pawelfus commented Dec 19, 2017

Reported as #7557

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment