---
title: "How to Create a Grafana Dashboard to Visualize Data"
published: 2024-02-26T05:37:24.000-05:00
updated: 2024-02-26T05:37:24.000-05:00
excerpt: "Learn how to visualize your data by creating a dashboard and panel using Grafana and TimescaleDB."
tags: Data Visualization, #CTA-docs-grafana, Tutorials
authors: Avthar Sewrathan
---

> **TimescaleDB is now Tiger Data.**

A popular data visualization tool, Grafana allows you to create customizable dashboards and effectively monitor your systems and applications.

Grafana is organized into `Dashboards` and `Panels`. A dashboard represents a  
view into the performance of a system, and each dashboard consists of one or  
more panels, which represent information about a specific metric related to  
that system.

In this tutorial, you'll build a simple dashboard, connect it to TimescaleDB,  
and visualize data.

## Prerequisites

Before you begin, make sure you have:

-   [Created a free Timescale account](https://console.cloud.timescale.com/signup) or [installed self-hosted TimescaleDB](https://docs.timescale.com/self-hosted/latest/install/).
-   [Set up a Grafana connection](https://docs.timescale.com/use-timescale/latest/integrations/observability-alerting/grafana/installation/).

When your installation of TimescaleDB and Grafana is complete, ingest the data  
found in the [NYC Taxi Cab](https://docs.timescale.com/tutorials/latest/nyc-taxi-cab/) tutorial and configure Grafana to connect  
to that database.

### Build a new dashboard

Start by creating a new dashboard. In the far right toolbar of the Grafana user  
interface, you'll see a `+` icon. Select it and select `New dashboard`.

After creating a new dashboard, you'll see a `New dashboard` screen. To proceed with the tutorial, add a new visualization by clicking the `+ Add visualization` option.

In `Select data source`, select the connection to your NYC Taxi Data that you created earlier.

![The Grafana UI in the select data source page. Your data sources are on the left](https://timescale.ghost.io/blog/content/images/2024/02/create-dashboard-and-panel-select-data-source.png)

At this point, you'll have several options for different Grafana visualizations on the right-hand side of the panel. Select `Visualizations` and then select `Time series`.

![The Grafana UI: in the right nav, you can choose your visualization option. Time Series is highlighted](https://timescale.ghost.io/blog/content/images/2024/02/create-dashboard-and-panel-select-time-series-visualization.png)

Next, you will need to create a query for your data. The query builder is below the visualization panel. You have two options for building a query: `Builder` (the form-based query editor) and `Code`. Select `Code`.

![The Grafana UI: the cursor is selecting the Code tab at the bottom left corner of the image.](https://timescale.ghost.io/blog/content/images/2024/02/create-dashboard-and-panel-sql-editor.png)

After switching to `Code`, from the `Format` drop-down, select `Time series`.

![The Grafana UI: in the left, you can choose the format of your visualization. The cursor is selecting time series](https://timescale.ghost.io/blog/content/images/2024/02/create-dashboard-and-panel-select-time-series.png)

### Visualize metrics stored in TimescaleDB

Start by creating a visualization that answers the question, "How many  
rides took place on each day?" from the [NYC Taxi Cab](https://docs.timescale.com/tutorials/latest/nyc-taxi-cab/) tutorial.

From the tutorial, you can see the standard SQL syntax for our query:

```sql
SELECT date_trunc('day', pickup_datetime) AS day,
  COUNT(*)
FROM rides
GROUP BY day
ORDER BY day;
```

You need to alter this query to support Grafana's unique query syntax.

#### Modifying the SELECT statement

First, you'll modify the `date_trunc` function to use the TimescaleDB `time_bucket` function. You can consult the TimescaleDB [API Reference on time\_bucket](https://docs.timescale.com/api/latest/hyperfunctions/time_bucket/) for more information on how to use it properly.

Take a look at the `SELECT` portion of this query. First, bucket the results into one-day groupings using the `time_bucket` function. If you set the `Format` of a Grafana panel to be `Time series`, for use in the graph panel, for example, then the query must return a column named `time` that returns either an SQL `datetime` or any numeric datatype representing a Unix epoch.

Modify your query so that the output of the `time_bucket` grouping is labeled `time` as Grafana requires. You also need to group your visualizations by the time buckets you've selected and order the results by the time buckets as well. So, the `GROUP BY` and `ORDER BY` statements reference the `time` variable:

```sql
SELECT
  time_bucket('1 day', pickup_datetime) AS "time",
  COUNT(*)
FROM rides
GROUP BY time
ORDER BY time;
```

#### The Grafana timeFilter function

Grafana time-series panels include a tool that lets you filter on a given time range, called a time filter. Not surprisingly, Grafana has a way to link the user interface construct in a Grafana panel with the query itself. In this case, it's the `$__timefilter()` function.

In this example of a modified query, use the `$__timefilter()` function to set the `pickup_datetime` column as the filtering range for your visualizations: `time`.

With these changes, this is the final Grafana query:

```sql
SELECT
  time_bucket('1 day', pickup_datetime) AS time,
  COUNT(*)
FROM rides
WHERE $__timeFilter(pickup_datetime)
GROUP BY time
ORDER BY time;
```

When you visualize this query in Grafana, you see this:

![The Grafana UI, with a line graph at the top of the page, and your query in the bottom](https://timescale.ghost.io/blog/content/images/2024/02/create-dashboard-and-panel-time-series-line-graph.png)

❗

Remember to set the time filter in the upper right corner of your Grafana dashboard. If you're using the pre-built sample dataset for this example, you can set your time filter around January 1, 2016.

Currently, the data is bucketed into one-day groupings. Adjust the `time_bucket`  
function to be bucketed into five-minute groupings instead and compare the graphs:

```sql
SELECT
  time_bucket('5m', pickup_datetime) AS time,
  COUNT(*)
FROM rides
WHERE $__timeFilter(pickup_datetime)
GROUP BY time
ORDER BY time
```

When you visualize this query, it looks like this:

![](https://timescale.ghost.io/blog/content/images/2024/02/create-dashboard-and-panel-time-series-line-graph-5min.png)

### Next Steps

Complete your Grafana knowledge by following more Timescale and Grafana tutorials:

-   [Use Grafana to visualize geospatial data stored in Timescale](https://docs.timescale.com/use-timescale/latest/integrations/observability-alerting/grafana/geospatial-dashboards/#use-grafana-to-visualize-geospatial-data-stored-in-timescale)
-   [Analyzing 5 Million NFT Sales on OpenSea using PostgreSQL](https://timescale.ghost.io/blog/analyzing-5-million-nft-sales-using-postgresql/)