166 lines
7.4 KiB
Markdown
166 lines
7.4 KiB
Markdown
|
|
There are many tools you can use to visualize your time series data including the
|
|
InfluxDB user interface (UI), [Chronograf](/influxdb/version/tools/chronograf/), and
|
|
[Grafana](/influxdb/version/tools/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](/influxdb/version/visualize-data/visualization-types/).
|
|
|
|
- [Create a dashboard](#create-a-dashboard)
|
|
- [Create dashboard cells](#create-dashboard-cells)
|
|
- [Create and use dashboard variables](#create-and-use-dashboard-variables)
|
|
- [Create a custom dashboard variable](#create-a-custom-dashboard-variable)
|
|
- [Use a custom dashboard variable](#use-a-custom-dashboard-variable)
|
|
|
|
## Create a dashboard
|
|
|
|
1. With InfluxDB running, visit [localhost:8086](http://localhost:8086) in your
|
|
browser to access the InfluxDB UI.
|
|
2. Log in and select **Dashboards** in the left navigation bar.
|
|
|
|
{{< nav-icon "dashboards" >}}
|
|
|
|
3. Click **+ {{% caps %}}Create Dashboard{{% /caps %}}** 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 **{{< icon "add-cell" >}} {{% caps %}}Add Cell{{% /caps %}}**.
|
|
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](/influxdb/version/visualize-data/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"](/influxdb/version/get-started/write/#view-the-written-data):
|
|
**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
|
|
(**{{< icon "clock" >}} Past 1h**).
|
|
Click the time range selector drop-down menu and select **Custom Time Range**.
|
|
|
|
{{< expand-wrapper >}}
|
|
{{% expand "View time range selector" %}}
|
|
{{< img-hd src="/img/influxdb/2-4-get-started-visualize-time-range.png" alt="InfluxDB time range selector" />}}
|
|
{{% /expand %}}
|
|
{{< /expand-wrapper >}}
|
|
|
|
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 **{{% caps %}}Apply Time Range{{% /caps %}}**.
|
|
|
|
5. Use the **Query Builder** to select the measurement, fields, and tags to query:
|
|
|
|
1. In the **{{% caps %}}From{{% /caps %}}** 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 **{{% caps %}}Submit{{% /caps %}}** to run the query and visualize the
|
|
results.
|
|
|
|
{{< img-hd src="/img/influxdb/2-4-get-started-visualize-query-builder.png" alt="InfluxDB Query Builder" />}}
|
|
|
|
7. Click **{{< icon "check" >}}** 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](/influxdb/version/visualize-data/variables/#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.
|
|
|
|
{{< nav-icon "settings" >}}
|
|
|
|
2. Click **+ {{% caps %}}Create Variable{{% /caps %}}** 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](/influxdb/version/visualize-data/variables/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](/influxdb/version/reference/glossary/#unix-timestamp).
|
|
|
|
```js
|
|
import "influxdata/influxdb/schema"
|
|
|
|
schema.tagValues(bucket: "get-started", tag: "room", start: time(v: 0))
|
|
```
|
|
|
|
6. Click **{{% caps %}}Create Variable{{% /caps %}}**.
|
|
|
|
### 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.
|
|
|
|
{{< nav-icon "dashboards" >}}
|
|
|
|
2. Click the **{{< icon "gear" >}}** on the **Room temperature** cell and select
|
|
**{{< icon "pencil" >}} Configure**.
|
|
3. Click **{{% caps %}}Script Editor{{% /caps %}}** 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.
|
|
|
|
```js
|
|
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 **{{< icon "check" >}}** 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.
|
|
|
|
{{< img-hd src="/img/influxdb/2-4-get-started-visualize-variable-select.png" alt="InfluxDB dashboard variable selection" />}}
|
|
|
|
_For more information about creating custom dashboard variables, see
|
|
[Use and manage dashboard variables](/influxdb/version/visualize-data/variables/)._
|
|
|
|
{{< page-nav prev="/influxdb/version/get-started/process/" >}}
|
|
|
|
---
|
|
|
|
## Congratulations!
|
|
|
|
You have walked through the
|
|
[basics of setting up, writing, querying, processing, and visualizing](/influxdb/version/get-started/)
|
|
data with InfluxDB {{< current-version >}}.
|
|
Feel free to dive in deeper to each of these topics:
|
|
|
|
- [Write data to InfluxDB](/influxdb/version/write-data/)
|
|
- [Query data in InfluxDB](/influxdb/version/query-data/)
|
|
- [Process data with InfluxDB](/influxdb/version/process-data/)
|
|
- [Visualize data with the InfluxDB UI](/influxdb/version/visualize-data/)
|
|
|