Pay drilldown
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Resumen'
},
xAxis: {
type: 'category'
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'Dispositivos',
colorByPoint: true,
data: [{
name: 'Smartphones',
y: 36,
drilldown: 'smartphones'
}, {
name: 'Tablets',
y: 3,
drilldown: 'tablets'
}]
}],
drilldown: {
series: [{
id: 'smartphones',
name: 'Dispositivos',
data: [
{name:'Apple', y:22, drilldown: 'apple_sm'},
{name:'Lanix', y:1, drilldown: 'lanix_sm'},
{name:'LG', y:2, drilldown: 'lg_sm'},
{name:'Motorola', y:2, drilldown: 'motorola_sm'},
{name:'Nokia', y:1, drilldown: 'nokia_sm'},
{name:'Samsung', y:8, drilldown: 'samsung_sm'}
]
}, {
id: 'tablets',
data: [
{name:'Apple', y:2, drilldown: 'apple_tab'},
{name:'Samsung', y:1, drilldown: 'samsung_tab'}
]
}, {
id: 'apple_sm',
data: [
{name:'IPHONE 4', y:4},
{name:'IPHONE 4S', y:2},
{name:'IPHONE 5', y:11},
{name:'IPHONE 5S GRIS 16GB', y:3},
{name:'IPHONE 5S GRIS 32GB', y:2}
]
}
, {
id: 'lanix_sm',
...