Dynamic animations for grafana via apache echarts

See more:

Javascript

So, I am using a custom plugin Apache Echarts for grafana. I am trying to implement the universal transition feature of ECharts in my JavaScript code to dynamically switch between a bar chart and a pie chart based on a defined interval. Is this possible or am I just wasting my time?

What I have tried:

I used the below JS to get the desired animation but nothing is reflected in Grafana.

let intervalData = [];
let systemCount = [];
let isPieChart = false; 

data.series.map((s) => {
  if (s.refId === "A") {
    intervalData = s.fields.find((f) => f.name === "Interval").values;
    systemCount = s.fields.find((f) => f.name === "System Count").values;
  }
});

const colors = [
  '#2b821d',
  '#c12e34',
  '#0098d9',
  '#005eaa',
  '#339ca8',
  '#cda819',
  '#32a487',
  '#e6b600'
];

const barOption = {
  color: colors,
  tooltip: {
    show: true,
  },
  legend: { show: true },
  xAxis: {
    type: 'category',
    data: intervalData,
    name: 'Interval',
    nameLocation: 'middle',
    nameGap: 35,
    axisLabel: {
      fontWeight: 'bold',
    },
  },
  yAxis: {
    type: 'value',
    name: 'System Count',
    nameLocation: 'middle',
    nameGap: 40,
    axisLabel: {
      fontWeight: 'bold',
    },
  },
  series: [
    {
      data: systemCount,
      name: 'System Count',
      type: 'bar',
      smooth: true,
      barWidth: 15,
    },
  ],
};

const pieOption = {
  color: colors,
  tooltip: {
    show: true,
  },
  legend: { show: true },
  dataset: {
    dimensions: ['name', 'count'],
    source: intervalData.map((interval, index) => [interval, systemCount[index]]),
  },
  series: [
    {
      type: 'pie',
      radius: [0, '50%'],
    },
  ],
};

function toggleChartOption() {
  isPieChart = !isPieChart;
  return isPieChart ? pieOption : barOption;
}

setInterval(() => {
  myChart.setOption(toggleChartOption(), true);
}, 2000);