-
Notifications
You must be signed in to change notification settings - Fork 513
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update multiple data sources and add TSVB and Vega viz types #7229
Changes from 41 commits
3444cd3
da5a66b
e24f0d4
4d95088
dbeb1fc
6045594
0579355
6c5d0fc
d2cf069
4d461fd
1f62857
956c07b
9886080
9de6631
6db6392
45a51ca
55dbcbf
ef450d0
1569b9d
1cd6f7a
183de14
69dd8a0
64da49f
5edcceb
a3b8fd6
334e54d
c39f92d
a96c92e
dd185c5
b8f6a75
c2acdee
87ad874
d7be094
4a7d9ae
0429a41
20f0bb0
81ff0fe
b4e52ef
6813cd0
49aee03
6e16e10
fe6e4a6
8b5bee4
d4327af
dab6b7b
1836276
c18233d
4811ef4
6d84850
de5e9f3
eb98b31
582b89a
98ae5dd
dc11e05
442ef62
c52dc36
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -0,0 +1,71 @@ | ||||||
--- | ||||||
layout: default | ||||||
title: TSVB | ||||||
parent: Building data visualizations | ||||||
nav_order: 45 | ||||||
--- | ||||||
|
||||||
# TSVB | ||||||
|
||||||
The Time-Series Visual Builder (TSVB) is a powerful data visualization tool in OpenSearch Dashboards that allows you to create detailed time-series visualizations. One of its key features is the ability to add annotations or markers at specific time points based on index data. This feature is particularly useful for making connections between multiple indexes and building visualizations that display data over time, such as flight status, delays by type, and more. TSVB currently supports the following visualization types: Area, Line, Metric, Gauge, Markdown, and Data Table. | ||||||
|
||||||
## Creating TSVB visualizations from multiple data sources | ||||||
Introduced 2.14 | ||||||
{: .label .label-purple } | ||||||
|
||||||
Before proceeding, ensure that the following configuration settings are enabled in the `config/opensearch_dasboards.yaml` file: | ||||||
|
||||||
```yaml | ||||||
data_source.enabled: true | ||||||
vis_type_timeseries.enabled: true | ||||||
``` | ||||||
{% include copy-curl.html %} | ||||||
|
||||||
Once you have configured [multiple data sources]({{site.url}}{{site.baseurl}}/dashboards/management/multi-data-sources/) in OpenSearch Dashboards, you can use Vega to query those data sources. The following GIF shows the process of creating TSVB visualizations in OpenSearch Dashboards. | ||||||
|
||||||
![Process of creating TSVB visualizations in OpenSearch Dashboards]({{site.url}}{{site.baseurl}}/images/dashboards/configure-tsvb.gif) | ||||||
|
||||||
**Step 1: Set up and connect data sources** | ||||||
|
||||||
Open OpenSearch Dashboards and follow these steps: | ||||||
|
||||||
1. Select **Dashboards Management** from the main menu on the left. | ||||||
2. Select **Data sources** and then select the **Create data source** button. | ||||||
3. From the **Create data source** page, enter the connection details and endpoint URL. | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
4. From the **Home** page, select **Add sample data** and then select the **Add data** button for the **Sample web logs** dataset. | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
The following GIF shows the steps required to set up and connect a data source. | ||||||
|
||||||
![Create data source]({{site.url}}{{site.baseurl}}/images/dashboards/create-datasource.gif) | ||||||
|
||||||
**Step 2: Create the visualization** | ||||||
|
||||||
Follow these steps to create the visualization: | ||||||
|
||||||
1. From the menu on the left, select **Visualize**. | ||||||
2. From the **Visualizations** page, select **Create Visualization** and then select **TSVB** in the pop-up window. | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
3. Proceed with the steps under Specify data sources. | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This step doesn't appear to be necessary. |
||||||
|
||||||
**Step 3: Specify data sources** | ||||||
|
||||||
After creating a TSVB visualization, data may appear based on your default index pattern. To change the index pattern or configure additional settings, follow these steps to customize your visualization: | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
1. From the **Create** window, select **Panel options**. | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
2. From **Data source**, select the OpenSearch cluster from which to pull data. In this case, choose your newly created data source. | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
3. From **Index name**, enter `opensearch_dashboards_sample_data_logs`. | ||||||
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
4. Under **Time field**, select `@timestamp`. This setting specifies the time range for rendering the visualization. | ||||||
|
||||||
**(Optional) Step 4: Add annotations** | ||||||
|
||||||
Annotations are markers that can be added to time-series visualizations. Follow these steps to add annotations: | ||||||
|
||||||
1. On the upper-left corner of the page, select **Time Series**. | ||||||
2. Select the **Annotations** tab and then **Add data source**. | ||||||
3. In the **Index** name field, specify the appropriate index. In this case, continue using the same index from the previous steps, that is, `opensearch_dashboards_sample_data_logs`. | ||||||
4. From **Time** field, select **@timestamp**. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is all of the formatting on the last word intentional/correct? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
vagimeli marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
5. In the **Fields** field, enter `timestamp`. | ||||||
6. In the **Row template** field, enter `timestamp`. | ||||||
|
||||||
The visualization automatically updates to display your annotations, as shown in the following image. | ||||||
|
||||||
<img src="{{site.url}}{{site.baseurl}}/images/dashboards/tsvb-with-annotations.png" alt="TSVB visualization with annotations" width="700"/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think this list actually made more sense with the "Learn about" construct. As written, these are now not totally consistent, and it's not clear that the list items are all resources.