Connect Geomap to Timeseries

Grafana Geomap Panel
1

Hi people!

Let me expose my problem using the template.

What Grafana version and what operating system are you using?
Latest Grafana version v11.1.0.

What are you trying to achieve?
A connection between the Geomap and a timeseries graph for different nodes in a PostgreSQL database. When one of the 3 nodes below are selected, the timeseries graph for latency should reflect the currently selected node. If this cannot be done with Grafana then it should be noted that I am attempting to do this whole thing on a website within an iframe so a workaround with a different map service (e.g. with an HTML canvas) could be used if this is not possible. Another feature of this would be hat when the user enters a link such as “https://mywebsite.com/nodes/1” then that should automatically open the time series graph for node 1 and ideally zoom into that node on the geomap. When the node is clicked on the map this should not open a new website, but instead render the data on the current page, however if they initially visit my website on a specific link like the one mentioned then it should do as followed. Please see images below for current set up:

image
image2334Ă—1487 248 KB

What i would like to achieve is when one node is pressed then the time series graph to reflect the “latency” of that node (dealing with satellites here). Ideally this would be achieved by only querying the database for that node (as there will only be up to 20 nodes total in the real application) however if a similar feat can be achieved by simply “hiding” the other nodes then so be it.

How are you trying to achieve it?
Tried with different options within Geomap panel, but no success. Best current “solution” is that each node has data on a web link to somehow show that node in the timseries graph. When the link is pressed it opens in another tab which is not ideal, and even if a workaround is possible, because i am loading Grafana within an iframe i believe it might try and open that link within the iframe.

image

Can you copy/paste the configuration(s) that you are having problems with? I am using PostgreSQL, grafana and React.

Did you follow any online instructions? If so, what is the URL?
Attempted to ask Gemini, with this response:" Absolutely! Here are two approaches to achieve this functionality in Grafana:

1. Utilizing URL Templating and Variables:

  • Concept: This method leverages Grafana’s URL templating system and variables to dynamically update the queries of other graphs based on the clicked location on the geomap.
  • Steps:
    1. Identify Location Data: Determine the data point associated with each marker on your geomap. This data point likely includes latitude and longitude information.
    2. Create Variables: Define hidden variables in your Grafana dashboard to store the clicked marker’s latitude and longitude.
    3. URL Templating: Modify the URLs of your other graphs to include these hidden variables as query parameters. For example, if your graph query filters data based on a specific location, you can use the clicked marker’s latitude and longitude to dynamically adjust the filter criteria in the URL.
    4. Panel JavaScript: Write JavaScript code for your geomap panel that utilizes the on(click) event for map markers. Within the event handler, update the hidden variables with the clicked marker’s latitude and longitude.

Benefits:

  • Relatively straightforward approach for basic scenarios.
  • Leverages existing Grafana features.

Drawbacks:

  • Requires modifying individual graph URLs and potentially writing custom JavaScript.
  • Can become complex if multiple graphs require dynamic updates based on the clicked location.

2. Leveraging Grafana Loki or a Similar Logging Backend (Advanced):

  • Concept: This approach utilizes an external logging backend like Grafana Loki to store information about user interactions with the geomap (e.g., clicked marker details). Other dashboards can then query Loki in real-time to retrieve the latest clicked location and update their visualizations accordingly.
  • Steps:
    1. Set Up Loki: Install and configure a Loki instance if you don’t have one already.
    2. Client-Side Logging: Write JavaScript code in your geomap panel that sends logs to Loki when a marker is clicked. The log message should include the clicked marker’s data (e.g., latitude, longitude).
    3. Other Dashboards: Modify the other dashboards to query Loki in real-time for the latest location data. This retrieved data can then be used to dynamically adjust graph queries.

Benefits:

  • More flexible and scalable solution for complex scenarios with many interacting dashboards.
  • Enables real-time updates based on user interaction.

Drawbacks:

  • Requires setting up and managing an additional service (Loki).
  • Implementation involves more complex JavaScript and potentially server-side logic for querying Loki."

Thank you very much in advance! If another topic has been opened about this issue that i have missed then i would very much appreciate if you might be able to link it to me!

3

Thank you very much for the advice, and because of it i found an alternative - leaflet.js. Instead of using plugins, Volkov labs or attempting to connect to the event bus, I simply added leaflet.js as a dependency (https://www.youtube.com/watch?v=jD6813wGdBA) and went from there. Because i’m setting up this on a react website it was quite straightforward to go about it without grafana and on click events. I’m posting this in case anyone else has a similar problem.

1 Like
4

So what you are doing with react is pretty much the exact thing you would do with the second option listed above but using grafana as your wrapper/server.

If grafana is core for your visualization I would go with grafana instead of spinning a whole react app just for geomap with click events that you can get for free in grafana.