Highcharts Demo

author(s): Torstein Hønsi

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

Click a wedge of the pie !

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Cases'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            },
            point: {
                events: {
                    click: function () {
                        drilldown(this.series.chart,this.name);
                    }
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'New',
            y: 61.41,
            sliced: true,
            selected: true
        }, {
            name: 'Open',
            y: 11.84
        }, {
            name: 'Closed',
            y: 10.85
        }]
    }],
    
    searchparams : {
    	"case-factory" : 111,
      "case-worker" : "fred"
    }
    
});



function drilldown (chart,params){
 	chart.userOptions.searchparams['case-status'] = params;
	
  alert('Pie Wedge: ' + params + '\nsearchparams:' + JSON.stringify(chart.userOptions.searchparams));
}