I am using high chart to draw a pie chart and requirement are when we click on a part of chart it need to drill down to other level.
I need to drill down up to 3 to 4 level.
For example if I create chart for apparel when I click it will drill down to chart that contains apparel categories like - men apparel, women apparel , child apparel etc. (Level 2)
It is working fine 1 level and example for this given at High Charts official site (/)
But I want one more level deep drill down like if now I click on women apparel it will drill down to women apparel categories like - bags, sunglasses, watches, earnings, etc.
Can anyone help me out :(
I am using high chart to draw a pie chart and requirement are when we click on a part of chart it need to drill down to other level.
I need to drill down up to 3 to 4 level.
For example if I create chart for apparel when I click it will drill down to chart that contains apparel categories like - men apparel, women apparel , child apparel etc. (Level 2)
It is working fine 1 level and example for this given at High Charts official site (http://www.highcharts./demo/pie-drilldown/)
But I want one more level deep drill down like if now I click on women apparel it will drill down to women apparel categories like - bags, sunglasses, watches, earnings, etc.
Can anyone help me out :(
Share Improve this question asked May 7, 2014 at 7:48 Anupam SharmaAnupam Sharma 1,5692 gold badges16 silver badges35 bronze badges2 Answers
Reset to default 3Not sure if this helps you. But I think it will be easier for you to implement this using the data from server side. You can just change the data of the piechart as shown below that can take you to any level. You just have to keep an identified to identify which level you are in.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: myInitialDataArray, // make sure each data point has an id
point: {
events: {
click: function () {
$.post('/get/data/url/' + this.id, function(data) {
// you may need to format your data here
// Set the level here. e.g Level 1, 2 or 3 and then depending on that you can also change the url also or any other logic
chart.series[0].setData(data);
});
}
}
}
}]
});
I guess you already got the answer. still it might be helpful for others.
<script src="http://code.highcharts./highcharts.js"></script>
<script src="http://code.highcharts./modules/data.js"></script>
<script src="http://code.highcharts./modules/drilldown.js"></script>
<div id="container" style="width: 700px; height: 400px; margin: 0 auto"></div>
<button id="pie">reset</button>
JavaScript Part
var chart;
$(document).ready(function() { /*begin chart render*/
var colors = Highcharts.getOptions().colors,
categories = ['The Americas', 'Asia Pacific', 'Europe & Africa'],
//name = 'Sectors',
data = [{
name: 'A-1',
y: 55,
color: colors[0],
drilldown: {
//begin alcohol
name: 'A-1',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [122252, 3516, 4036, 3557, 4021, 3624, 3847],
color: colors[0],
data: [{
y: 33.06,
name: 'A',
drilldown: {
name: 'Budweiser',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [10838, 11349, 11894, 11846, 11878, 11662, 11652, 11438, 11833, 12252],
color: colors[0]
}},
{
y: 10.85,
name: 'B',
drilldown: {
name: 'Heinekein',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [2266, 2396, 2431, 2380, 2357, 3516],
color: colors[0]
}},
{
y: 7.35,
name: 'C',
drilldown: {
name: 'Jack Daniels',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [1583, 1580, 1612, 4036],
color: colors[0]
}},
{
y: 2.41,
name: 'D',
drilldown: {
name: 'Johnnie Walker',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [1649, 1654, 1724, 3557],
color: colors[0]
}},
{
y: 2.41,
name: 'E',
drilldown: {
name: 'Moet & Chandon',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [2470, 2445, 2524, 2861, 2991, 3257, 3739, 3951, 3754, 4021],
color: colors[0]
}},
{
y: 2.41,
name: 'F',
drilldown: {
name: 'Smirnoff',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [2594, 2723, 5600, 2975, 3097, 3032, 3379, 3590, 7350, 3624],
color: colors[0]
}},
{
y: 2.41,
name: 'G',
drilldown: {
name: 'Corona',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [3847],
color: colors[0]
}}],
}},
{
name: 'B-1',
y: 11.94,
color: colors[2],
drilldown: {
name: 'B',
categories: ['A-2', 'B-2', 'C-2'],
color: colors[2],
data: [{
y: 33.06,
name: 'A',
drilldown: {
name: 'A',
categories: ['A', 'B'],
data: [4444, 6666],
color: colors[3]
},
},
{
name: 'B',
y: 10.85,
drilldown: {
name: 'B',
categories: ['A', 'B'],
data: [22222, 6005],
color: colors[3]
},
},
{
name: 'C',
y: 7.35,
drilldown: {
name: 'C',
categories: ['2011'],
data: [3605],
color: colors[3]
}}],
}},
];
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
/* changes bar size */
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 10,
shadow: false,
backgroundColor: '#e2dfd3'
},
title: {
text: 'Pie Test'
},
subtitle: {
text: 'Pie Chart Triple Breakdown'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total Brand Value',
categories: categories
}
},
//drilldown plot
plotOptions: {
pie: {
cursor: 'pointer',
allowPointSelect: true,
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 15,
shadow: false,
point: {
events: {
click: function() {
var chart = this.series.chart,
drilldown = this.drilldown;
if (drilldown) { // drill down
chart.setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
}
}
}
},
dataLabels: {
enabled: true,
color: '#000',
//label colors
connectorColor: '#000',
// connector label colors
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y;
}
}
}
},
//formatting over hover tooltip
tooltip: {
formatter: function() {
var point = this.point,
s = point.name + ':<b>' + this.y + '% market share</b><br/>';
if (point.drilldown) {
s = point.name + ':<b>' + this.y + '222</b><br/>';
s += 'Click to view ' + point.name + ' versions';
} else {
s = point.name + ':<b>' + this.y + '333</b><br/>';
s += 'Click to return to browser brands';
}
return s;
}
},
credits: {
enabled: false
},
series: [{
name: name,
data: data,
/* changes bar size */
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 15,
shadow: false,
color: 'black' //Sectors icon
}],
exporting: {
enabled: false
}
}, function(chart){
chart.upper = [];
var up = false;
chart.setChart = function(name, categories, data, color) {
//chart.xAxis[0].setCategories(categories);
if (name === true && chart.upper.length) {
chart.series[0].remove();
chart.addSeries( chart.upper.pop() );
if( chart.upper.length === 0 ) {
$("#pie").hide('up');
up = false;
}
return true;
}
if (up === false) {
$("#pie").show().bind('click', function(){ chart.setChart(true); });
up = true;
}
chart.upper.push( chart.series[0].options );
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
});
});