aidanmountford / aidanmountford-html-panel

Grafana panel for rendering data aware HTML
MIT License
12 stars 5 forks source link

Read dashboard variables in the html #11

Open mapleafGWN opened 3 years ago

mapleafGWN commented 3 years ago

Using the 'Text' panel I am able to reference dashboard variables with ${hostref}. The same as when building a URL.

How does this 'HTML' panel access the dashboard variables?

DonatoD commented 3 years ago

Hi, did you find a solution? I'm even struggling with this other similar problem, too

mapleafGWN commented 3 years ago

Hi DonatoD. Forget about accessing dashboard variables. In my case, each dashboard variable required a SQL query. Using the HTML plugin, I was able to extract most of the variables within a single query.

  1. The workaround is to build your query in the HTML plugin.
  2. Access the table results in the javascript code section.

example: var obj = ctrl.data[0].rows[0]; // read query results var dbPar = JSON.stringify(obj); // convert to string var myObj = JSON.parse(dbPar); // parse string

    // get data to HTML using **htmlnode.getElementById("foo").innerHTML**

    htmlnode.getElementById("uiloc").innerHTML = "<b>Name: </b>" + myObj.NAME + "<br><b> Address: </b>" + myObj.PROPERTYADDRESS + "<br><b>  Phone Number: </b>" + myObj.PHONENUMBER;

    htmlnode.getElementById("pname").innerHTML = myObj.PROPERTYCONTACT;

    htmlnode.getElementById("pmail").innerHTML = myObj.PROPERTYCONTACTEMAIL;
  1. In your HTML reference the elements from the javascript code with id="foo":
    <p id="pname"> Name </p>
    <p id="pmail"> eMail </p>

I hope this helps. As with most of Grafana support and documentation is incredibly thin.

DonatoD commented 3 years ago

Thanks a lot. Yes I'm able to get what you explained, this is what I'm not able to do (sorry I didn't link it before) https://community.grafana.com/t/html-panel-plugin-using-data-in-html-code/48835/7 I haven't had time to try the last suggestion yet