Skip to main content

Plugins Overview

Grafana architecture allows you to create the following plugins:

  • Visualization panel
  • Data source
  • Application
You can build three types of Grafana plugins.
You can build three types of Grafana plugins.

The materials in this section cover:

  • All plugin types code composition.
  • Grafana Plugin Tools.
  • Where to get basic and real-world examples.

Visualization panel code composition​

From a developer's point of view, a panel plugin consists of two major parts:

  • One is the actual visualization. Take it and make it completely your own.
  • The other one is the Panel Options. It is where Grafana has your user's voice heard.
Visualization panel parts.
Visualization panel parts.

Panel Options​

Panel options are the parameters that you, as a developer, let users configure for your visualization panel. For better organization, they could be split into sections.

info

There might be some confusion related to the "Panel Options" name. From the developer's point of view (in the code) all sections are called "Panel options". Whereas on Grafana UI only one section has this name.

I like to think of the "Panel Options" section as general options (options given by default to any panel) and all other sections are specific to the panel. Where specific means declared by a developer.

Every section can include any number of parameters. Usually, the parameters are a simple text value. You have a choice of many data entering types like text box, drop-down box, toggle, etc. All of those play a role in helping your user to choose one value or the array(s) of values as your panel options.

Another alternative is a Monaco code editor. It can be used to specify the panel configuration in a JSON format or incorporate a JavaScript box and allow your users to place JavaScript scripts right into the parameter section.

Examples of panel option types in the Dynamic Text panel.
Examples of panel option types in the Dynamic Text panel.

Examples​

It is always better to see with your own eyes rather than read someone's description, right?

Panel Options on the Dynamic Text visualization panel contain all three types. This plugin is signed by Grafana, which means you can install it in one click from the Grafana catalog, then select it from the visualization panel drop-down box to check out the Panel Option section firsthand.

By default, the JavaScript box parameter is not turned on. Specify 'JavaScript Code' in the 'Dynamic Text' section.

To review a JavaScript box in the Dynamic Text panel options, ensure to make it visible.
To review a JavaScript box in the Dynamic Text panel options, ensure to make it visible.

Grafana Plugin Tools​

Grafana Plugin Tools consists of two packages that the Grafana team put together as a blow of strong wind in your development sail.

The essential function of the Grafana Plugin Tools is to create the folder structure along with some basic and minimally required configuration files. In the Build a panel plugin section, I share my video with a detailed step-by-step demo of using Grafana Plugin Tools.