"pullIn" slice of a pie chart on "pullout" of another pie chart's slice - Amcharts

Question

Have more than two pie charts on a page. Click on a slice of a pie-chart should reflect on other pie charts. If a slice of a pie chart pulled out then the last pulled out slice of another pie chart should pull in. Here, I am not pulling out the slice(pullOutRadius:0). I tried using events "clickSlice" and "pullOut".

var pie_chart = [];
make_Pie_1();
make_Pie_2();
make_Pie_3();

function make_Pie_1() {
  pie_chart[0] = AmCharts.makeChart("chart_pie_1", return_pie_chart("Chart 1"));
}

function make_Pie_2() {
  pie_chart[1] = AmCharts.makeChart("chart_pie_2", return_pie_chart("Chart 2"));
}
function make_Pie_3() {
  pie_chart[2] = AmCharts.makeChart("chart_pie_3", return_pie_chart("Chart 3"));
}

var prev_slice = "";
var prev_slice_div = "";
var chart_name = "";
var prev_index = null;

function return_pie_chart(title) {
  return {
    "type": "pie",
    "theme": "light",
    "dataProvider": [{
      "title": "New",
      "value": 4852
    }, {
      "title": "Returning",
      "value": 9899
    }],
    "allLabels": [{
      "y": "50%",
      "align": "center",
      "size": 10,
      "bold": true,
      "text": title,
      "color": "black"
    }],
    "valueField": "value",
    "titleField": "title",
    "colorField": "color",
    "innerRadius": "70%",
    "pullOutRadius": 0,
    "labelsEnabled": false,
    "pullOutOnlyOne": true,
    "listeners": [{
        "event": "clickSlice",
        "method": function(e) {
          console.log("clickSlice");
          var chart = e.chart;
          for (var i = 0; i < chart.dataProvider.length; i++) {
            var color = e.dataItem.index == i || chart.selectedIndex === e.dataItem.index ? chart.colors[i] : "#eee";
            chart.dataProvider[i].color = color;
          }
          if (chart.selectedIndex !== undefined)
            delete chart.selectedIndex;
          else
            chart.selectedIndex = e.dataItem.index;
          chart.validateData();
        }
      },
      {
        "event": "pullOutSlice",
        "method": function(e) {
          console.log("pullOutSlice");
          var slice = e.dataItem.dataContext.code;
          var slice_div = e.chart.div.id;
          if ((slice === prev_slice) && (slice_div === prev_slice_div)) {
            console.log("same click");
            prev_slice = "";
            prev_slice_div = "";
            prev_index = null;
          } else {
            console.log("diff click");
            if (prev_index !== null) {
              chart_name.clickSlice(prev_index);
            }
            prev_index = e.dataItem.index;
            //chart_name.pulledField = "pullIn";
            prev_slice = slice;
            prev_slice_div = slice_div;
            chart_name = e.chart;
            //chart_name = e.chart.allLabels["0"].text;
          }
        }
      }
    ]
  }
}

.chartdiv {
  width: 100%;
  height: 200px;
  font-size: 11px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="chartdiv" id="chart_pie_1"></div>
<div class="chartdiv" id="chart_pie_2"></div>
<div class="chartdiv" id="chart_pie_3"></div>

The problem here is:

If I click on a slice of a pie chart and again I click on another slice of the same pie chart, after that if I click on a slice of another pie chart then the previously selected slice is not deselecting.
Eg: -click on a slice of "Chart 1"

-click on another slice of "Chart 1"

-click on a slice of "Chart 2" (selected slice of Chart 1 still selected)

Is there any way to achieve this? Goal is click on a slice and deselect other chart's already clicked slice.

Rabinder Bisht Rabinder Bisht · Accepted Answer · 2018-07-24T07:19:10

I made one solution: Just hold the last chart and change the colors to default and validateData

{
  "event": "clickSlice",
  "method": function(e) {
    var chart;
    if (prev_chart !== "") {
      chart = prev_chart;
      for (var i = 0; i < chart.dataProvider.length; i++) {
        var color = chart.colors[i];
        chart.dataProvider[i].color = color;
      }
      chart.validateData();
    }
    chart = e.chart;
    for (var i = 0; i < chart.dataProvider.length; i++) {
      var color = e.dataItem.index === i || chart.selectedIndex === e.dataItem.index ? chart.colors[i] : "#eee";
      chart.dataProvider[i].color = color;
    }
    if (chart.selectedIndex !== undefined)
      delete chart.selectedIndex;
    else
      chart.selectedIndex = e.dataItem.index;
    chart.validateData();
    prev_chart = chart;
  }
}

"pullIn" slice of a pie chart on "pullout" of another pie chart's slice - Amcharts

1 Answers