# Grafana — Open Source Data Visualization & Observability

> Grafana is the leading open-source platform for monitoring and observability. Visualize metrics, logs, and traces from Prometheus, Loki, Elasticsearch, and 100+ data sources.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
docker run -d --name grafana -p 3000:3000 grafana/grafana-oss:latest
```

Open `http://localhost:3000` — login with admin/admin and start building dashboards.

## Intro

**Grafana** is the leading open-source platform for monitoring, observability, and data visualization. It connects to virtually any data source — Prometheus, InfluxDB, Elasticsearch, PostgreSQL, MySQL, Loki, and 100+ more — and transforms raw metrics, logs, and traces into beautiful, interactive dashboards.

With 73.1K+ GitHub stars and AGPL-3.0 license, Grafana is the industry standard for observability dashboards, used by millions of users from hobbyists monitoring home servers to enterprises running thousands of production services.

## What Grafana Does

- **Dashboards**: Build interactive dashboards with 50+ panel types (graphs, gauges, tables, heatmaps, maps)
- **Data Sources**: Connect 100+ data sources including Prometheus, InfluxDB, Elasticsearch, PostgreSQL, MySQL, Loki, Tempo, and cloud services
- **Alerting**: Define alert rules, notification channels (Slack, PagerDuty, email), and escalation policies
- **Explore**: Ad-hoc query interface for investigating metrics and logs in real-time
- **Annotations**: Mark events on graphs (deploys, incidents, changes) for correlation
- **Variables**: Template variables for dynamic, reusable dashboards
- **Provisioning**: Infrastructure-as-code dashboard and datasource management via YAML/JSON

## Architecture

```
┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  Browser     │────▶│  Grafana     │────▶│  Data Sources│
│  Dashboard   │     │  Server (Go) │     │  Prometheus  │
└──────────────┘     └──────────────┘     │  InfluxDB    │
                                          │  Elasticsearch│
                                          │  PostgreSQL  │
                                          │  Loki (Logs) │
                                          │  Tempo (Traces)│
                                          └──────────────┘
```

## Self-Hosting

### Docker Compose with Prometheus

```yaml
services:
  grafana:
    image: grafana/grafana-oss:latest
    ports:
      - "3000:3000"
    environment:
      GF_SECURITY_ADMIN_PASSWORD: your-password
    volumes:
      - grafana-data:/var/lib/grafana
    depends_on:
      - prometheus

  prometheus:
    image: prom/prometheus:latest
    ports:
      - "9090:9090"
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
      - prometheus-data:/prometheus

volumes:
  grafana-data:
  prometheus-data:
```

## Key Features

### Dashboard Panels

```
Available panel types:
├── Time Series — line/area/bar charts over time
├── Stat — single value with sparkline
├── Gauge — circular gauge with thresholds
├── Bar Chart — categorical comparisons
├── Table — tabular data with sorting/filtering
├── Heatmap — time-based density visualization
├── Geomap — geographic data on world map
├── Logs — log line viewer with search
├── Traces — distributed trace visualization
├── Node Graph — network topology
├── Canvas — custom layout with drag-and-drop
└── 40+ more community panels
```

### PromQL Example (Prometheus)

```promql
# CPU usage per container
rate(container_cpu_usage_seconds_total{namespace="production"}[5m]) * 100

# Request rate
sum(rate(http_requests_total[5m])) by (status_code)

# P99 latency
histogram_quantile(0.99, rate(http_request_duration_seconds_bucket[5m]))

# Error rate percentage
sum(rate(http_requests_total{status=~"5.."}[5m])) / sum(rate(http_requests_total[5m])) * 100
```

### Alerting

```yaml
# Alert rule example
groups:
  - name: critical
    rules:
      - alert: HighErrorRate
        expr: sum(rate(http_requests_total{status=~"5.."}[5m])) / sum(rate(http_requests_total[5m])) > 0.05
        for: 5m
        labels:
          severity: critical
        annotations:
          summary: "Error rate above 5%"
```

### Dashboard as Code

```json
{
  "dashboard": {
    "title": "My Dashboard",
    "panels": [
      {
        "title": "CPU Usage",
        "type": "timeseries",
        "datasource": "Prometheus",
        "targets": [
          {
            "expr": "rate(node_cpu_seconds_total{mode='idle'}[5m])",
            "legendFormat": "{{instance}}"
          }
        ]
      }
    ]
  }
}
```

## LGTM Stack (Full Observability)

Grafana Labs provides a complete open-source observability stack:

| Component | Purpose | Data Type |
|-----------|---------|-----------|
| **Grafana** | Visualization | Dashboards |
| **Loki** | Log aggregation | Logs |
| **Tempo** | Distributed tracing | Traces |
| **Mimir** | Metrics storage | Metrics |
| **Alloy** | Telemetry collector | Collection |

## Grafana vs Alternatives

| Feature | Grafana | Kibana | Datadog | New Relic |
|---------|---------|--------|---------|-----------|
| Open Source | Yes (AGPL-3.0) | Yes (Elastic) | No | No |
| Self-hosted | Yes | Yes | No | No |
| Data sources | 100+ | Elasticsearch | Proprietary | Proprietary |
| Alerting | Built-in | Built-in | Built-in | Built-in |
| Pricing | Free (OSS) | Free (Basic) | $15/host/mo | $0.30/GB |

## FAQ

**Q: Is Grafana beginner-friendly?**
A: Grafana itself has a gentle learning curve — drag panels and pick a data source. The challenge is understanding the data source (e.g., Prometheus's PromQL). Start by importing community dashboards.

**Q: Grafana OSS vs Grafana Cloud?**
A: OSS is the fully free, self-hosted version. Cloud is the managed service, with a free tier including 10K metrics / 50GB logs / 50GB traces. Cloud also adds some features missing from OSS, such as ML-powered alerting.

**Q: Can I embed it in my own app?**
A: Yes. Grafana supports iframe embedding and anonymous access configuration. You can also use Grafana's API to capture panel screenshots.

## Source & Thanks

- GitHub: [grafana/grafana](https://github.com/grafana/grafana) — 73.1K+ ⭐ | AGPL-3.0
- Website: [grafana.com](https://grafana.com)

---
Source: https://tokrepo.com/en/workflows/grafana-open-source-data-visualization-observability-ed1a524f
Author: Grafana Labs