Donut chart: dragging slices

Integration with amCharts 4

by Flexmonster Pivot Table

HTML

<script src="https://cdn.flexmonster.com/flexmonster.js"></script>
<script src="https://cdn.flexmonster.com/lib/flexmonster.amcharts.js"></script>

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<div id="pivotContainer"></div>

<div id="chartContainer"></div>

CSS

@import url(https://cdn.flexmonster.com/assets/jsfiddle-styles.css);

#chartContainer {
  height: 400px;
}

JavaScript

const pivot = new Flexmonster({
  container: "pivotContainer",
  licenseFilePath: "https://cdn.flexmonster.com/jsfiddle.charts.key",
  componentFolder: "https://cdn.flexmonster.com/",
  height: 300,
  report: {
    dataSource: {
      filename: "data/data.csv",
    },
    slice: {
      rows: [
        {
          uniqueName: "Country",
        },
      ],
      columns: [
        {
          uniqueName: "[Measures]",
        },
      ],
      measures: [
        {
          uniqueName: "Price",
        },
      ],
    },
  },
  reportcomplete: function () {
    pivot.off("reportcomplete");
    createChart();
  },
});

function createChart() {
  pivot.amcharts.getData({}, drawChart, updateChart);
}

function prepareDataFunction(rawData) {
  let data = rawData;
  data.unshift({
    Country: "Dummy",
    disabled: true,
    "Sum of Price": 1000,
    color: am4core.color("#dadada"),
    opacity: 0.3,
    strokeDasharray: "4,4",
  });
  return data;
}

let chart1;
let chart2;
am4core.useTheme(am4themes_animated);

function drawChart(chartData, rawData) {
  prepareDataFunction(chartData.data);
  prepareDataFunction(rawData.data);

  let container = am4core.create("chartContainer", am4core.Container);
  container.width = am4core.percent(100);
  container.height = am4core.percent(100);
  container.layout = "horizontal";

  container.events.on("maxsizechanged", function () {
    chart1.zIndex = 0;
    separatorLine.zIndex = 1;
    dragText.zIndex = 2;
    chart2.zIndex = 3;
  });

  chart1 = container.createChild(am4charts.PieChart);
  chart1.hiddenState.properties.opacity = 0; // this makes initial fade in effect
  chart1.data = chartData.data;
  chart1.radius = am4core.percent(70);
  chart1.innerRadius = am4core.percent(40);
  chart1.zIndex = 1;

  let series1 = chart1.series.push(new am4charts.PieSeries());
  series1.dataFields.category = pivot.amcharts.getCategoryName(rawData);
 ...