Basic Highcharts Bubble Drilldown - highcharts

Question

I'm new at Highcharts. I'm trying to create a Drilldown Bubble Chart.
I took the basic column drilldown as a starting point,
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
and edited it a bit, to get this,
http://jsfiddle.net/Slate_Shannon/kdwa9x7v/1/
$(function() {
$('#container').highcharts({
chart: {
type: 'bubble'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'linear'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
x: 4,
y: 5,
z: 10,
drilldown: 'animals'
}, {
name: 'Fruits',
x: 14,
y: 20,
z: 20,
drilldown: 'fruits'
}, {
name: 'Cars',
x: 8,
y: 9,
z: 7,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', x: 5, y: 9, z: 7],
['Dogs', x: 8, y: 8, z: 9],
['Cows', x: 1, y: 5, z: 2],
['Sheep', x: 4, y: 7, z: 2],
['Pigs', x: 4, y: 5, z: 7]
]
}, {
id: 'fruits',
data: [
['Apples', x: 2, y: 9, z: 6],
['Oranges', x: 6, y: 5, z: 1]
]
}, {
id: 'cars',
data: [
['Toyota', x: 2, y: 8, z: 7],
['Opel', x: 8, y: 2, z: 4],
['Volkswagen', x: 4, y: 4, z: 4]
]
}]
}
});
});
All I did was
change the chart type to "bubble",
add the x and z data,
change the xaxis to "linear"
And it doesn't work.
Can you see the problem?
Thanks much!
Good day.

Answer 1

The formatting of your drilldown data is incorrect, as hinted to in console. Currently you have:
data: [
['Cats', x: 5, y: 9, z:7],
['Dogs', x: 8, y: 8, z:9],
// ...
]
This is half way between an array declaration and a object declaration. I'd suggest switching to each item being an object, like this:
data: [
{ name: 'Cats', x: 5, y: 9, z:7 },
{ name: 'Dogs', x: 8, y: 8, z:9 },
// ...
]
Secondly, you haven't included the required Highcharts-more module which includes the bubble chart type. You can do that like this:
<script src="https://code.highcharts.com/highcharts-more.js"></script>
See this updated JSFiddle for a basic example of how it can work.