Sync Drilldown/drillup for multiple charts

[sylvain]

Hi,

I’m trying to synchronise multiple charts drilldown. This means that when a chart drilldown or drillup, then another chart drilldown or drillup synchronously.
The drill down is working fine, but the drillup is crashing with `Cannot set property 'length' of undefined` . I’m using HighchartReact.

I have made a sample: https://codesandbox.io/s/controlled-dri ... =/demo.jsx
(Click a column to drilldown, then click back to button to drillup and see error)

I also tried to used point.doDrilldown() with no real success.

Could you advise what is the recommended way to achieve this goal or what am I doing wrong?

thanks

[sebastian.h]

Hi,
Welcome to our forum and thanks for contacting us with your question!

I think there is a problem with React setup but I don't know why we get this error.
Try to simplify the example even more, and maybe then you can find a problem.

The official documentation that you can refer to is a few examples of how to use React in Highcharts.
https://github.com/highcharts/highcharts-react

And another example using event dropdown and drillup for synchronization, you can try to implement it in React.
https://jsfiddle.net/9am0srkq/

Let me know how are you doing with this.
Best regards.

[sylvain]

Hi,

thanks for your reposnse.

I have tried to reuse the demo fiddle you sent, without react, so the sample is stripped down as much as possible, however, i'm still have issues/questions:

1. Because I have a drilldown with multiple series, which the 'basic' drilldown does not support, I'm using addSingleSeriesDrilldown() and applyDrilldown().
(In order to get the drilldown to work, I hadd to move the chart.applyDrilldown() after the forEach loop, which I'm not sure why.)
But it also creates an error on drillUp() similar to my original error.
Adding point.doDrillDown() before applyDrillDown() seems to solve the error, but then I get another error on drillUp(). It is not clear how/why doDrillDown need to be combined with applyDrilldown()
See https://jsfiddle.net/5v1cf036/17/


2. I would like the user to be able to click ANY chart and the other charts will follow. however in the example you sent, if i add the event handler to the second chart, then you get an infinite loop, because the second drilldown will try to trigger a drilldown on the first chart again.
What would be the best way to detect that a drilldown has already occurred on a chart, so that the drilldown is not applied again?

Thanks for your help

[sebastian.h]

Hi,
Thanks for the detailed information.

Have a look at this example, I think it will be possible to do it in a similar way.
https://jsfiddle.net/BlackLabel/rft9hbL0/1/

If you need help with implementation we will work together with this.
Best regards.

[sylvain]

Hi thanks for the response,

however, I'm not sure how this can be applied to my issue with drilldowns/drillup.

If you could have a look at https://jsfiddle.net/cdr6Lba1/9/
(click drilldown and drillup multiple times and see console errors.)

thanks
Kind Regards

[sebastian.h]

Hi,
It will be this solution, but they still need to be customized.
http://jsfiddle.net/BlackLabel/18hnt3wv/

You can try to do something similar to this example:
https://stackblitz.com/edit/angular-khkm2o

Let me know how you are doing with this.
Best regards.

[sylvain]

Hi,

The first link you sent has an error on drilldown, due to infinite loop of drilldown.

The second link that you linked, , the angular example, is interesting. if my understand is correct, the state for "is the chart drilled" is managed manually i.e

Code: Select all

chart.options.chart.drilled = true;

In the end, due to my complex use case, I gave up using the drilldown module. If this help anyone, I found that it was easier to use the immutable property of HighchartReact and the drilldown state is managed by my application store.

Thanks for your help.
Kind regards
Sylvain

[sebastian.h]

Hi Sylvain,

Sorry, I saved a bad example, I changed it to the correct one in the previous post.
Yes, drill down is managed from the object options chart.drilled.

​If you have further inquiries, you may reach out to me at any time.
Best regards.