Guidance for Creating Custom Graph in Grafana 10

Hello everyone,

I’m currently working on a project where I need to create a custom visualization graph. This graph has already been implemented in Grafana 6, and my task is to rewrite it for Grafana 10.

The previous developer used the p5 library along with p5-react-wrapper to create the graph. While that works, I’m wondering if there are best practices or alternative methods for creating custom graphs without using p5.

I’m developing the project using React 18 and Node 18, and I’m seeking some guidance on how best to proceed. Attached below is a screenshot of how the graph looked in Grafana 6.

Any advice or documentation would be greatly appreciated.

Thank you!

Are you writing a plugin?

That graph looks likr your basic time series that comes out of the box with grafana

Looking at the p5 library, it allows to do a lot of dynamic visualizations, 3D, etc. The question is which visualizations were implemented in Grafana 6.

Grafana 10 provides many native and community panels, which should work out of the box.

Yes I know… But some company hired me to rewrite it from grafana 6 to grafana 10 plugin

Only 2D that’s way I don’t know why the previous developer took this approach with 5 . Okay but if somebody would need to write a custom one what would be the best approach to do that. I think that only Custom panel should be made… But I don’t know how to make only that without making new chart as well…

1 Like

For the start I would very much appreciate the code of this build in graph

Hi @davidkramer12

You can play around with the latest Grafana out-of-the-box features (e.g. left and right Y-axes) here. There are a lot of customization features in v10 that may not have existed in v6.

Do you already have a working installation of Grafana 10, and if yes, have you tried pasting your Influx query into that?

@davidkramer12 Looking at the provided screenshots, it should be supported out of the box.

If something is missing in the native Time Series panel, you have multiple options:

  1. Update the decoupled Time Series panel or fork Grafana and update it directly.
  2. Depending on the use case, use Apache ECharts or Plotly community plugins.
  3. Create a totally new React plugin based on Grafana Tools: Grafana // developer portal.

So do you have experience building grafana plugin or react development experience?

Also do you have access to the previous plugin source code

1 Like

This is the first time building grafana plugin. And yes I have aprox. 3 years of React development. It’s just hard time navigation and figure it out what previous developer had in mind why it was he took this approach 3.

And yes I have previous code. But it’s written so bad… Everything in one file… The created with React custom panels so (x-asix,y-asxis options etc.) then for the chart he used p5 wrapper and p5 and p5 so where the graph is build it’s like 900 lines of code with no comments and no logical naming…

I’ve already figure out most of logic but he so overcomplicated thing that I can’t get my head around… And the module.tsx has like 1000 lines of code… In module.ts he proccesed data and made graph, PanelOptions…

Ouch that is tough @davidkramer12 . if first time please read the documentation.

This is a great resource to check out also

1 Like

Yes I have installed latest grafana and the latest grafana plugin package for development. And yes I have already pasted that influx Query and I get the data as well… Well the biggest problem is the code previous developer wrote i can’t figure it out really…

1 Like

Yes I did watch the video… I read the documentation as well… Yea I still can’t belavie that this even works… Because based on code he had 0 experience with React or any development I would say…

Pretty amazing for a person with 0 experience they built something that has lasted this long.

Either upgrade/migrate that plugin


Write from scratch

Yes, Aggreed.

No going with migration has no point… I already started rewriting right now I have a problem that he created on every Data series a new series data in real life looks like this

In the code

so on every new Data there will be this new series. So the problem is I have zero clue if there is the same option in Grafana 10 to replecaite this.

what are the requirements of this plugin in plain English. Using legacy code as requirements is only going to lead you into a tar pit.

This is Vector plugin and enables the display of vector channels in Grafana. Typical
vector channels are FFTs and Scope Math channels.
But quite hard to explain… These are docs where everything is more explained

1 Like