Plugins

Have you ever wanted rotating Notion database views in Obsidian? Marcus Olsson’s Obsidian Projects plugin does exactly that, letting you create Table, Board, Calendar, and Gallery views for the same notes in Obsidian, just like in Notion! Join us as Marcus shows us how this awesome new plugin works and how it can be used to display the same data in different ways.

A series of tutorials where I walk through different aspects of plugin development for Obsidian.

In Data frame design: Basics, I stressed the importance to document the data response that your panel plugin expects from the data source. While you can document it in your README, that would mean the user needs to switch to another tab to understand how to use your panel. In this post, I’ll share a different approach, that lets the user configure the query without leaving Grafana.

Data sources translate data from external services and APIs into a format that panels can understand. In other words, data sources produce data and panels consume data. Generally, data sources don’t know how the data they produce will be presented. While they can suggest a preferred type of visualization, the user is ultimately free to visualize the data in any way they want. In practice, this means that the panel needs the data source to produce the data it needs to do its job.

Template variables enable users to create dashboards that change dynamically based on user input. Since variables have been around in Grafana for a long time, many users expect them to be supported for any data sources they install. In this post, I’ll share some tips on how you can use template variables in your data source plugin.

An unofficial Grafana data source for You Need A Budget.

If your data source retrieves data from an official, well-defined API, you can simplify your data source configuration by only asking for the relevant data, such as the API token. However, if the user should be able to access data from any given HTTP endpoint, you probably want to let them configure things like authentication headers and query parameters to fit their needs. In this post, I’ll explain how you can build a configurable HTTP-based backend data source.

In my previous post on how to display custom stats for your data source queries, I explained how you can return metrics about the query back to the user. This can be useful to dashboard authors who want to troubleshoot or optimize their queries. As an administrator however, you might want to understand how the data source performs over time, across dashboards. In this post, I’ll show you how you can instrument your backend data source using Prometheus.

In this post, I want to share a pattern that I’m using for almost all my panel plugins. I call it panel dimensions.

The Query inspector in Grafana can be helpful when you’re trying to figure out why your query is failing, or why it’s taking too long to return a result. While Grafana displays some basic information about your query by default, in this post you’ll learn how to add your own stats for you query.

The primary way for a data source to retrieve data is through the query method. But sometimes your data source needs to request auxiliary data on demand, for example to offer auto-completion inside the data source’s query editor. In this post, I want to show you how to add a resource handler to your data source. By adding a resource handler to your backend plugin, you can extend the Grafana HTTP API with your own data source-specific routes.

If you’re building a data source plugin, chances are you want to make HTTP requests from your TypeScript code to a HTTP API somewhere. In the past, the preferred way to make an HTTP request from your plugin was to use the BackendSrv.datasourceRequest(), which has been deprecated in favor of BackendSrv.fetch().

I thought I’d share how I use Docker for developing plugins. Docker makes it really easy for me to test my plugin against multiple versions of Grafana. For example, to make sure that the plugin still works with the earliest supported version of Grafana (as defined by grafanaDependency in plugin.json).

If you’re building a panel plugin, Grafana already provides the data you need to configure and render your panel. If not, you can retrieve the information you need from any of the runtime services, like BackendSrv and TemplateSrv. In some cases though, you want your plugin to react to changes outside of your plugin. For example, when the user hovers their cursor over data in another panel. In this post, you’ll learn how to make your plugin react to events in Grafana.

An Obsidian plugin that adds pipe tricks to the Wikilink format used by Obsidian

A Vale client for Obsidian.

Unofficial documentation for Obsidian plugin development.

This repository contains various helper functions that I’ve found myself reimplementing for my plugins.

Display your query results as calendar events.

A panel plugin for Grafana to visualize Gantt charts.

A Grafana panel plugin for hexagonal tiling of data.

Load CSV files into Grafana.

A data source plugin for loading JSON APIs into Grafana using JSONPath or JSONata.

Define text templates using the data from your data source query.

One thing we believe at Grafana Labs is that your data should be presented in a way that makes sense to you. Since the release of Grafana v7.0, we’ve seen a lot more developers taking advantage of the new plugins platform, which helps them build high-quality custom plugins faster than ever. Not only does this allow them to create their own custom visualizations and data source integrations—taking the Grafana experience to the next-level—but by sharing them with the community, they’re able to help others do the same.

Create static query results for prototyping dashboards and testing panels.

There are a lot of great things about Grafana 7.0, but one of my favorite features is the new React-based plugin platform, which has a set of new APIs and design system to help you build your own plugin. The process is easier and faster than ever. In this blog post, I’ll show how you can create a panel plugin for visualizing scatter plots.

Since Petr Slavotinek created the Carpet plot plugin in 2017, it’s been one of the most popular community plugins for Grafana. Unfortunately, even though the Carpet plot plugin continues to be useful to many users, it’s no longer being maintained. Grafana 7.0 introduced a brand new React-based platform, along with a set of improved APIs for building plugins. Since I knew some React from previous projects, I wrote my first Grafana plugin that would adapt the original Carpet plot to the new plugin platform.

Compare data by area and colors.

Aggregate time series by hour to analyze activity or traffic during the day.