Category / Section
How to perform three level drill down in ASP.NET MVC Pie Chart?
4 mins read
This article explains how to create a three-level drill down in pie chart.
You can achieve a three-level drill down in pie and doughnut charts using PointClick event. If user clicks any point in the chart, that corresponding data will be shown in the next level and so on based on point clicked.
var pointClick = function (args) {
pie = document.getElementById("container").ej2_instances[0];
if (args.series.name == 'Project') {
switch (args.pointIndex) {
case 0:
pie.series[0].dataSource = suvs;
pie.series[0].name = 'Suv';
document.getElementById('text').innerHTML = 'SUV';
break;
case 1:
pie.series[0].dataSource = cars;
pie.series[0].name = 'Car';
document.getElementById('text').innerHTML = 'Car';
break;
case 2:
pie.series[0].dataSource = pickups;
pie.series[0].name = 'Pickup';
document.getElementById('text').innerHTML = 'Pickup';
break;
case 3:
pie.series[0].dataSource = minivans;
pie.series[0].name = 'Minivan';
document.getElementById('text').innerHTML = 'Minivan';
break;
}
}
else if (args.series.name == 'Suv') {
………………….
………………….
………………….
}
……………… and so on.
You can also achieve drill-up (back to the initial state) by using the breadcrumb for navigation.
var mouseClick = function () {
var pie = document.getElementById("container").ej2_instances[0];
pie.series = [
{
dataSource: [{ x: 'SUV', y: 25 }, { x: 'Car', y: 37 }, { x: 'Pickup', y: 15 }, { x: 'Minivan', y: 23 }],
dataLabel: {
visible: true, position: 'Inside', connectorStyle: { type: 'Curve', length: '10%' },
font: { fontWeight: '600' }
},
radius: '70%', name: 'Project', xName: 'x', yName: 'y', startAngle: 0, endAngle: 360, innerRadius: '0%',
explode: false
}
];
pie.textRender = function (args) { args.text = args.point.x + ' ' + args.point.y + ' %'; }
pie.refresh();
document.getElementById('text').style.visibility = 'hidden';
document.getElementById('symbol').style.visibility = 'hidden';
document.getElementById('category').style.visibility = 'hidden';
document.getElementById('text1').style.visibility = 'hidden';
document.getElementById('symbol1').style.visibility = 'hidden';
document.getElementById('category1').style.visibility = 'hidden';
}
Result:
1st level:
2nd level:
3rd level:
Refer to our documentation and online samples for more features. If you have any queries, please let us know in the comments below. You can also contact us through our Support forum or Support ticket. We are happy to assist you!
