[1/2 : Loading Grafana with parameters] Dashboard + Grafana + Device Idiom

Dashboard
1

Hello,

i am new to Node-Red... I have a FHEM Server for Home Automation here that I want to update with Node Red. The Backend work fine, but for the Frontend i need some help.
Today I have two problems that I did not solve with the internet and chatgpt...

I have a Grafana dashboard I want to insert in Node Red.
With a template this works fine. If I want to change the time range with a slider, I did not get any picture in the template.
Also if I only inject the URL and put this URL via

I will show the Dashboard on my MAC and also an my Phone.
The Grafana Dashboard I show via template and iframe today is setup for the weight of the Phone.
On the MAC it is very small.

Is it posible to change the weight for different typ.... PC, MAC or Phone.
How can I do this?

Have a nice day and thank you very much
Martin

2

It would help if you shared a simple version of your flow, so we can see what you are trying to do.

This description doesn't really tell us much.

What are you actually sending to the template/iframe ?

For example I might build up a Grafana URL something like this, having already calculated the date range based on some input from the UI.

msg.payload = "http://192.168.0.254:3000/d-solo/YqIZzjHVz/meters?orgId=1 " +
    "&refresh=1m" +
    "&theme=dark" +
    "&from=" + fromdate +
    "&to=" + enddate +
    "&panelId=" + panelId
3

Hello,

thank you for your help.
This is what I tested:

First I use only a template:

<iframe
src="http://192.168.10.132:3000/......&from=now/d&to=now&theme=dark&panelId=18"
width="520px"; height="360px"; frameborder="0"></iframe>

This work fine, so the link to Grafana work.

Than I run the next simple test and inject the Grafana Adresse.
Inject: msg.payload = string "http://.....Id=18".
And in the template I change the code to:
<iframe src="{{msg.payload}}"></iframe>

With an debug between the two nodes I see the correct Adresse and If I past this in my browser I see the correct Grafana... but in Node red I only see the white frame :frowning_face:
I Think there is a problem loading the address....

An to the second part.
I found that I can use css to use the Screen width:

<style>
    @media screen and (max-width: 600px) {
    /* Styling-Anpassungen fĂĽr kleinere Bildschirme hier definieren */

    /* Beispiel: Ă„ndere die Hintergrundfarbe fĂĽr kleinere Bildschirme */
    body.nr-dashboard-theme {
        background-color: lightblue;
    }
    }
    
</style>

So I can change id the screen is less then 600px.
I can change the iframe width in the template. But I did not find the place were I can change dashboard group were the template is run in. For the dashboard group I only can setup a fixed value and not auto?

I also testet with no fixed values fĂĽr the width of the iframe... not 600px but 100vw. This run, but in the back I see the fixed frame of the dashboard group und this also cut the iframe.

Marin

4

Probably better to split this into two topics, one for the Grafana and another for the display sizing.

In your template use something like this -

<iframe id="frame1" width="1060px" height="310px"
    style="background:transparent; overflow:hidden; margin:auto; border:0px ;"></iframe>

<script>
    (function(scope) {
    
    scope.$watch('msg', function(msg) {
        if (msg) {
            var x = document.getElementById ('frame1')
            x.setAttribute('src', msg.payload); 
        }
               
    });
})(scope);
</script>
5

Hey,

thank you so much. This helps and solve the issue using the Grafana Adresse in msg.payload.
Before the template I use a drop-down with

now/d
now-1d
now-2d

After that a function with

msg.fromdate=msg.payload;
return msg;

and after that function another function with

let panelid=4
msg.payload = "http://adresse to grafana"+
"&refresh=30s"+
"&theme=dark"+
"&from="+ msg.fromdate +
"&to=now&panelId="+ panelid
return msg;

i open another topic for the second topic.
have a nice day

6

I have updated the title of this topic, as I was close to considering your 2 topics as duplicates.

Just to differentiate them

7

Just a note: the html tag is not necessary (or encouraged) since the template content will be embedded in a well structured page constructed by dashboard.

1 Like
8

Noted :wink:

9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.