drill down bar chart multi stack
1 Reply
Hi Vinod,
We have analyzed your query. We can achieve your requirement using pointRegionClick event, in this, we can get the current point index. Based on the point index we have rendered the information with new data.
Please find the below code snippet to achieve this requirement,
|
$("#container").ejChart(
{
commonSeriesOptions:
{
type: 'stackingbar',
},
series:
[
{
points: [{ x: "SUV", y: 25, text: '25%' },
. . .
. . . other points
],
},
{
points: [{ x: "SUV", y: 20, text: '20%' },
. . .
. . . other points
],
}
],
. . .
. . . other customization
pointRegionClick: 'onclick',
});
function onclick(sender) {
var pointIndex = sender.data.region.Region.PointIndex;
var seriesIndex =sender.data.region.SeriesIndex;
document.getElementById("text").innerHTML=sender.model._visibleSeries[0]._visiblePoints[pointIndex].x;
$("#container").ejChart("option", { "drilldown": barSeries(pointIndex, seriesIndex) }); // here drill down the clicked point index
document.getElementById("symbol").style.visibility = "visible";
}
function barSeries(index, seriesIndex) {
if (seriesIndex == 0) {
if (index == 0) {
return {
series:
[
{
points: [{ x: "Toyota", y: 8, text: 'Toyota 8%' },
. . .
. . . other points
],
. . .
. . . other customization
}
],
};
} else {
. . .
. . . as like the index 0 customize the other indexes
}
} else if(seriesIndex == 1){
} else {
// give the initial series collections. This is for when click the back from the drilled series.
}
}
|
Screenshot:
Initial rendering:
After drill down:
Sample for your reference, can be found from below link,
If the above is doesn’t meet your requirement, kindly revert us with clear details about your requirement which will be helpful in furthermore analysis and provide you the solution sooner.
Regards,
Baby.
SIGN IN To post a reply.
