Develop Reference

Highcharts drill down - previous column stays even after the drilldown graphs are displayed

I am using Highcharts to create a stacked column drilldown graph on my rails project.
http://jsfiddle.net/stephanevanraes/s5JqN/3/
It works fine in the jsfiddle above.
But when I use the below script in my project, the previous column stays as shown in the screenshot below.
How to remove the previous column from the graph. Could anyone help?
<script>
$(function () {
// Create the chart
$('#leftnav').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
style: {
color: 'white',
textShadow: '0 0 2px black, 0 0 2px black'
}
},
stacking: 'normal'
}
},
series: [{
name: 'Things',
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}, {
name: 'Things2',
data: [{
name: 'Animals',
y: 1,
drilldown: 'animals2'
}, {
name: 'Fruits',
y: 5,
drilldown: 'fruits2'
}, {
name: 'Cars',
y: 2,
drilldown: 'cars2'
}]
}, {
name: 'Things3',
stack: 1,
data: [{
name: 'Animals',
y: 8,
drilldown: 'animals3'
}, {
name: 'Fruits',
y: 7,
drilldown: 'fruits3'
}, {
name: 'Cars',
y: 10,
drilldown: 'cars3'
}]
}],
drilldown: {
activeDataLabelStyle: {
color: 'white',
textShadow: '0 0 2px black, 0 0 2px black'
},
series: [{
id: 'animals',
name: 'Animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
name: 'Fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
name: 'Cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
},{
id: 'animals2',
name: 'Animals2',
data: [
['Cats', 3],
['Dogs', 5],
['Cows', 6],
['Sheep', 2],
['Pigs', 2]
]
}, {
id: 'fruits2',
name: 'Fruits2',
data: [
['Apples', 1],
['Oranges', 5]
]
}, {
id: 'cars2',
name: 'Cars2',
data: [
['Toyota', 2],
['Opel', 3],
['Volkswagen', 2]
]
},{
id: 'animals3',
name: 'Animals3',
stack: 1,
data: [
['Cats', 2],
['Dogs', 3],
['Cows', 1],
['Sheep', 1],
['Pigs', 1]
]
}, {
id: 'fruits3',
name: 'Fruits3',
stack: 1,
data: [
['Apples', 4],
['Oranges', 3]
]
}, {
id: 'cars3',
name: 'Cars3',
stack: 1,
data: [
['Toyota', 4],
['Opel', 3],
['Volkswagen', 3]
]
}]
}
})
});
</script>

Get data in pie chart after click on column chart

I have been working on charts, My requirement is when i click on column i want to display data in pie chart format. Initially its working good means i am getting static data in the column chart, But i want to display data in pie chart like circle. i will place code which is working good in column format. But i want it in pie format. Initially column should be in column format, When i click on any on the column data should be display in pie format.
Thanks in advance
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
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: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// trying to get data in pie chart after click on any of the column
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
{
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
},
// end
{
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
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: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// second drill down
{
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
}, {
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>

Can HighChart support multiple graph types in a single drilldown?

From the following fiddle we can implement drilldown in highCharts :http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
Code:
$(function () {
// Create the chart
$('#container').highcharts({
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]
]
}]
}
});
});
But my requirement is when you perform a drill down, I need to show multiple charts showing same data, for example a spline as well as bar chart. I tried a lots of trial and error, but no luck. Is it possible to implement this kind of feature with HighCharts or any other jQuery plugins? Kindly share your thoughts.
My existing graph with HighCharts :
It's combination of bar and spline.
When I click a bar, this should result in the following drilldown view:
Please help to achieve this.

How to get current drilldown's id in Highcharts

I have a drilldown Highcharts graph as follow:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
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]
]
}]
}
});
You can have a look at it here:JSFiddle link.
When user selects a column and the drilldown chart is displayed, how do I get the current drilldown's id and data?
Thanks in advance.

You can do that by using highcharts events:drilldown trigger.
by adding this in the chart section
chart: {
type: 'column',
events: {
drilldown: function (e) {
console.log(e.seriesOptions.id);
console.log(e.seriesOptions.data);
}
}
},
The complete demo is here
Demo

Change title when drilldown in Highcharts

I'm looking for a way to show a info text in Highcharts when using drilldowns. I want a text that tells my visitors that another chart has been showed up. A title for example:
"New chart - more about Animals"
http://jsfiddle.net/6zYmJ/
Do you have any ideas how to do that?
$(function () {
// Create the chart
$('#container').highcharts({
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'
}]
}, {
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals2',
y: 5,
drilldown: 'animals2'
}, {
name: 'Fruits2',
y: 2,
drilldown: 'fruits2'
}, {
name: 'Cars2',
y: 4,
drilldown: 'cars2'
}]
}],
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]
]
},{
id: 'animals2',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits2',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars2',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
});

For example using drilldown and drillup events (API), a couple of variables and Chart.setTitle (API). Like this:
var defaultTitle = "Basic drilldown";
var drilldownTitle = "More about ";
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle + e.point.name });
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
}
}
},
title: {
text: defaultTitle
},
// ... more options
});
See this JSFiddle demonstration.