Getting data from a datasource with javascript

Hi, first of all I want to thank the Grafana developers for the great product they are putting out there. I’ve been using Grafana for over a year now and I’m still very happy with it, especially since version 7.

Now to my question:
I am building a panel plugin that acts in a similar way to the default graph plugin but with a slight difference. My users don’t know anything about sql syntax but still want to be able to edit their graphs. So I am trying to make my graph plugin a bit more interactive. It will have a list of all available trends in a specific PostgreSQL table. My users should be able to visualize them on my graph just by clicking on them in my selection menu. The UI is done and works no problem. I have a problem with fetching the data though. I am trying to send queries to the PostgreSQL datasource plugin from within my graph plugin code. I tried my luck with the DataSourceSrv interface but unfortunately I couldn’t achieve the desired result. Is this interface even suitable for my use case? Is there a way to query a datasource from within a panel plugin?

Thanks in advance for any responses!

Hey @sebastienkovacs2, and welcome to the community forums!

The preferred way to access the query results from the data source is through the data prop in the panel component. Could you give me some more details on what you’re trying to do, and what’s failing?

Hello @marcusolsson, thanks for replying. I’m sorry for replying so late.

Good news is, I found a solution to my problem on my own. What I was trying to do is query the grafana backend directly from within my plugin so that I could send it postgres queries. I am trying to do this to make it easier for my users to see the metrics they are interested with. What I mean by that is that I want them to be able to just pick a metric from a list/dropdown and see it appear on my graph without having to type any SQL. So once they pick the metric they are interested in, I can generate a SQL query automatically and send it to the Grafana backend, and hopefully get some data back.
To do this I used a part of the Grafana api that is not documented: /api/tsdb/query.
I found out about it by looking at the http request happening when I use the standard Graph plugin. After that I found this Github issue https://github.com/grafana/grafana/issues/21046 which talks about that endpoint. This helped me figure the last things out.

Thanks a lot for your help still. It’s really cool that you guys are so responsive.

Hi @marcusolsson If you can suggest something for this thread.
https://community.grafana.com/t/how-to-start-building-the-react-panel-after-the-basic-template/38294/2

Hi @sebastienkovacs2 If you can guide me about the UI, and problem would be very helpful how to use the library.

https://community.grafana.com/t/how-to-start-building-the-react-panel-after-the-basic-template/38294/2