Marcus Olsson

Grafana

Super-charging Grafana with plugins

0 min read  · 
Grafana Plugins

Guiding panel users with a wizard

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.
less than 1 min read  · 
Grafana Plugins TypeScript

Data frame design: Basics

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.
less than 1 min read  · 
Grafana Plugins

Extend your Grafana experience through plugins

0 min read  · 
Grafana Plugins

How to use template variables in your data source

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.
less than 1 min read  · 
Grafana Plugins TypeScript

Grafana data source for YNAB

An unofficial Grafana data source for You Need A Budget.
0 min read  · 
TypeScript Go Grafana Plugins

How to make user-configurable HTTP requests from your data source plugin

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.
less than 1 min read  · 
Grafana Plugins TypeScript Go

How to instrument your 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.
less than 1 min read  · 
Grafana Plugins Go

How to configure dimensions for your panel plugin

In this post, I want to share a pattern that I’m using for almost all my panel plugins. I call it panel dimensions.
less than 1 min read  · 
Grafana Plugins TypeScript

How to display custom stats for your data source queries

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.
less than 1 min read  · 
Grafana Plugins Go

How to add a resource handler for your data source

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.
less than 1 min read  · 
Grafana Plugins Go

How to migrate from BackendSrv.datasourceRequest() to BackendSrv.fetch()

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().
less than 1 min read  · 
Grafana Plugins TypeScript

How I use Docker for plugin development

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).
less than 1 min read  · 
Grafana Plugins

How to subscribe to Grafana application events

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.
less than 1 min read  · 
Grafana Plugins TypeScript

Grafana Plugins Showcase

0 min read  · 
Grafana Plugins

Creating and using plugins for k6 and Grafana

0 min read  · 
Grafana Plugins

Getting started with Grafana dashboard design

Have you finished experimenting with your first dashboard and are looking to build your first production dashboard? Or perhaps you’re looking to finally give your existing dashboards that well-deserved makeover? In this webinar, you’ll learn how to design dashboards that your users will want to come back to. You’ll learn to define the audience and the context of your dashboard to create dashboards with purpose. Tune in to learn more about:
less than 1 min read  · 
Grafana

Getting started with Grafana 8

Grafana 8.0 is here! In this webinar, Marcus will demo all the highlights of the latest major release: new and updated visualizations and themes, and data source improvements. He will walk you through how to get started using Grafana 8 and the Grafana 8 user interface while showing how to set up monitoring for a web service that uses Prometheus and Loki to store metrics and logs. Discover how to connect, explore, and correlate data in Grafana to gain valuable insights into your application.
less than 1 min read  · 
Grafana

Helpers for Grafana plugin development

This repository contains various helper functions that I’ve found myself reimplementing for my plugins.
0 min read  · 
TypeScript Grafana Plugins

Calendar for Grafana

Display your query results as calendar events.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

6 tips for improving your Grafana plugin before you publish

Are you putting the final touches on your plugin before you submit it to the Grafana plugin page? In this article, I’ll share a few tips for how to add that extra polish to your plugins. This article assumes that you already have some knowledge of building plugins for Grafana. If you’re looking to build your first plugin, start by following one of our plugin tutorials.
less than 1 min read  · 
Grafana

Gantt for Grafana

A panel plugin for Grafana to visualize Gantt charts.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

Hexmap for Grafana

A Grafana panel plugin for hexagonal tiling of data.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

CSV data source for Grafana

Load CSV files into Grafana.
0 min read  · 
TypeScript Go Grafana Plugins React

Build IT Better: DevOps

In this episode, we talk to Marus Olsson, Developer Advocate at Grafana Labs, about Grafana’s open-source tool for observability and monitoring.
less than 1 min read  · 
Grafana

Introduction to Grafana

Grafana is open source visualization and analytics software. It allows you to query, visualize, alert on, and explore your metrics no matter where they are stored. In plain English, it provides you with tools to turn your time-series database (TSDB) data into beautiful graphs and visualizations.
less than 1 min read  · 
Grafana

Monitoring with Grafana

0 min read  · 
Grafana

Learn Grafana: Share query results between panels to reduce load time

As you add more panels to your dashboard, more requests are being made, potentially leading to your dashboard taking longer to load. While you can limit the data requested in each query, one of the best ways to reduce the loading time is to reduce the number of requests being made to the data source. Grafana makes a data source query for each panel in your dashboard, even if those queries are identical.
less than 1 min read  · 
Grafana

JSON API data source for Grafana

A data source plugin for loading JSON APIs into Grafana using JSONPath or JSONata.
0 min read  · 
TypeScript Go Grafana Plugins React

Dynamic text for Grafana

Define text templates using the data from your data source query.
0 min read  · 
TypeScript Grafana Plugins React

Popular community plugins that can improve your Grafana dashboards

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.
less than 1 min read  · 
Grafana Plugins

All about plugins: Building your first panel plugin

Plugins amplify what you can do with Grafana. By creating your own custom visualizations and data source integrations you can bring in your own data and present it in a way that makes sense for you. In this webinar, Solutions Engineer Christine Wang and Developer Advocate Marcus Olsson will show you how you can build a panel plugin to create custom visualizations for Grafana. During this webinar, you will learn about:
less than 1 min read  · 
Grafana TypeScript

Running Chaos Engineering experiments with Gremlin and Grafana

Complex systems fail in complex and unexpected ways. Monitoring is critical to detect and resolve those incidents when they happen. But how do you know your monitoring and alerting are working correctly? Chaos Engineering allows you to validate your monitoring, test your systems with controlled failure, and practice your incident response processes. In this session, we’ll cover how to set up Grafana to quickly identify potential threats and how to get started with Chaos Engineering with Gremlin.
less than 1 min read  · 
Grafana

Getting started with Grafana 7

In this webinar, Marcus will show you how to get started using Grafana. He’ll walk you through the Grafana user interface while showing how to set up monitoring for a web service that uses Prometheus and Loki to store metrics and logs. You’ll learn how to connect, explore, and correlate data in Grafana to gain valuable insights into your application. This webinar requires no previous experience with Grafana.
less than 1 min read  · 
Grafana

Static data source for Grafana

Create static query results for prototyping dashboards and testing panels.
0 min read  · 
TypeScript Go Grafana Plugins React

Learn Grafana: How to build a scatter plot plugin in Grafana 7.0

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.
less than 1 min read  · 
Grafana Plugins TypeScript Data Visualization

Plugin showcase: The hourly heatmap panel, built on Grafana's new plugin platform

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.
less than 1 min read  · 
Grafana Plugins Data Visualization

Treemap for Grafana

Compare data by area and colors.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

Learn Grafana: How to automatically repeat rows and panels in dynamic dashboards

In this blog post — which is part of our Learn Grafana series that covers how to build effective and efficient dashboards — we’ll look at how you can dynamically add and remove entire panels through a feature called repeated panels.
less than 1 min read  · 
Grafana

Hourly Heatmap for Grafana

Aggregate time series by hour to analyze activity or traffic during the day.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

Learn Grafana: How to use dual axis graphs

You’re done setting up your first graph panels in Grafana. You want to do more, look around the visualization settings, and discover the settings for the X and Y axes. You stumble over the configuration for a “Right Y” axis. You ask yourself, “Why on earth would I need another Y axis?”
less than 1 min read  · 
Grafana Data Visualization

Pro Tips: Dashboard Navigation Using Links

Great dashboards answer a limited set of related questions. If you try to answer too many questions in a single dashboard, it can become overly complex. As a consequence, a single dashboard often can’t tell the whole story. So you end up navigating between several, and it can be quite inefficient to search for a particular dashboard every time you need it.
less than 1 min read  · 
Grafana