1

Im trying to implement a sunburst chart where i have two different data sources. I have an example of what im trying to achive in the below codesandbox.

https://codesandbox.io/s/pedantic-visvesvaraya-1vsoh?fontsize=14&hidenavigation=1&theme=dark

Im not sure if this is the right way to implement this. Please correct me if im wrong. The datasource changes the first time, but doesnt work the second time. Also, i noticed that when i drill down with one data source and then change the data source to another one(without pressing back button), it errors out and acts weird.

Any kind of help would be much appreciated. Do let me know if you need more info. Thanks in advance!

Anand
  • 13
  • 5

1 Answers1

0

Highcharts for performance modify the original data array, so for example return the data from a function to create a deep copy of data for every update.

To prevent the problem with drilldown use an internal drillUp method to go back to the highest level before changing the data.

getDataSource1 = () => [ ... ];
getDataSource2 = () => [ ... ];

...

doDrillUp(){
    const chart = this.chart;
    if (chart) {
        const series = chart.series[0] as any;
        const mainRootNode = series.tree.children[0].id;

        while (series.rootNode !== mainRootNode) {
            series.drillUp();
        }
    }
}

changeData1() {
    this.doDrillUp();
    this.sunburstData = this.getDataSource1();
    this.loadChart(); 
}

changeData2() {
    this.doDrillUp();
    this.sunburstData = this.getDataSource2();
    this.loadChart();
}

Live demo: https://codesandbox.io/s/clever-fog-1x84b?file=/src/app/sunburst/sunburst.component.ts

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Codesandbox is not working. Im not able to switch data sources. Can you check and let me know? – Anand Aug 21 '20 at 15:15
  • Hi @Anand, Yes, you are right - the condition in while loop is wrong. Please check this one: https://codesandbox.io/s/headless-leaf-7ddog?file=/src/app/sunburst/sunburst.component.ts Sorry for the inconvenience. – ppotaczek Aug 22 '20 at 14:06
  • data source is changing properly.. but drillup and reload doesnt happen at the first click. Guess the levels are not being reset. Thanks anyway. I solved it by recreating the chart each time. – Anand Aug 24 '20 at 06:19
  • That is right, you need to call the `doDrillUp()` method multiple times, depending on the drilldown level. – ppotaczek Aug 25 '20 at 17:30