Javascript Execution x Grafana

Does anyone know how to enable javascript execution in grafana enviornment? I want to be able to click on a legend on 1 panel, and it does the same across all panels that i have in the dashboard. I got some tips from ChatGPT which provided me some functions to attach click events to legend items. However, I am unsure on how I can implement this.

// Custom Grafana panel plugin script

// Function to hide/unhide series across all panels
function synchronizeSeriesVisibility(panelId, seriesName, isVisible) {
var panels = getAllPanels(); // Function to get all panels
panels.forEach(panel => {
if ([panel.id](http://panel.id/) !== panelId) {
var series = panel.series.find(s => [s.name](http://s.name/) === seriesName);
if (series) {
series.hide = !isVisible;
}
}
});
// Refresh the dashboard to apply changes
refreshDashboard();
}

// Function to attach click events to legend items
function attachLegendClickEvents(panel) {
var legendItems = panel.legend.getItems();
legendItems.forEach(item => {
item.onClick = function() {
var seriesName = [item.series.name](http://item.series.name/);
var isVisible = !item.series.hide;
synchronizeSeriesVisibility([panel.id](http://panel.id/), seriesName, isVisible);
};
});
}

// Hook into the rendering process of panels
grafana.on('render-panel', panel => {
attachLegendClickEvents(panel);
});

That’s definitely not the best source to trust…

As for you question regarding legend, there is a feature request for such functionality. See this topic:

2 Likes

Hello, thank you for the insight, seems this feature request is what I am looking for but is yet to be implemented?