> ## Documentation Index
> Fetch the complete documentation index at: https://notes.kodekloud.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Demo Building Dashboards in Grafana

> Guide to building a Grafana platform dashboard using Prometheus queries with time series, stat, gauge, and pie panels for monitoring trends, summaries, thresholds, and distributions.

So much observability data becomes noise without effective visualization. Grafana converts Prometheus metrics into clear dashboards so platform health is visible at a glance.

In this lesson we'll build a compact "Platform Dashboard" containing four panel types that cover common observability needs:

* Time series — trending and velocity
* Stat — single current value (summary)
* Gauge — percentage with thresholds
* Pie chart — categorical distribution

Prerequisite: a Prometheus data source must already be configured in Grafana.

***

## 1) Create the dashboard and add a Time series panel

The Time series visualization is the go-to for trends and velocity. Create a new dashboard, add a panel, select your Prometheus data source, and choose the Time series visualization.

![A screenshot of the Grafana dashboard editor showing a new panel with "No data", Prometheus selected as the data source, and visualization options (Time series, Bar chart, etc.) listed in a right-hand pane. The left sidebar shows navigation items like Dashboards, Explore, and Administration.](https://mintcdn.com/kodekloud-c4ac6d9a/seqLTE3JlSrVAtw9/images/Prep-Course-Certified-Cloud-Native-Platform-Engineering-CNPE/Observability-and-Operations/Demo-Building-Dashboards-in-Grafana/grafana-editor-new-panel-prometheus-no-data.jpg?fit=max\&auto=format\&n=seqLTE3JlSrVAtw9\&q=85\&s=3110797dd472ab795903521707e4d367)

Use a PromQL query that computes per-pod request rate over the last 5 minutes. Summing by `pod` produces one series per pod:

```promql theme={null}
sum by (pod) (rate(http_requests_total{namespace="workloads"}[5m]))
```

* Set the panel title to "Request Rate by Pod".
* Adjust the dashboard time range (for example, last 30 minutes) to view recent trends.
* Save the dashboard as "Platform Dashboard".

This Time series chart helps you quickly spot which pods are handling the most traffic and whether traffic distribution is balanced.

***

## 2) Add a Stat panel for an at-a-glance metric

Stat panels are ideal for showing a single current value such as an error count over a time window. Create another panel, choose the Stat visualization, and use this PromQL query to total errors over the last hour:

```promql theme={null}
sum(increase(app_errors_total{namespace="workloads"}[1h]))
```

* Title the panel "Errors Last Hour".
* Configure thresholds in the Stat options (for example: yellow at 80, red above 200) so the numeric display changes color when values cross danger levels.
* Save the panel and return to the dashboard.

![A dark Grafana dashboard displaying a large "712" errors (last hour) overlayed on an upward area chart, with a "Request Rate by Pod" line chart below showing pod request rates over time. The left sidebar shows Grafana navigation (Dashboards, Explore, Alerting, Connections).](https://mintcdn.com/kodekloud-c4ac6d9a/seqLTE3JlSrVAtw9/images/Prep-Course-Certified-Cloud-Native-Platform-Engineering-CNPE/Observability-and-Operations/Demo-Building-Dashboards-in-Grafana/grafana-712-errors-request-rate-pod.jpg?fit=max\&auto=format\&n=seqLTE3JlSrVAtw9\&q=85\&s=4148e8b7e4b30cc7720f5536fc8bbdfb)

In the example above the Stat panel shows 712 errors in the last hour and is colored red based on the configured threshold — an immediate cue to investigate.

***

## 3) Add a Gauge panel for percentage-based metrics

Gauges work well for percentages and visuals that use thresholds. Use a PromQL expression that computes memory used as a percentage of total memory across nodes:

```promql theme={null}
(1 - (sum(node_memory_MemAvailable_bytes) / sum(node_memory_MemTotal_bytes))) * 100
```

* Name the panel "Memory Gauge Panel".
* Configure gauge thresholds (for example: base 0, yellow at 70, red at 90) so the needle or fill color changes as usage moves into risky territory.
* Set the unit to "percent (0-100)" in the visualization options for correct formatting.
* Save the panel and refresh the dashboard to confirm the current value (for example, 24%).

Tip: choose sensible threshold boundaries for your environment — what counts as "high" memory usage can vary by workload and cluster sizing.

***

## 4) Add a Pie chart to show distribution by category

Pie charts are useful for proportional distributions where totals over a window matter. Use `increase()` to get totals rather than per-second rates. For example, to show requests by HTTP status code over the last hour:

```promql theme={null}
sum by (code) (increase(http_requests_total{namespace="workloads"}[1h]))
```

* Title the panel "Pie Chart Panel".
* Enable the legend and show numeric values so each slice displays its count.
* The query groups requests by `code` (e.g. 200, 400, 500), and each status code becomes a slice sized by the number of requests.

When choosing between `rate()` and `increase()`: use `rate()` (per-second velocity) for trend and velocity charts (Time series); use `increase()` when you need totals over a time window (for example, totals for a pie chart or an hourly count).

***

## Panel summary

These four panels together provide a concise platform overview:

| Panel Type | Primary Use Case | Example query |
| - | - | - |
| Time series | Trend and velocity by entity | `sum by (pod) (rate(http_requests_total{namespace="workloads"}[5m]))` |
| Stat | Single current-value indicator | `sum(increase(app_errors_total{namespace="workloads"}[1h]))` |
| Gauge | Percentage with thresholds | `(1 - (sum(node_memory_MemAvailable_bytes) / sum(node_memory_MemTotal_bytes))) * 100` |
| Pie chart | Distribution across categories | `sum by (code) (increase(http_requests_total{namespace="workloads"}[1h]))` |

***

## Save and share

Save your "Platform Dashboard" and share it with teammates. These four visualization types cover most platform-monitoring needs: trends, current-state indicators, thresholded percentages, and category distributions. Adjust queries, time windows, and thresholds to match your workloads and SLAs.

## Links and references

* PromQL basics: [https://prometheus.io/docs/prometheus/latest/querying/basics/](https://prometheus.io/docs/prometheus/latest/querying/basics/)
* `rate()` function: [https://prometheus.io/docs/prometheus/latest/querying/functions/#rate](https://prometheus.io/docs/prometheus/latest/querying/functions/#rate)
* `increase()` function: [https://prometheus.io/docs/prometheus/latest/querying/functions/#increase](https://prometheus.io/docs/prometheus/latest/querying/functions/#increase)
* Grafana documentation: [https://grafana.com/docs/](https://grafana.com/docs/)

> **[Watch Video](https://learn.kodekloud.com/user/courses/prep-course-certified-cloud-native-platform-engineer-cnpe/module/9bd090c8-8d99-4742-b50c-ae63e516e6b9/lesson/320cfa4f-ec80-4db7-a31a-7a76710b44ab)**

> **[Practice Lab](https://learn.kodekloud.com/user/courses/prep-course-certified-cloud-native-platform-engineer-cnpe/module/9bd090c8-8d99-4742-b50c-ae63e516e6b9/lesson/50e87e23-90a6-47de-a06d-721eb5d79c61)**


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.