|
| 1 | +--- |
| 2 | +layout: default |
| 3 | +title: TSVB |
| 4 | +parent: Building data visualizations |
| 5 | +nav_order: 45 |
| 6 | +--- |
| 7 | + |
| 8 | +# TSVB |
| 9 | + |
| 10 | +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. |
| 11 | + |
| 12 | +## Creating TSVB visualizations from multiple data sources |
| 13 | +Introduced 2.14 |
| 14 | +{: .label .label-purple } |
| 15 | + |
| 16 | +Before proceeding, ensure that the following configuration settings are enabled in the `config/opensearch_dasboards.yaml` file: |
| 17 | + |
| 18 | +```yaml |
| 19 | +data_source.enabled: true |
| 20 | +vis_type_timeseries.enabled: true |
| 21 | +``` |
| 22 | +{% include copy-curl.html %} |
| 23 | +
|
| 24 | +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. |
| 25 | +
|
| 26 | + |
| 27 | +
|
| 28 | +**Step 1: Set up and connect data sources** |
| 29 | +
|
| 30 | +Open OpenSearch Dashboards and follow these steps: |
| 31 | +
|
| 32 | +1. Select **Dashboards Management** from the main menu on the left. |
| 33 | +2. Select **Data sources** and then select the **Create data source** button. |
| 34 | +3. On the **Create data source** page, enter the connection details and endpoint URL. |
| 35 | +4. On the **Home** page, select **Add sample data** and then select the **Add data** button for the **Sample web logs** dataset. |
| 36 | +
|
| 37 | +The following GIF shows the steps required to set up and connect a data source. |
| 38 | +
|
| 39 | + |
| 40 | +
|
| 41 | +**Step 2: Create the visualization** |
| 42 | +
|
| 43 | +Follow these steps to create the visualization: |
| 44 | +
|
| 45 | +1. From the menu on the left, select **Visualize**. |
| 46 | +2. On the **Visualizations** page, select **Create Visualization** and then select **TSVB** in the pop-up window. |
| 47 | +
|
| 48 | +**Step 3: Specify data sources** |
| 49 | +
|
| 50 | +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: |
| 51 | +
|
| 52 | +1. In the **Create** window, select **Panel options**. |
| 53 | +2. Under **Data source**, select the OpenSearch cluster from which to pull data. In this case, choose your newly created data source. |
| 54 | +3. Under **Index name**, enter `opensearch_dashboards_sample_data_logs`. |
| 55 | +4. Under **Time field**, select `@timestamp`. This setting specifies the time range for rendering the visualization. |
| 56 | + |
| 57 | +**(Optional) Step 4: Add annotations** |
| 58 | + |
| 59 | +Annotations are markers that can be added to time-series visualizations. Follow these steps to add annotations: |
| 60 | + |
| 61 | +1. On the upper-left corner of the page, select **Time Series**. |
| 62 | +2. Select the **Annotations** tab and then **Add data source**. |
| 63 | +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`. |
| 64 | +4. From **Time** field, select `@timestamp`. |
| 65 | +5. In the **Fields** field, enter `timestamp`. |
| 66 | +6. In the **Row template** field, enter `timestamp`. |
| 67 | + |
| 68 | +The visualization automatically updates to display your annotations, as shown in the following image. |
| 69 | + |
| 70 | + <img src="{{site.url}}{{site.baseurl}}/images/dashboards/tsvb-with-annotations.png" alt="TSVB visualization with annotations" width="700"/> |
0 commit comments