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.

1 Like

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