terazus
Posts: 4
Joined: Sun Mar 21, 2021 5:55 pm

Manual drilldown in a sunburst

Hello I'm using a sunburst chart to represent an ontology in a vue application. It's setup with a vuetify treeview that can control which terms are selected and opened.
I want to be able to drilldown/drillUp the sunburst when a menu is opened or closed from the treeview. The opened tab identifiers are stored in a vuex state named openedTerms which my wrapper can access. I then setup a watcher on the openedTerms array that would manually trigger the drilldown (without redrawing the full graph) from click in the left panel.

Here is my watcher:

Code: Select all

watch: {
    openedTerms(newTerms) {
      if (newTerms.length > 0) {
        Highcharts.charts.forEach((chart) => {
          if (chart) {
            const drilldownPoint = chart.get('SRAO').points.find(point => point['drillId'] === newTerms[0]);
            drilldownPoint.doDrilldown()
            console.log(drilldownPoint)
          }
        })
      }
    }
  }
My issue is that the .doDrilldown() method does nothing. If you actually inspect drilldownPoint varibale, this is what you get:
Sans titre.png
Sans titre.png (80.88 KiB) Viewed 727 times
So the point is there (not a target issue) but there's no doDrilldown() method.
Any idea what I'm doing wrong ? I feel like I'm not accessing the right objects but I followed a simple example i found here: http://jsfiddle.net/048kne3c/
I don't understand why I don't have any method bound to my point object.

Best regards to the highchart team!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Manual drilldown in a sunburst

Hello,

The sunburst chart has its own drilldown, independent of the drilldown module you provided as an example.
For me it was not immediately obvious either.

Sunburst has its own drilldown and drillup methods, unfortunately, they are not documented yet.
In the demo, I showed how to use them.

Demo: https://jsfiddle.net/BlackLabel/9vn2qrwc/

Let me know if that was what you were looking for!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
terazus
Posts: 4
Joined: Sun Mar 21, 2021 5:55 pm

Re: Manual drilldown in a sunburst

Hello Michal,
Thank you for the answer as this is exactly what I was looking for :)

Another small question, how would you optimize a sunburst with a lot of points (700+) ? The animation at the top level fells a bit laggy and I can't use the boost module to run the graph on GPU if I'm being correct.

Best regards :)
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Manual drilldown in a sunburst

You're welcome!

As for the optimization of the chart, there is already a thread related to this topic: viewtopic.php?f=9&t=44815

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
terazus
Posts: 4
Joined: Sun Mar 21, 2021 5:55 pm

Re: Manual drilldown in a sunburst

You're a gem thx !
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Manual drilldown in a sunburst

I'm glad I could help :D

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”