MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Grafana chart will not appear in MM

    Scheduled Pinned Locked Moved Utilities
    8 Posts 6 Posters 1.4k Views 6 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P Offline
      PeterKatana
      last edited by sdetweil

      Re: MMM-GrafanaCharts and MMM-GrafanaGauges: Display you data with Charts and Gauges. Beautifully.

      Hi all,

      I try to get the MMM-GrafanaCharts module running … not so easy:
      I played now several days to show a grafana chart in my MM. I used this use case for creating a grafana chart:
      https://github.com/geerlingguy/internet-pi. The grafana runs in docker with the following parms:

      GF_USERS_ALLOW_SIGN_UP=false
      GF_INSTALL_PLUGINS=flant-statusmap-panel,ae3e-plotly-panel
      GF_ORG_ROLE=Viewer #to just view graphs without authentication
      GF_ORG_NAME=Main Org
      GF_AUTH_ANONYMOUS_ENABLED=true
      GF_AUTH_ANONYMOUS=true
      GF_ALLOW_EMBEDDING=true

      I used the share function in the grafana dashboard to create an url:

      http://pi-hole:3030/d/o9mIe_Aik/internet-connection?from=1624514783736&to=1624601183736&orgId=1&refresh=5m

      and thats my config.js snippet:

      {
      disabled: false,
      module: 'MMM-GrafanaChart',
      position: 'top_left', // This can be any of the regions.
      config: {
      version: "6", // Only add this line if you are using Grafana verison 6 or greater
      id: "o9mIe_Aik", // Only Mandartory if you are using Grafana verison 6 or greater found after /d/ in the url
      host: "http://pi-hole:3030/d/o9mIe_Aik/internet-connection?from=1624514783736&to=1624601183736&orgId=1&refresh=5m", //Mandatory. See url when displaying within grafana
      port: 3030, // Mandatory.
      dashboardname: "internet-connection", // Mandatory.
      orgId: 1, // Mandatory.
      panelId: 2, // Mandatory.
      width: "100%", // Optional. Default: 100%
      height: "100%", // Optional. Default: 100%
      refreshInterval: 900 //Optional. Default: 900 = 1/4 hour
      }
      },
      

      Both raspberries are running the same network.
      But there is nothing to see in the MM. Not even a empty frame.

      Thanks for your comments !
      Cheers Peter

      evroomE S cowboysdudeC 3 Replies Last reply Reply Quote 0
      • evroomE Offline
        evroom @PeterKatana
        last edited by

        Hi Peter,

        @peterkatana said in Grafana chart will not appear in MM:

        host: “http://pi-hole:3030/d/o9mIe_Aik/internet-connection?from=1624514783736&to=1624601183736&orgId=1&refresh=5m”, //Mandatory. See url when displaying within grafana

        I would try:

        host: "<grafana_host_ip>",
        

        Nothing to be seen in the pm2 logs ?

        I used both MMM-GrafanaChart and MMM-GrafanaGauges for a short time a while ago, but wasn’t really happy with it.
        But perhaps it will suit your needs.

        MagicMirror version: 2.30.0
        Raspberry Pi 4 Model B Rev 1.5 (8 GB RAM)
        Raspbian GNU/Linux 12 (bookworm)

        Test environment:
        MagicMirror version: v2.30.0
        Raspberry Pi 3 Model B Plus Rev 1.3 (1 GB RAM)
        Raspbian GNU/Linux 12 (bookworm)

        P 1 Reply Last reply Reply Quote 0
        • P Offline
          PeterKatana @evroom
          last edited by PeterKatana

          @evroom
          Thanks for your ideas. I will try.
          Till now I didnt find something appropriate in comparison with the MMM-GrafanaCharts. Also the iFrame was not working for me. But I assume, after they changed some security features in the new version I need to configure the grafana server properly.
          If you have an alternative - I am curious.
          Thanks Peter

          1 Reply Last reply Reply Quote 0
          • S Away
            sdetweil @PeterKatana
            last edited by

            @peterkatana also, please put any config.js entries in a code block,

            paste text
            select text pasted
            hit the button above editor that looks like </>

            makes it easier for us all to read

            Sam

            How to add modules

            learning how to use browser developers window for css changes

            P 1 Reply Last reply Reply Quote 0
            • P Offline
              PeterKatana @sdetweil
              last edited by

              @sdetweil

              I will do. Thanks for the recommendation how to make my content more readable.

              Cheers Peter

              1 Reply Last reply Reply Quote 0
              • cowboysdudeC Offline
                cowboysdude Module Developer @PeterKatana
                last edited by

                @peterkatana this is for you and anyone else having issues.

                It’s a pretty good guide!

                https://www.planet4.se/grafana-in-magic-mirror/

                1 Reply Last reply Reply Quote 0
                • R Offline
                  raymondjspigot
                  last edited by

                  Hi - there haven’t been any updates on this lately but I thought I’d add some notes from when I tried out Grafana recently.

                  I’ve been using Grafana v8.4.6 installed on Ubuntu (so this might not help if your trouble is related to running it in a Docker container). I wanted to show a grafana-gauge on my Magicmirror. After changing some configuration and making some adjustments to the MMM-GrafanaGauges module I can confirm I’ve got it to show my gauge on the mirror, although I still have a couple of issues with it.

                  Anyway, notes on how I got to this point:

                  1. Logged into my Ubuntu machine (the Grafana-host) and made some updates to the grafana.ini file (as noted in one of the guides linked above)

                  In v8.4.6 the grafana.ini file is at /etc/grafana so in a terminal I could go

                  sudo nano /etc/grafana/grafana.ini
                  

                  in order to edit the file. I needed to allow anonymous viewing of shared dashboards (i.e. without needing to log in as a Grafana user) and allow embedding. I set

                  [auth.anonymous]
                  enabled = true
                  
                  [security]
                  allow_embedding = true
                  

                  Note that I think the ; character shows a comment in the .ini file, so I needed to uncomment these entries as well as update them to = true

                  I needed to restart the grafana-server for these changes to take effect.

                  sudo system-ctl restart grafana-server
                  
                  1. Logged into Grafana on the grafana-host, and viewed the graph that I wanted to show on my mirror. There’s a Share option, with an Embed tab available. It provides some HTML to use to embed the graph in another page. In my case this looked like
                  <iframe src="http://localhost:3000/d-solo/kJ03KuhMk/power-gauge?orgId=1&panelId=5" width="450" height="200" frameborder="0"></iframe>
                  

                  I’d updated the parameters for the module in my MagicMirror config.js but when I checked the dev console on my MagicMirror I could see that MMM-GrafanaGauges was writing the URL it was trying to use to the log, and it looked like

                  <iframe src="http://grafanahost:3000/dashboard-solo/db/power-gauge?orgId=1&panelId=5" ...
                  

                  The log also included a 404 Not found message just after. So possibly the URL-format has changed since the module was written, or my grafana configuration is different.

                  I updated the MMMGrafana-Gauges.js file to build the URL to match the one provided on the Share/Embed page anyway, i.e. using /d-solo/kJ03KuhMk instead of the dashboard-solo/db literal, and now I can see the graph on my mirror.

                  Issues I still have with it:

                  • When the graph is refreshed, it fades out (which is neat) but then fades back before the graph is ready to be displayed. It shows a bouncing grafana logo followed by some white text (Loading and initializing dashboard, or something) which looks pretty ugly. It would be neater if it would fade back in only once the graph has finished loading.

                  • I haven’t been able to get the background-transparency on the graph to work. There is a Transparent background setting when editing graphs in grafana, but the frame still shows up as a dark-grey rectangle around the graph on my mirror, which doesn’t look so good.

                  Hope this is helpful to someone anyway

                  F 1 Reply Last reply Reply Quote 1
                  • F Offline
                    Fips @raymondjspigot
                    last edited by

                    Hey guys,

                    I’m running into the same issue. But I have an error code: electron failed to load URL, and it is error ERR_BLOCKED_BY_RESPONSE.

                    I get the same issue with an iframe module in MM2.

                    I read, that electron would block unsafe sides and as the grafana I want to show is running on an external device I do not own and can’t configure, cause it is part of my solar panel, I can’t change anything about it. The side is registered as insecure in the browser.

                    Any idea? I already tried to modify the electron.js with a phrase to allow unsafe URLs, but it didn’t work.

                    Greetz

                    1 Reply Last reply Reply Quote 0
                    • 1 / 1
                    • First post
                      Last post
                    Enjoying MagicMirror? Please consider a donation!
                    MagicMirror created by Michael Teeuw.
                    Forum managed by Sam, technical setup by Karsten.
                    This forum is using NodeBB as its core | Contributors
                    Contact | Privacy Policy