HTML Panel connect to Data Scource

Hi, I am new to Grafana dashboard software.

Currently I build a HTML chart using external Javascript library.
I would like to know is HTML panel able to use the data source plugin inside the Grafana to get the same data as other panel and visualize the charts ?

Thanks and Regards.

Hello and welcome to the Grafana Community :tada:

Are you writing this panel plugin with angular or react? They differ slightly on how they access the data provided to the plugin.

If you’re writing with angular your control should extend MetricsPanelCtrl and you can access the timeseries from this.processor.getSeriesList() as shown here https://github.com/grafana/grafana/blob/2cdd73cfd48d1ac4d94e814b9e7b710834e72ffd/public/app/plugins/panel/graph/module.ts#L214

We are however in the process of rewriting Grafana in React instead of Angular so writing plugins with react is strongly recommended. To access the data from a React based plugin you could take a look at https://github.com/grafana/grafana/blob/2cdd73cfd48d1ac4d94e814b9e7b710834e72ffd/public/app/plugins/panel/gauge/GaugePanel.tsx#L43

Hope this helps.

1 Like

Thank you for your reply.
If I just using the Text panel not a plugin and convert to HTML view ?

Ah, I see. Thought you were building a plugin.

Then the answer is no unfortunately. Text panel does not support getting time series data.

1 Like

Hi Sir,
Do you have more example for how to build the Plugin using React ?
How React plugin get data from Grafana ?

Hello, well we do have this repo for a simple plugin.

and here’s a blog post that I wrote earlier this year.

it might not be entirely up to date but I think the basic concepts are the same.

Hope this helps.

2 Likes

Hi Sir,
May I know is that possible to build a panel plugin using React and JavaScript not TypeScript ?

It is possible yes, but I’d really encourage you to write in TypeScript since you might be on your own with tooling etc.

1 Like

Hi Sir,
I saw mostly of the example is different from React TS
Can I know how to export data as CSV ?
Regards,
Jack

Don’t know if you’re still into this subject, but I came across this plugin:

I don’t find any examples of what you can do with it, but I think the main idea is indeed to query data from any data source and use it in your own designed html page.
@https://grafana.com/orgs/aidanmountford @aidanmountford Is this correct?

Does anyone have any examples for using the HTML panel that @psmt referenced in March?

2 Likes

Not sure if I’m doing it right but this works for me.

I’m querying data from MySQL and the table membership_info looks like this.
Screenshot at 2020-08-26 16-38-21

Step 1: Query data on HTML panel
My data query is simply selecting all the columns in the table.

Step 2: Access data in HTML/JavaScript
Referring to ctrl.data[0].rows[0] gives me the result in JSON format {"name":"Rafael Nadal","age":34}, as you can see I printed it on the HTML panel.
Screenshot at 2020-08-26 16-51-47 Screenshot at 2020-08-26 16-52-40


And… Here’s some thoughts
:small_orange_diamond: Right above the JavaScript code section, it says

JavaScript Code: onHandleMetric(ctrl, htmlnode)
* This code is executed upon every refresh
* @param {MetricsPanelCtrl} ctrl Instance of current grafana panel object.
* @param {HTMLElement} htmlnode Html DOM node containi html data.
HTML

So the object ctrl actually has all the information about this panel, such as data you queried and panel attributes etc.

:small_orange_diamond: Perhaps data format returned from other datasources would be different from MySQL, but I guess the data can still be found in the ctrl object.

:small_orange_diamond: Open your browser’s web console and input this line console.log(ctrl) into JavaScript code block, you are able to discover what attributes the ctrl object has.

Hope this helps!