Question
I am not able to go back to the original state of my charts after I have drilled down to the second level. Point to be noted is that I was able to do that when I was not generating multiple columns(one for open and one for closed state), I was easily able to go back to the original state. This is my code:
https://stackoverflow.com/questions/15379112
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Team View</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories1 = ['January 2013','February 2013', 'March 2013']
name = 'Issues',
level = 0,
data = [{
y: 23,
color: colors[0],
drilldown: {
type: 'column',
name: 'Open issues for January 2013',
categories: ['A', 'B', 'C', 'D', 'E'],
level: 1,
data1: [3, 2, 4, 0, 1],
color: colors[4],
name1:'Closed issues for January 2013',
data2: [0, 0, 0, 0, 13],
color1: colors[5]
}},
{
y: 15,
color: colors[1],
drilldown: {
type: 'column',
name: 'Open issues for February 2013',
categories: ['A', 'B', 'C', 'D', 'E'],
level: 1,
data1: [4, 0, 7, 0, 1],
color: colors[4],
name1:'Closed issues for February 2013',
data2: [0, 0, 0, 0, 3],
color1: colors[5]
}},
{
y: 2,
color: colors[2],
drilldown: {
type: 'column',
name: 'Open issues for March 2013',
categories: ['A', 'B', 'C', 'D', 'E'],
level: 1,
data1: [1, 0, 1, 0, 0],
color: colors[4],
name1: 'Closed issues for March 2013',
data2: [0, 0, 0, 0, 0],
color1: colors[5]
}}];
function setChart(name, categories, data, color, level, type) {
console.log(name,categories,data,color,level,type);
chart.xAxis[0].setCategories(categories);
while(chart.series.length>0){
chart.series[0].remove(true);
}
for (var i=0;i<data.length;i++){
chart.addSeries({
color: color[i],
name: name[i],
level: level,
data: data[i],
type: type
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: "#F7F7F7"
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: categories1,
labels: {
rotation: -45,
y: 10,
x: 10,
align: "right"
}
},
yAxis: {
title: {
text: 'Issues'
},
min: 0
},
credits: {
enabled: false
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) {
setChart([drilldown.name,drilldown.name1], drilldown.categories, [drilldown.data1,drilldown.data2], [drilldown.color,drilldown.color1], drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories1, data, null, level, 'line');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y + 'Issues';
}
}
},
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
setChart(name, categories1, data, null, level, 'line');
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y + 'Issues';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = '';
switch (this.series.options.level) {
case 0:
s = this.x + ': ' + this.y + 'Issues';
break;
case 1:
s = this.x + ': ' + this.y + 'Issues';
break;
}
return s;
}
},
series: [{
name: name,
level: level,
data: data,
color: colors[0]}],
exporting: {
enabled: false
}
},
function(chart){
console.log(chart);
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Please let me know what am I doing wrong as the original line graph is not displayed on returning to original state.
Solution
You have two main erros in your code, both in that line:
setChart(name, categories1, data, null, level, 'line');
Instead of null you should us any array of colors, the same applies for data - should be an array of series, working code example:
setChart(name, categories1, [data], colors, level, 'line');
setChart(name, categories1, [data], ['blue','red','green'], level, 'line');
Working example: http://jsfiddle.net/JaTjk/11/
