Grafana Chart display in WebViewer


#1

I’m at a loss here and find myself in need of assistance. I believe I have exhausted my efforts in trying to find a way to make this work. Any help would be greatly appreciated.

I’m trying to get a Grafana chart to show inside my app. Since the chart is already being generated on a server, I see no reason to “re-invent the wheel” on this since I can easily just use the URL for it. Best part of this is that Grafana automatically adjusts the chart according to the displayed window size. (you can try it out by adjusting your window size and clicking to refresh the page… chart will display to fit your sizing).

Here is an example chart URL: https://miner.farm/graphs/d-solo/27xMrlnik/minerfarm?orgId=1&var-minerID=All&var-agentID=All&var-farmID=6052&var-interval=1m&panelId=4&refresh=1m&theme=dark

This URL will open and display the chart properly in every desktop/mobile browser I have tried except for the AppyBuilder WebViewer.

I am baffled… Can anyone help me to get this to display properly inside an AppyBuilder app?

I have tried using extensions like WebViewTools to experiment with (even playing around with the UserAgent), but the results are all the same. I’ve even tried compiling and running it on my phone thinking maybe it was a limitation of the Companion app. Still nadda.

URL in Android Chrome (Normal):

URL loading in WebViewer (Normal):

URL failing to load chart in WebViewer (Failed):

A single sample of some of the block settings I have tried (Not very helpful, but before anyone asks, I figured I’d provide one):

I thank you for your time and any assistance you may be able to provide me.
-Doc


WebViewer unable to render Grafana charts
WebViewer unable to render Grafana charts
#2

I may have found a solution… Let me do some testing and I’ll reply with what I figured out just in case someone else wants/needs to do something like this.


#3

Okay… big sigh Here’s what I have found:

For giggles, I quickly slapped together a test in Thunkable using nothing except for a simple button and the default webviewer… and BINGO! It worked immediately. The default webviewer in Thunkable is able to load and display the Grafana real-time charts without any problems.

Thunkable

I’m not ready to give up on having real-time graphing in my App, so I won’t be going with the workaround (below). I also don’t want to have to change platforms. Ugh… so I will make a new post in the BUGS or I WANT THIS sections detailing this issue with the current WebViewer and link back to this post as reference.

Okay, so for those looking for a temp workaround:

  1. Grafana supports built-in “Sharing”… specifically they support “Direct Link Image Render” which produces an image URL that can easily be modified for whatever parameters you need.

  2. This image URL can then just be put into the picture string of an Image component and displayed.

The “catch” to this workaround is two-fold:

  1. The image rendering is performed server-side, and can only be done if the server running Grafana is properly setup to allow this. Image rendering does eat up additional resources, so your Grafana server better be able to handle whatever demand your app could cause.
  2. The image received is just a static “snapshot” and does not update in real-time. You could just constantly update your image URL (adjusting for time changes) and update the image string to create a simulated “real-time” graph, but remember what this can do to the Grafana server (see Catch #1 above.)

#4

I have found that the built-in WebViewer, in AppyBuilder, is unable to render Grafana charts. I’ve tried using some of the WebViewer extensions, but have been unable to get it to work.

As a test, I tried using other platforms and found that Thunkable’s default WebViewer has no problem loading the Grafana chart URL and rendering the real-time chart.

I’ve detailed my findings in the first 3 posts of my original post: Grafana Chart display in WebViewer

I don’t want to give up on having real-time graphs in my app and I don’t want to have to change platforms again, so I guess what I’m asking is, “Are there any plans to update the AppyBuilder’s built-in WebViewer?”

I am happy to assist in whatever way I can to help this get resolved. Thank you for your time and any help you may be able to provide.
-Doc


#5

Can I get a little love?..

7 days and all I can get is my own “Bug” post merged into the original “Discuss” post?

With the lack of graphing options we currently have, being able to display a Grafana chart is a very good alternative.

If nothing can be done with the current WebViewer, could something else be done in the form of another component? Could this be implemented as an extension?

Any assistance would be greatly appreciated.


#6

If I knew what needed to be changed, I might be able to create an extension.
But I don’t know what needs to be changed.


#7

Can you share a simple .aia to demo the issue?


#8

Sure. Here is a very simple usage of the WebViewer component. Pre-loaded URL is to a woking Grafana chart. (It can be copied and pasted into an external mobile/desktop browser to verify it’s active.)

Grafana_Tester.aia (42.0 KB)

Please let me know if there’s anything else I can do.
-Doc

image


#9

All my primary projects are done and I’d really like to get back to work on my App in AppyBuilder… Did anyone have any luck getting a chart to display?