Energy flow diagram using Sankey Panel with data from PostgreSQL

Hi everyone,
I’m using Grafana v10.2.1 on Windows 10 (64-bit) and PostgreSQL database.
I’m trying to create Energy Flow Diagram in Sankey using this panel: Sankey Panel plugin for Grafana | Grafana Labs. I’ve tried also this example: Volkov Labs but I couldn’t transfer my data from PostrgeSQL.
In Sankey panel I used the data from other dashboard and transformed i with ‘Join
by field’ and ‘Organize fields’ as you can see below:
-dashboard with last values of imported energy:


-sankey panel:

with transformations:

and final result look like this:

but I need it to look like this (energy usage in %):

And in my example TRAFO is a source and RGR1/RGR2 are targets. Values are examples so it’s not really important.

I can’t modify my table in PostrgeSQL but it can be modified in Grafana (transformation) or in other DB if it’s needed. Don’t know yet how to transfer my data to another database f.e. InfluxDB but it’s an option.

Did somebody did something similar in Sankey Panel or used the Volkovlabs echarts especially with PostgreSQL?

Any tips will be very helpful :slight_smile:

Thank you for any insights or suggestions!

Klaudia

Hi Klaudia,

I just figured out how to use this panel. Here’s the format I used (btw, why isn’t the expected format provided with the freaking panel? Don’t they want people to know how to use this thing? Why are so many things in grafana not user-friendly in this way? Every single visualization should provide what table format is expected…)

Anyway, here’s what you need to know: Each row of your table represents one specific migration path, and the last column should represent the thickness of the path in the diagram.

For example, if 12 people went from USA → Germany, I would have the following row:

source destination num
USA Germany 12

You can easily count the number of migrants taking the same path if you have a table where each row represents a migrant’s path. Then just group by all your states, e.g. “GROUP BY source, destination” and include in the SELECT clause (at the end): COUNT(*) as num.

Hope that helps :smile:

When I hover over this panel, the data is always displayed behind the panel so it can’t be seen.

Honestly Apache ECharts looks much better and more powerful for other visualizations, you just have to spend a little time to learn how to use it first.

Here’s a link that explains how to get the data out of your grafana queries: Data Sources | Volkov Labs

2 Likes

Thank you!
I figured out already what data format should I use but thanks a lot for your advice! I agree that many things in Grafana are not user-friendly :frowning: And I also tried to use Apache ECharts instead of this panel (as you writed - some thing are hiden so it’s really annoing) but I can’t load my data in it using the script. Have you used it already? Every tip is valuable for me :slight_smile: Thank you!

No problem, here’s some quick tips:

On this page where they use data.series.map, “data” refers to context.panel.data in my grafana, i.e. data = context.panel.data;

And you can inspect/debug objects with console.log(object). To see the console in google chrome do ctrl+shift+J.

From there on it’s all learning javascript and setting the Apache ECharts parameters right based on examples from Volkov and ECharts websites, as well as the official echarts documentation.

That’s pretty much all I needed to get things up and running. Hope this helps!

Without you I probably would not have found Volkov labs or ECharts. Thanks for that!