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 
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.
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.
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.
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.
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?
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.
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.
And… Here’s some thoughts
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.
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.
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!
Guys are any other examples on the internet of how to use the HTML plugin?
The docs are really thin on useful information … 
