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

**URL:** https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [27 December 2023 17:20 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060 "2023-12-27T17:20:46Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![martin2day](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@martin2day](https://discourse.nodered.org/u/martin2day)
#### Post date: [27 December 2023 17:20 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/1 "2023-12-27T17:20:46Z")

</div>

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...

1. 

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

1. 

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

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [28 December 2023 01:59 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/2 "2023-12-28T01:59:54Z")

</div>

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.

> [@martin2day](#):
>
> Also if I only inject the URL and put this URL via

> [@martin2day](#):
>
> If I want to change the time range with a slider,

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.

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

```

---

<div class="post-metadata">

### Author: ![martin2day](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@martin2day](https://discourse.nodered.org/u/martin2day)
#### Post date: [28 December 2023 09:27 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/3 "2023-12-28T09:27:07Z")

</div>

Hello,

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

First I use only a template:

```auto
<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 ☹  
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:

```auto
<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

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [28 December 2023 19:18 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/4 "2023-12-28T19:18:19Z")

</div>

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 -

```auto
<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>

```

---

<div class="post-metadata">

### Author: ![martin2day](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@martin2day](https://discourse.nodered.org/u/martin2day)
#### Post date: [29 December 2023 06:54 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/5 "2023-12-29T06:54:47Z")

</div>

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

```auto
now/d
now-1d
now-2d

```

After that a function with

```auto
msg.fromdate=msg.payload;
return msg;

```

and after that function another function with

```auto
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

---

<div class="post-metadata">

### Author: ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)
#### Post date: [29 December 2023 09:03 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/6 "2023-12-29T09:03:07Z")

</div>

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

Just to differentiate them

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [29 December 2023 09:53 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/7 "2023-12-29T09:53:00Z")

</div>

> [@Sean-McG](#):
>
> ```auto
> <html>
> 
> <iframe id="frame1" width="1060px" height="310px"
> style="background:transparent; overflow:hidden; margin:auto; border:0px ;"></iframe>
> 
> <script>
> 
> ```

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.

---

<div class="post-metadata">

### Author: ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [29 December 2023 13:05 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/8 "2023-12-29T13:05:59Z")

</div>

Noted 😉

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [12 January 2024 13:06 UTC](https://discourse.nodered.org/t/1-2-loading-grafana-with-parameters-dashboard-grafana-device-idiom/84060/9 "2024-01-12T13:06:06Z")

</div>

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