$("#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.
}
}
|