---
name: azion-build-a-custom-grafana-dashboard
description: >-
  Add a Grafana panel that plots Real-Time Metrics data through the Azion data source, map its response fields, and save the dashboard.
---

# Build a custom Grafana dashboard

You can build a Grafana dashboard of your own, with panels that send GraphQL queries to [Real-Time Metrics](/en/documentation/platform/real-time-metrics/) through the Azion data source plugin. Each panel plots the data you choose in its query. To import the ready-made Data Transferred dashboard instead, refer to [Import the pre-built Grafana dashboard](/en/documentation/guides/platform/observability/azion-plugin-grafana-pre-built-dash/).

## Prerequisites

- A local Grafana instance with the Azion plugin installed and an Azion data source created. To set up both, refer to [Install the Azion plugin for Grafana](/en/documentation/guides/platform/observability/integrate-grafana/).
- An [application](/en/documentation/platform/applications/) that served requests in the range the panel plots.

---

## Add a panel that queries Real-Time Metrics

A panel holds one GraphQL query, and the Azion data source sends it to the Real-Time Metrics API. The query on this page reads the `httpMetrics` dataset, which records the requests of your applications. It returns the data transferred per minute over 24 hours:

```graphql
query DataTransferredOverTime {
  httpMetrics(
    limit: 2000
    filter: { tsRange: { begin: "2026-01-01T12:00:00.000Z", end: "2026-01-02T12:00:00.000Z" } }
    groupBy: [ts]
    orderBy: [ts_ASC]
  ) {
    ts
    dataTransferredIn
    dataTransferredOut
    dataTransferredTotal
  }
}
```

Replace the `begin` and `end` values with the range you want to plot. Without `limit`, the API returns 10 rows, so `limit: 2000` keeps every minute of a 24-hour range.

The query returns one row for each minute that had traffic, in time order:

```json
{
  "data": {
    "httpMetrics": [
      {
        "ts": "2026-01-01T13:04:00Z",
        "dataTransferredIn": 13094.0,
        "dataTransferredOut": 2649889.0,
        "dataTransferredTotal": 2662983.0
      },
      {
        "ts": "2026-01-01T13:06:00Z",
        "dataTransferredIn": 7470.0,
        "dataTransferredOut": 986551.0,
        "dataTransferredTotal": 994021.0
      },
      …
    ]
  }
}
```

The values are in bytes, and `dataTransferredTotal` is the sum of `dataTransferredIn` and `dataTransferredOut`. For every field of the dataset, refer to [Real-Time Metrics GraphQL fields](/en/documentation/devtools/graphql/gql-real-time-metrics-fields/#workloadmetrics).

To add the panel in Grafana:

1. **Open the dashboards**

   In the Grafana menu, select **Dashboards**.

2. **Create a dashboard**

   Select **New** > **New Dashboard**.

3. **Add a panel**

   In the **Add panel** card, select **Add a new panel**.

4. **Select the Azion data source**

   In the **Data source** list, select **Azion**.

5. **Paste the query**

   In the query code box, paste the `DataTransferredOverTime` query.

The panel preview reads the rows of the query through the Azion data source.

> **Tip**
>
> To start from a Real-Time Metrics chart in Azion Console, open the chart's **More options** menu and select **Copy query**. The copied text holds the query under `# QUERY` and the values of its variables under `# VARIABLES`. Write each value into the query in place of its variable before you paste it. For the steps, refer to [Export a chart's data and query](/en/documentation/guides/platform/observability/analyze-metrics/).

---

## Map the response fields

Five optional fields tell the panel how to read the rows the query returns. Which ones a panel needs depends on its visualization and on what the graph shows. The five fields take these values:

| Field           | What it takes                                                                                                                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| **Data path**   | The value `Metrics`.                                                                                                         |
| **Time path**   | The path to the timestamp of each row, delimited by dots. The `DataTransferredOverTime` query returns the timestamp in `ts`. |
| **Time format** | The format of that timestamp, written in moment.js format.                                                                   |
| **Group by**    | The field that groups the aggregated data into series.                                                                       |
| **Alias by**    | The name and value a field shows in the legend.                                                                              |

---

## Choose a visualization and save

The visualization sets how the panel draws the rows. A query grouped by `ts`, such as `DataTransferredOverTime`, returns one row per time bucket.

To finish the panel in Grafana:

1. **Select a visualization**

   In the **Visualization** list, select a visualization type. For example: **Time series**.

2. **Save the dashboard**

   Select **Save** to apply the configuration.

The dashboard keeps the panel with its query, its field mapping, and its visualization.

---

## Next steps

- [Export a chart's data and query](/en/documentation/guides/platform/observability/analyze-metrics.md): Copy the query behind any Real-Time Metrics chart and reuse it in a panel.
- [Real-Time Metrics fields](/en/documentation/devtools/graphql/gql-real-time-metrics-fields.md): Every dataset and field a panel query can select, with its type.
- [Import the pre-built Grafana dashboard](/en/documentation/guides/platform/observability/azion-plugin-grafana-pre-built-dash.md): Add the ready-made Data Transferred dashboard to Grafana without writing a query.
- [Queries](/en/documentation/devtools/graphql/queries.md): Filters, aggregations, grouping, and ordering for the queries your panels send.