Text html panel. Access dashboard variable without refreshing the panel

Grafana Time Series Panel
1

Hello everybody,

I created a html text panel to show an iframe that it updates its content using a javascript message. This works with a simple HTML select, but in Grafana the select is outside the html panel and it is associated to the variable $Code. Here is the example of my Grafana panel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function updateData(code) {
            let iframe_window = document.getElementById('myiframe').contentWindow;
            iframe_window.postMessage(code);
        }
       updateData('$Code');  << Here I access the dashboard variable Code.
    </script>
</head>
<body>
    <iframe id="myiframe" src="https://example.url/data/" frameBorder="0" scrolling="no" style=" width: 100%; height: 100%; overflow: hidden;"></iframe>
</body>
</html>

My problem is that every time the dashboard variable $Code changes, the whole panel refreshes. I want to add a type of listener to the $Code variable, so when its value changes, the function updateData triggers with the value of $Code as argument, without refreshing all the panel’s content.

I tried to access the variable angular from javascript, but couldn’t resolve how to get the value of the $Code variable from it (if it is possible).

I hope it is possible to do it, any help is welcomed.

Thank you very much!