moja
Reputation: 95
High Charts Stacked column with drilldown not working properly
I am working on a highcharts stacked column with column drilldown graph. I based what I am doing in this example: http://jsfiddle.net/NULTY/753/
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
name = 'Browser brands',
level = 0,
data = [{
y: 55.11,
color: colors[0],
drilldown: {
type: 'pie',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}, {
y: 21.63,
color: colors[1],
drilldown: {
type: 'pie',
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
type: 'pie',
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
type: 'pie',
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
type: 'pie',
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
}],
data2 = [{
y: 21.63,
color: colors[1],
drilldown: {
name: 'Firefox versions',
categories: ['Firefox 3.6', 'Firefox 4.0', 'Firefox 3.5', 'Firefox 3.0', 'Firefox 2.0'],
data: [13.52, 5.43, 1.58, 0.83, 0.20],
color: colors[1]
}
}, {
y: 11.94,
color: colors[2],
drilldown: {
name: 'Chrome versions',
categories: ['Chrome 10.0', 'Chrome 11.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 12.0',
'Chrome 6.0', 'Chrome 5.0', 'Chrome 7.0'],
data: [9.91, 0.50, 0.36, 0.32, 0.22, 0.19, 0.12, 0.12],
color: colors[2]
}
}, {
y: 7.15,
color: colors[3],
drilldown: {
name: 'Safari versions',
categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
'Safari 3.1', 'Safari 41'],
data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14],
color: colors[3]
}
}, {
y: 2.14,
color: colors[4],
drilldown: {
name: 'Opera versions',
categories: ['Opera 11.x', 'Opera 10.x', 'Opera 9.x'],
data: [1.65, 0.37, 0.12],
color: colors[4]
}
},{
y: 55.11,
color: colors[0],
drilldown: {
type: 'column',
name: 'MSIE versions',
categories: ['MSIE 8.0', 'MSIE 6.0', 'MSIE 7.0', 'MSIE 9.0'],
level: 1,
data: [11,10.85, 7.35, 2.41],
color: colors[0]
}
}];
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
console.log("data:")
console.log(data)
var dataLen = data.length;
console.log("dataLen: " + dataLen)
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
}
for(var i = 0; i< dataLen; i++){
console.log("hello world!")
console.log(data[i])
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Browser market share, April, 2011'
},
subtitle: {
text: 'Click the columns to view versions. Click again to view brands.'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
},
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y +'%';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point, s = '';
switch (this.series.options.level) {
case 0:
s = 'row 1 level 1 instructions<br/>';
s += ' row 2 level 1 instructions';
break;
case 1:
s = 'row 1 level 2 instructions <br/>';
s += ' row 2 level 2 instructions';
break;
case 2:
s = 'row 1 level 3 instructions<br/>';
s += 'row 2 level 3 instructions';
break;
case 3:
s = 'trial<br/>';
s += 'trial';
}
return s;
}
},
series: [{
name: name+" 1",
level: level,
data: data,
color: 'white'
},{
name: name,
level: level,
data: data2,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
So far, what I have working on is can be found here: http://jsfiddle.net/NULTY/872/
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['Store A', 'Store B'],
name = 'Product Family',
level = 0,
data = [{
"y": 2849.25,
"TotalLocationSalesQuantity": 3,
"color": colors[0],
"drilldown": {
"type": "column",
"family": "Jacket",
"name": "Jacket Stock Breakdown",
"categories": [
"3229"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 2849.25,
"TotalStockSalesQuantity": 3
}
],
"color": "#2b908f"
}
},
{
"y": 7798,
"TotalLocationSalesQuantity": 8,
"color": "#90ee7e",
"drilldown": {
"type": "column",
"family": "Jacket",
"name": "Jacket Stock Breakdown",
"categories": [
"3229",
"3255"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 3799,
"TotalStockSalesQuantity": 4
},
{
"name": "3255",
"y": 3999,
"TotalStockSalesQuantity": 4
}
],
"color": "#90ee7e"
}
}],
data2 = [{
"y": 21944.75,
"TotalLocationSalesQuantity": 21,
"color": "#f45b5b",
"drilldown": {
"type": "column",
"family": "Pants",
"name": "Pants Stock Breakdown",
"categories": [
"3246",
"3277"
],
"level": 1,
"data": [
{
"name": "3246",
"y": 1999.5,
"TotalStockSalesQuantity": 2
},
{
"name": "3277",
"y": 19945.25,
"TotalStockSalesQuantity": 19
}
],
"color": "#f45b5b"
}
},
{
"y": 13646.75,
"TotalLocationSalesQuantity": 13,
"color": "#7798BF",
"drilldown": {
"type": "column",
"family": "Pants",
"name": "Pants Stock Breakdown",
"categories": [
"3277"
],
"level": 1,
"data": [
{
"name": "3277",
"y": 13646.75,
"TotalStockSalesQuantity": 13
}
],
"color": "#7798BF"
}
}],
data3 = [{
"y": 4748.75,
"TotalLocationSalesQuantity": 5,
"color": "#aaeeee",
"drilldown": {
"type": "column",
"family": "Shorts",
"name": "Shorts Stock Breakdown",
"categories": [
"3229"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 4748.75,
"TotalStockSalesQuantity": 5
}
],
"color": "#aaeeee"
}
},
{
"y": 6398,
"TotalLocationSalesQuantity": 8,
"color": "#ff0066",
"drilldown": {
"type": "column",
"family": "Shorts",
"name": "Shorts Stock Breakdown",
"categories": [
"3229",
"3259"
],
"level": 1,
"data": [
{
"name": "3229",
"y": 3799,
"TotalStockSalesQuantity": 4
},
{
"name": "3259",
"y": 2599,
"TotalStockSalesQuantity": 4
}
],
"color": "#ff0066"
}
}]
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
}
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Sales breakdown'
},
subtitle: {
text: 'Click the columns to view stock number breakdown'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total Sales Amount'
}
},
plotOptions: {
column: {
stacking: 'normal',
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
this.series.chart.setTitle({
text: drilldown.name
});
setChart(drilldown.name, drilldown.categories, [drilldown.data], drilldown.color, drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories, [data,data2,data3], null, level, 'column');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return "P " + this.y;
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point, s = '';
switch (this.series.options.level) {
case 0:
s = 'this row level 1 units: <b>' + point.TotalLocationSalesQuantity + '</b><br/>';
break;
case 1:
s = 'this row level 2 units: <b>' + point.TotalLocationSalesQuantity + '</b><br/>';
break;
// case 2:
// s = 'row 1 level 3 instructions<br/>';
// break;
}
return s;
}
},
series: [{
name: name+" 1",
level: level,
data: data,
color: 'white'
},{
name: name + "2",
level: level,
data: data2,
color: 'white'
},{
name: name + "3",
level: level,
data: data3,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
What I want to do in this case is have two columns with three stacks each column on the first level and when a specific level 1 stack portion is clicked, a column graph (level 2) showing what stock numbers (ex. 3229, 3255, etc.) comprise the first potion will appear.
For example, if row 1 of Store A (P 2849.25) is clicked, a single column graph with data P2849.25 shall be shown. Likely, when row 3 of Store B (P 6398) is clicked, column graphs with data P3799 and P2599 should be shown. Illustrations of the desired sample output are shown
However, I am getting some random data when the rows of level 1 data is clicked. While in level 2, clicking on any portion of the column graph will should make the graph display level 1, but that does not happen. Also, I don't seem to get drilldown->data->TotalSalesQuantity of each point in the 2nd level. Can anyone help me figure out what I am doing wrong (or what I am not able to do)?
Below are screenshots of what actually happen.
Thank you very much for your help!
Upvotes: 0
Views: 1081
Answers (1)
Paweł Fus
Reputation: 45079
The problem is with removing series - right now you remove only one or two series. Should remove all series:
function setChart(name, categories, data, color, level, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
while(chart.series.length > 0) {
chart.series[0].remove();
}
for (var i = 0; i < dataLen; i++) {
chart.addSeries({
type: type,
name: name,
data: data[i],
level: level,
color: color || 'white'
});
}
}
And demo: http://jsfiddle.net/NULTY/874/
Upvotes: 1
Related Questions
- Highcharts drilldown doesn't work for 3+ levels
- Highcharts Line Chart Drill down not working properly
- Highcharts drilldown display issue
- HighCharts: Drilldown to a Stacked Column
- Drilldown for grouped column chart in highcharts
- highcharts drilldown not working
- Highcharts stacked drilldown with n-levels
- How can I create a chart with stacked columns after drilldown?
- Highcharts stacked columns with drilldown
- Highcharts Column Chart Drilldown