0

I would like to know the best approach to create a drill-down sunburst partition with Highcharts? My initial approach was to render all Series, and change the series on the fly according to the selected one (hiding the inner series and changing the size/innersize of the remaining).

But for donut pies im not able to hide them, i took the working sample for a pie and modified to donut to show you what do i mean: http://jsfiddle.net/abdPj/

var chart = new Highcharts.Chart({
    chart: {
        type : 'pie',
        renderTo: 'container'
    },

    xAxis: {
    },

    series: [{
        size: '30%',
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }, {
        innerSize: '35%',
        size: '60%',
        data: [129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4]        
    }]
});


// the button action
$button = $('#button');
$button.click(function() {
    var series = chart.series[0];

    if (series.visible) {
        series.hide();
        $button.html('Show series');
    } else {
        series.show();
        $button.html('Hide series');
    }

});

Also not 100% sure that the size and innerSize can be changed on the fly, do i have to redraw all visible series everytime?

VividD
  • 10,456
  • 6
  • 64
  • 111
dotmindlabs
  • 778
  • 1
  • 12
  • 35

2 Answers2

1

I think you want to use point.setVisible(boolean) for that, see example: http://jsfiddle.net/Fusher/abdPj/2/

Paweł Fus
  • 44,795
  • 3
  • 61
  • 77
  • Hi Pawel, thanks for the reply! I decided to use something similar to a breadth-first to get the levels for the series, after filtering it by the id of the slice. I know there are probably better ways but so far i came to something like this http://jsfiddle.net/4thwd/1/ , clicking on the center goes up, still working on it. Takk! – dotmindlabs Mar 26 '13 at 09:21
1

there is now a sunburst module that will do this for you http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/sunburst/

<script src="https://code.highcharts.com/modules/sunburst.js"></script>
user1758908
  • 146
  • 1
  • 11