Update other visualisations based on mouse click

Grafana Dashboards
1

Hey there, I’m trying to update other visualisations based off clicking on a column in a bar chart. So far I’ve got it so that it retrieves the correct column name. I’m just not too sure on how to get other visualisations to dynamically update based off that click. This is my code so far:

echartsInstance.off("click");
echartsInstance.on("click", (params) => {
  console.log("Clicked column name is:", params.name);
  dashboard.variables.findByName('selectedColumn').setCurrent(params.name);
});


return {
  grid: {
    bottom: "3%",
    containLabel: true,
    left: "3%",
    right: "4%",
    top: "4%"
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

The other visualisation is a pie chart where the code is:

return {
  grid: {
    bottom: "3%",
    containLabel: true,
    left: "3%",
    right: "4%",
    top: "4%"
  },
  series: [
    {
      data: [
        { value: 120, name: 'Mon' },
        { value: 200, name: 'Tue' },
        { value: 150, name: 'Wed' },
        { value: 80, name: 'Thu' },
        { value: 70, name: 'Fri' },
        { value: 110, name: 'Sat' },
        { value: 130, name: 'Sun' },
      ],
      type: 'pie',
    }
  ]
};

The end goal is for this pie chart to only display whatever I click on in the bar chart. Thanks.

2

@zyan Please keep questions organized and avoid duplicate topics.

Replied in Getting dashboard to refresh through code.

Regarding updating other visualizations it can be done using variable or eventBus, both options explained in our videos and documentation: