Handle various clicks on ampiechart slices

Question

I have AmPiechart with different fragments. I want to perform different actions on individual clicks of each fragment.

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 can I handle this in the handleClickPie () function?

Answer 1

Yes, as you noted in your comment, you can access the properties of the slice element, and then process these properties as you wish.

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>