Get started visualizing data

There are many tools you can use to visualize your time series data including the InfluxDB user interface (UI), Chronograf, and Grafana. This tutorial walks you through using the InfluxDB UI to create a simple dashboard.

Dashboards are a powerful way of displaying time series data and can help to identify trends and anomalies. A dashboard is comprised of one or more dashboard cells. A dashboard cell visualizes the results of a query using one of the available visualization types.

• Create a dashboard
• Create dashboard cells
• Create and use dashboard variables
  • Create a custom dashboard variable
  • Use a custom dashboard variable

Create a dashboard

1. With InfluxDB running, visit localhost:8086 in your browser to access the InfluxDB UI.

2. Log in and select Dashboards in the left navigation bar.

   Dashboards

3. Click + Create Dashboard and select New Dashboard.

4. Click Name this Dashboard and provide a name for the dashboard. For this tutorial, we’ll use “Getting Started Dashboard”.

Create dashboard cells

With your new dashboard created and named, add a new dashboard cell:

1. Click Add Cell.

2. Click Name this Cell and provide a name for the cell. For this tutorial, we’ll use “Room temperature”.

3. (Optional) Select the visualization type from the visualization drop-down menu. There are many different visualization types available. For this tutorial, use the default Graph visualization.

4. Use the query time range selector to select an absolute time range that covers includes the time range of the data written in “Get started writing to InfluxDB”: 2022-01-01T08:00:00Z to 2022-01-01T20:00:01Z.

   1. The query time range selector defaults to querying data from the last hour ( Past 1h). Click the time range selector drop-down menu and select Custom Time Range.

      View time range selector

      

   2. Use the date picker to select the stop and stop date and time or manually enter the following start and stop times:

      • Start: 2022-01-01 08:00:00
      • Stop: 2022-01-01 20:00:01

   3. Click Apply Time Range.

5. Use the Query Builder to select the measurement, fields, and tags to query:

   1. In the From column, select the get-started bucket.
   2. In the Filter column, select the home measurement.
   3. In the next Filter column, select the temp field.
   4. In the next Filter column, select the room tag and the Kitchen tag value.

6. Click Submit to run the query and visualize the results.

   

7. Click to save the cell and return to the dashboard.

Create and use dashboard variables

InfluxDB dashboard cells use dashboard variables to dynamically change specific parts of cell queries. The query builder automatically builds queries using the following predefined dashboard variables, each controlled by selections in your dashboard:

• v.timeRangeStart: Start time of the queried time range specified by the time range selector.
• v.timeRangeStop: Stop time of the queried time range specified by the time range selector.
• v.windowPeriod: Window period used downsample data to one point per pixel in a cell visualization. The value of this variable is determined by the pixel-width of the cell.

Create a custom dashboard variable

Let’s create a custom dashboard variable that we can use to change the field displayed by your dashboard cell.

1. Select Settings > Variables in the left navigation bar.

   Settings

2. Click + Create Variable and select New Variable.

3. Name your variable. For this tutorial, name the variable, “room”.

4. Select the default Query dashboard variable type. This variable type uses the results of a query to populate the list of potential variable values. For information about the other dashboard variable types, see Variable types.

5. Enter the following Flux query to return all the different room tag values in your get-started bucket from the Unix epoch.

   import "influxdata/influxdb/schema"
   
   schema.tagValues(bucket: "get-started", tag: "room", start: time(v: 0))
   

6. Click Create Variable.

Use a custom dashboard variable

1. Navigate to your Getting Started Dashboard by clicking Dashboards in the left navigation bar and the clicking on the name of your dashboard.

   Dashboards

2. Click the on the Room temperature cell and select Configure.

3. Click Script Editor to edit the Flux query directly.

4. On line 5 of the Flux query, replace "Kitchen" with v.room to use the selected value of the room dashboard variable.

   from(bucket: "get-started")
     |> range(start: v.timeRangeStart, stop: v.timeRangeStop)
     |> filter(fn: (r) => r["_measurement"] == "home")
     |> filter(fn: (r) => r["_field"] == "temp")
     |> filter(fn: (r) => r["room"] == v.room)
     |> aggregateWindow(every: v.windowPeriod, fn: mean, createEmpty: false)
     |> yield(name: "mean")
   

5. Click to save the cell and return to the dashboard.

6. Refresh the browser to reload the dashboard.

7. Use the room variable drop-down menu to select the room to display recorded temperatures from.

   

For more information about creating custom dashboard variables, see Use and manage dashboard variables.

Congratulations!

You have walked through the basics of setting up, writing, querying, processing, and visualizing data with InfluxDB Cloud. Feel free to dive in deeper to each of these topics:

• Write data to InfluxDB
• Query data in InfluxDB
• Process data with InfluxDB
• Visualize data with the InfluxDB UI