Learn Observability with the LGTM Stack - Grafana Fundamentals - Visualization & Dashboards

#Introduction

From episode 4, your local stack is already running. Now it's time to learn the component that is the center of interaction: Grafana. Grafana is the visualization platform that unifies metrics from Mimir, logs from Loki, and traces from Tempo in a single interface.

This episode covers Grafana's architecture, UI navigation, creating your first dashboard and panels, variables and templating, panel types, and the differences between the three query editors: PromQL, LogQL, and TraceQL. After this episode, you'll feel comfortable exploring Grafana on your own.

#Grafana Architecture

Grafana runs as a simple web server that loads data source and panel plugins. Its structure:

• Server architecture: a single Grafana process serves the UI, API, and authentication. Data is stored in an internal database (SQLite by default) to store dashboards and users.
• Data source plugins: each backend — Mimir, Loki, Tempo — connects through a plugin. These plugins bridge the query from the UI to each backend's query language.
• Panel types: each panel in a dashboard is rendered by a panel plugin, for example time series, stat, gauge, table, heatmap, logs, traces, and node graph.
• Dashboard JSON model: an entire dashboard is actually a JSON document. This matters because it allows dashboards to be stored as code — covered in episode 30.
• Authentication and authorization: Grafana supports built-in authentication, OAuth, and LDAP, plus the Admin, Editor, and Viewer roles — details in episode 25.

curl -s http://localhost:3000/api/health

The api/health endpoint returns the server status along with the Grafana version — the habit of validating via the API will be very helpful when debugging.

#Getting Started

#UI Navigation

After logging in, Grafana's main structure consists of:

• Home: the home page with a list of favorite dashboards.
• Dashboards: manage and create dashboards.
• Explore: free-form query mode without having to save to a dashboard.
• Alerting: manage alert rules and contact points.
• Connections: manage data sources and plugins.

#Creating Your First Dashboard

Click Dashboards → New → New dashboard, then Add visualization. Select the Mimir data source, and Grafana will open the query editor with an example query. To make sure Mimir has data, start with an empty query and pick any metric available via the dropdown.

up
mimir_ingester_ingested_samples_total

Both metric names above are real examples; up will always exist because it's generated by the scraping mechanism.

#Panel Types

Grafana provides many panel types. The most commonly used:

• Time series graphs: line charts for time-based metrics — the most basic panel type.
• Stat panels: one big number, good for showing the latest value.
• Gauge and bar gauges: values with visual limits, like a car dashboard.
• Tables: display data in tabular form.
• Heatmaps: distribution of values over time, great for spotting latency patterns.
• Logs panels: display log lines with level highlighting.
• Traces panels: waterfall visualization of Tempo traces.
• Node graphs: maps of relationships between services, generated from Tempo's service graph metrics.

type: timeseries
fieldConfig:
  defaults:
    unit: ops
  overrides: []
options:
  legend:
    displayMode: list
  tooltip:
    mode: multi

Using fieldConfig and options are the two main blocks in every panel's JSON model. Understanding both makes it easy to edit dashboards as code in episode 30.

#Query Editors

#Differences Between the Three Editors

• PromQL editor (Mimir): write metric queries like rate(http_requests_total[5m]). PromQL is covered thoroughly in episode 7.
• LogQL editor (Loki): write log queries like {job="checkout"} |= "error". LogQL is covered in episode 10.
• TraceQL editor (Tempo): write trace queries like { span.http.status_code >= 500 }. TraceQL is covered in episode 15.

#Query Transformations and Inspector

The Transformations feature lets you modify query results inside a panel without changing the data source — for example merging two queries or computing a ratio. Meanwhile, Query inspector shows the raw request sent to the backend, useful when a query behaves unexpectedly.

#Variables and Templating

Variables allow one dashboard to be reused across many contexts. Variable definitions are done in Dashboard settings → Variables. Here's an example service variable that fills a dropdown from a metric label:

name: service
type: query
query: label_values(up, job)

With this variable, panel queries become rate(http_requests_total{job="$service"}[5m]), and you can switch services just by changing the dropdown selection. You'll see the pattern {job="$service"} very often in production dashboards.

#Closing

In episode 5 you understood Grafana's plugin-based architecture for data sources and panels, successfully created your first dashboard and panel, learned eight of the most useful panel types, understood the differences between the PromQL, LogQL, and TraceQL query editors, and used variables for dynamic dashboards.

The key takeaways:

• Grafana is a server that loads data source and panel plugins.
• Dashboards are JSON documents, so they can be managed as code.
• Time series, stat, gauge, logs, traces, and node graph panels serve different needs.
• Three query editors: PromQL for Mimir, LogQL for Loki, TraceQL for Tempo.
• Variables let one dashboard serve many services.
• Query inspector is the first debugging tool when a query looks odd.

In the next episode 6 we'll discuss metrics with Mimir — the architecture of the distributor, ingester, querier, and store-gateway components, a comparison with Prometheus, and metric types and cardinality considerations. Your empty dashboards will soon be filled with real data.