Elysia Tools

Browse tools, examples, visual explainers, and topic guides from one clear workspace.

Top Categories

Hubs

Language
ZHESPTRUFRDEEN

Elysia Tools

Navigation

Monitoring

Grafana Advanced Application Samples

Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development

Samples

Entries inside this sample collection

ConfigComplex

Advanced Dashboard Layout Design

Complex multi-row dashboard with dynamic variables, conditional panels, and responsive layout for comprehensive system monitoring

Difficulty

8/10

Estimated time

35 min

Tags

dashboard, layout, variables, conditional, responsive, panels

config
{
  "annotations": {
    "list": [
      {
        "builtIn": 1,
        "datasource": "-- Grafana --",
        "enable": true,
        "hide": true,
        "iconColor": "rgba(0, 211, 255, 1)",
        "name": "Annotations & Alerts",
        "type": "dashboard"
      }
    ]
  },
  "editable": true,
  "fiscalYearStartMonth": 0,
  "graphTooltip": 0,
  "id": null,
  "links": [],
  "liveNow": false,
  "panels": [
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "thresholds"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              },
              {
                "color": "red",
                "value": 80
              }
            ]
          },
          "unit": "short"
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 0,
        "y": 0
      },
      "id": 1,
      "options": {
        "colorMode": "background",
        "graphMode": "area",
        "justifyMode": "auto",
        "orientation": "auto",
        "reduceOptions": {
          "calcs": [
            "lastNotNull"
          ],
          "fields": "",
          "values": false
        },
        "textMode": "auto"
      },
      "pluginVersion": "9.0.0",
      "targets": [
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${DS_PROMETHEUS}"
          },
          "expr": "up{job="$service"}",
          "instant": true,
          "legendFormat": "",
          "refId": "A"
        }
      ],
      "title": "Service Status",
      "type": "stat"
    },
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "vis": false
            }
          },
          "mappings": []
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 12,
        "x": 12,
        "y": 0
      },
      "id": 2,
      "options": {
        "legend": {
          "displayMode": "list",
          "placement": "right",
          "values": []
        },
        "pieType": "pie",
        "reduceOptions": {
          "calcs": [
            "lastNotNull"
          ],
          "fields": "",
          "values": false
        },
        "tooltip": {
          "mode": "single",
          "sort": "none"
        }
      },
      "targets": [
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${DS_PROMETHEUS}"
          },
          "expr": "sum by (status) (http_requests_total{job="$service"})",
          "legendFormat": "{{status}}",
          "refId": "A"
        }
      ],
      "title": "HTTP Status Codes",
      "type": "piechart"
    },
    {
      "datasource": {
        "type": "prometheus",
        "uid": "${DS_PROMETHEUS}"
      },
      "fieldConfig": {
        "defaults": {
          "color": {
            "mode": "palette-classic"
          },
          "custom": {
            "axisLabel": "",
            "axisPlacement": "auto",
            "barAlignment": 0,
            "drawStyle": "line",
            "fillOpacity": 10,
            "gradientMode": "none",
            "hideFrom": {
              "legend": false,
              "tooltip": false,
              "vis": false
            },
            "lineInterpolation": "linear",
            "lineWidth": 1,
            "pointSize": 5,
            "scaleDistribution": {
              "type": "linear"
            },
            "showPoints": "never",
            "spanNulls": false,
            "stacking": {
              "group": "A",
              "mode": "none"
            },
            "thresholdsStyle": {
              "mode": "off"
            }
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "color": "green",
                "value": null
              }
            ]
          },
          "unit": "reqps"
        },
        "overrides": []
      },
      "gridPos": {
        "h": 8,
        "w": 24,
        "x": 0,
        "y": 8
      },
      "id": 3,
      "options": {
        "legend": {
          "calcs": [],
          "displayMode": "list",
          "placement": "bottom"
        },
        "tooltip": {
          "mode": "single",
          "sort": "none"
        }
      },
      "targets": [
        {
          "datasource": {
            "type": "prometheus",
            "uid": "${DS_PROMETHEUS}"
          },
          "expr": "sum(rate(http_requests_total{job="$service"}[5m])) by (method, status)",
          "legendFormat": "{{method}} {{status}}",
          "refId": "A"
        }
      ],
      "title": "Request Rate",
      "type": "timeseries"
    }
  ],
  "refresh": "5s",
  "schemaVersion": 37,
  "style": "dark",
  "tags": [],
  "templating": {
    "list": [
      {
        "current": {
          "selected": false,
          "text": "All",
          "value": "$__all"
        },
        "datasource": {
          "type": "prometheus",
          "uid": "${DS_PROMETHEUS}"
        },
        "definition": "label_values(http_requests_total, job)",
        "hide": 0,
        "includeAll": true,
        "label": "Service",
        "multi": true,
        "name": "service",
        "options": [],
        "query": {
          "query": "label_values(http_requests_total, job)",
          "refId": "StandardVariableQuery"
        },
        "refresh": 1,
        "regex": "",
        "skipUrlSync": false,
        "sort": 0,
        "type": "query"
      }
    ]
  },
  "time": {
    "from": "now-1h",
    "to": "now"
  },
  "timepicker": {},
  "timezone": "",
  "title": "Advanced System Monitoring Dashboard",
  "uid": "advanced-system-monitoring",
  "version": 1,
  "weekStart": ""
}
format
JSON
version
9.x
panels
["stat","graph","heatmap","table","gauge","progress"]
features
["templating","annotations","variables","row-repeat"]
dataSources
["prometheus","influxdb","elasticsearch"]
ConfigIntermediate

Multi-Channel Alerting Configuration

Comprehensive alerting setup with multiple notification channels, escalation rules, and intelligent alert grouping

Difficulty

6/10

Estimated time

25 min

Tags

alerting, notifications, escalation, slack, email, webhook, alertmanager

config
# Grafana Alerting Configuration
# Multi-channel notification rules setup

groups:
  - name: system_alerts
    rules:
      - alert: HighErrorRate
        expr: rate(http_requests_total{status=~"5.."}[5m]) / rate(http_requests_total[5m]) > 0.05
        for: 2m
        labels:
          severity: warning
          team: backend
        annotations:
          summary: "High error rate detected"
          description: "Error rate is {{ $value | humanizePercentage }} for {{ $labels.job }}"

receivers:
  - name: slack
    slack_configs:
      - api_url: "https://hooks.slack.com/services/YOUR/SLACK/WEBHOOK"
        channel: "#alerts"
        send_resolved: true

  - name: email
    email_configs:
      - to: "[email protected]"
        from: "[email protected]"
        subject: "Grafana Alert: {{ .GroupLabels.alertname }}"

  - name: webhook
    webhook_configs:
      - url: "http://alertmanager.example.com/api/v1/alerts"
        send_resolved: true
format
YAML
version
9.x
channels
["slack","email","webhook","discord","teams"]
features
["escalation","grouping","silencing","inhibition"]
alertTypes
["threshold","no-data","error","anomaly"]
ConfigIntermediate

Prometheus Data Source Integration

Advanced Prometheus integration with complex queries, recording rules, and federation setup for large-scale monitoring

Difficulty

7/10

Estimated time

20 min

Tags

prometheus, datasource, queries, recording-rules, federation

config
# Prometheus Data Source Configuration
apiVersion: 1

datasources:
  - name: Prometheus
    type: prometheus
    access: proxy
    url: http://prometheus:9090
    isDefault: true
    editable: true
    jsonData:
      timeInterval: "5s"
      queryTimeout: "60s"
      httpMethod: POST

# Recording Rules Example
groups:
  - name: grafana.rules
    rules:
      - record: instance:node_cpu:rate5m
        expr: 100 - (avg by (instance) (rate(node_cpu_seconds_total{mode="idle"}[5m])) * 100)

      - record: instance:node_memory_usage:percentage
        expr: (1 - (node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes)) * 100

      - record: job:node_memory_bytes_available:percentage
        expr: (node_memory_MemAvailable_bytes / node_memory_MemTotal_bytes) * 100
format
YAML
version
9.x
features
["query-complexity","recording-rules","federation","remote-read"]
functions
["rate","increase","histogram_quantile","aggregation"]
optimizations
["query-caching","time-series-compression"]
CodeComplex

Custom Panel Plugin Development

Complete Grafana panel plugin implementation with React, TypeScript, and advanced data visualization features

Difficulty

9/10

Estimated time

45 min

Tags

plugin, development, react, typescript, visualization, custom-component

plaintext
# Sample Grafana Configuration
# Basic example for demonstration purposes

version: "9.0.0"

# Example query
query: rate(http_requests_total[5m])

# Example dashboard variables
variables:
  - name: service
    type: query
    datasource: Prometheus
    query: label_values(http_requests_total, job)
format
TypeScript/React
framework
React
dependencies
["@grafana/data","@grafana/ui","@types/react"]
features
["data-streaming","interactive","responsive","theming"]
build
webpack
test
jest
ConfigComplex

Dashboard as Code Automation

Infrastructure as Code approach for managing Grafana dashboards using Terraform and automated deployment pipelines

Difficulty

8/10

Estimated time

30 min

Tags

infrastructure-as-code, terraform, automation, deployment, version-control

config
# Sample Grafana Configuration
# Basic example for demonstration purposes

version: "9.0.0"

# Example query
query: rate(http_requests_total[5m])

# Example dashboard variables
variables:
  - name: service
    type: query
    datasource: Prometheus
    query: label_values(http_requests_total, job)
format
HCL
tool
Terraform
version
>=1.0
providers
["grafana","prometheus"]
features
["state-management","modular","reusable","validated"]
ConfigComplex

Multi-Data Source Correlation

Advanced dashboard demonstrating correlation between different data sources with time-series alignment and cross-source analytics

Difficulty

8/10

Estimated time

30 min

Tags

correlation, multi-datasource, time-series, analytics, cross-source

config
# Sample Grafana Configuration
# Basic example for demonstration purposes

version: "9.0.0"

# Example query
query: rate(http_requests_total[5m])

# Example dashboard variables
variables:
  - name: service
    type: query
    datasource: Prometheus
    query: label_values(http_requests_total, job)
format
JSON
version
9.x
dataSources
["prometheus","influxdb","elasticsearch","loki","postgresql"]
features
["data-transformation","join-queries","time-alignment","correlation-analysis"]
visualizations
["scatter-plot","correlation-matrix","heatmaps"]

Tools

Tools frequently paired with this sample

Related

Related sample collections

Related

Related workflows

Tool usage guide

Sample-focused context for search and workflow understanding

Title

Grafana Advanced Application Samples

Description

Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development

Overview

Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development

When to use

  • Use this sample set when you want reference inputs for Grafana Advanced Application Samples.
  • Use it to preview output formats and compare related sample variants.

How it works

  1. 1Open a sample entry to inspect the prepared example payload or asset.
  2. 2Compare it with related tools to understand how the workflow connects.

Use cases

  • Advanced Dashboard Layout Design
  • Multi-Channel Alerting Configuration
  • Prometheus Data Source Integration
  • Custom Panel Plugin Development
  • Dashboard as Code Automation
  • Multi-Data Source Correlation

FAQ

What is included in Grafana Advanced Application Samples?

This page includes curated sample entries, related tools, and neighboring sample collections for Grafana Advanced Application Samples.

Hub

Infer JSON Schema from Samples and Spreadsheets

Derive a reviewable JSON Schema draft from representative JSON samples or XLSX rows, then inspect types, requiredness, nulls, and outliers before treating it as a contract.

Hub

Application Field Policy Validation

Define and test product-owned password and color-code rules while separating application allowlists and ranges from generic validator results.

Hub

Backup Archive Restore Drill and Evidence

Plan a bounded backup restore drill, inspect a ZIP copy, recover selected files, compare trusted hashes and record application usability, timing and unresolved failures.

Hub

API Versioning and Breaking Change Review

Compare API versions, plan migrations, and accept compatibility before release. These tools do not replace real deployment or runtime monitoring.

Home
Tools3201
Samples593
Visualizations465
Viewers103
Hubs233
Tags333
Images, Audio & Video657

Image, audio, and video processing, conversion, and optimization tools

Math, Date & Finance644

Calculators, numerics, date logic, statistics, and finance tools

Design & Color297

Color, layout, graphics, visual styling, and design helper tools

Text & Writing209

Writing, cleanup, formatting, extraction, and text analysis tools

Developer & Web193

Developer utilities, networking, web debugging, and automation helpers

Conversion & Encoding175

Format, file, archive, unit, and encoding conversion tools

FLAC/WAV Source Screening and Evidence Handoff
Self-Hosted Giveaway Widget Review and Embed Handoff
Stripe Promo Code Batch Review and Import Preflight
Batch Photo Culling Review and Editing Shortlist Handoff
UI Screenshot Structure Review and Development Handoff

© 2026 Elysia Tools. All rights reserved.

DocsPricingAboutTerms of ServicePrivacy PolicyCookiesContact

Development

Data URI Generator

Convert files into Data URIs (Base64 or percent-encoded) for inlining images, fonts, and assets directly into HTML, CSS, or Markdown

Design

Image Palette to Design Tokens

Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each

AI Tools

Receipt & Invoice OCR Recognition

Extract key information from receipt/invoice images and convert to custom JSON format using AI vision models

AI Tools

AI ID Card OCR Recognition

Extract key information from ID card images and convert to JSON format using AI vision models for free

Document Tools

PDF Invoice Generator

Generate a branded invoice PDF from structured line items

AI Tools

UI Screenshot to Structured JSON

Turn a screenshot into an editable visual layout tree, component inventory and coding handoff.

Media

Batch Image Crop

Batch crop multiple images to specific dimensions or aspect ratios with custom positioning. Returns cropped images as a ZIP download.

Media

Image Resizer

Professional image resizing tool with multiple resize methods, aspect ratio preservation, and format conversion, supporting GIF/Animated WebP/APNG and JPEG/PNG/WEBP.

Developer Tools

Rome JavaScript Toolchain Samples

Rome JavaScript toolchain examples including configuration, linting, formatting, bundling, and project management

Build Tools

SWC Rust Compiler Samples

Speedy Web Compiler (SWC) examples including configuration, plugins, and integration with modern JavaScript/TypeScript projects

Observability

Distributed Tracing Samples

Comprehensive distributed tracing examples using Jaeger, OpenTelemetry, and other modern observability tools for microservices architecture

Monitoring & Observability

Datadog Monitoring Samples

Comprehensive Datadog monitoring and observability configuration examples including APM, logs, metrics, and dashboards

Document

PDF Samples

Generated PDF samples from tools dated 2026-02-01 to 2026-02-10

Database

CouchDB Database Samples

Apache CouchDB NoSQL database examples including document operations, views, and replication