Handle different clicks of ampiechart slices

Question

I have an AmPiechart with different slices. I want to perform different actions on individual clicks of each slice.

PieChart.addListener("clickSlice", handleClickPie);

function handleClickPie(e) {

        }

I want to do something like:

If ClickSliceNo == 1 : Action1

If ClickSliceNo == 2 : Action2

If ClickSliceNo == 3 : Action3

How do i handle that in the handleClickPie() function?

Answer 1

Yes, as you noted in your comment, you can access the properties of the slice item and then handle those properties as you see fit.

Here is an example:

• https://jsfiddle.net/7osqoycj/1/

---

JS

var chart = AmCharts.makeChart("chartdiv", {
    "type": "pie",
    "theme": "light",
    "dataProvider": [{
        "country": "Lithuania",
        "litres": 501.9
    }, {
        "country": "Czech Republic",
        "litres": 301.9
    }, {
        "country": "Ireland",
        "litres": 201.1
    }, {
        "country": "Germany",
        "litres": 165.8
    }, {
        "country": "Australia",
        "litres": 139.9
    }, {
        "country": "Austria",
        "litres": 128.3
    }, {
        "country": "UK",
        "litres": 99
    }, {
        "country": "Belgium",
        "litres": 60
    }, {
        "country": "The Netherlands",
        "litres": 50
    }],
    "valueField": "litres",
    "titleField": "country",
    "balloon": {
        "fixedPosition": true
    },
    "listeners": [{
        "event": "clickSlice",
        "method": myCustomClick
    }]
});

function myCustomClick(e) {
    // to see the full api, log out "e"
    // console.log(e);
    var country = e.dataItem.dataContext.country;
    if (country === "Lithunia") {
        alert("Lithuania: the home of amCharts.");
    } else if (country === "Germany") {
        alert("Munich is a city in Germany.");
    } else if (country === "Austria") {
        alert("Skiing in Austria is awesome.");
    } else {
        alert("You have clicked " + country + ".");
    }
}

CSS

#chartdiv {
    width: 100%;
    height: 500px;
    font-size: 11px;
}

HTML

<div id="chartdiv"></div>