Vega

Vega and Vega-Lite are open-source, declarative language visualization tools that you can use to create custom data visualizations with your OpenSearch data and Vega data. These tools are ideal for advanced users comfortable with writing OpenSearch queries directly. Enable the vis_type_vega plugin in your opensearch_dashboards.yml file to write your Vega specifications in either JSON or HJSON format or to specify one or more OpenSearch queries in your Vega specification. By default, the plugin is set to true.

Creating Vega visualizations from multiple data sources

Introduced 2.13

Before proceeding, ensure that the following configuration settings are enabled in the config/opensearch_dasboards.yaml file. For configuration details, refer to the vis_type_vega README.

  1. data_source.enabled: true
  2. vis_type_vega.enabled: true

After you have configured multiple data sources in OpenSearch Dashboards, you can use Vega to query those data sources. The following GIF shows the process of creating Vega visualizations in OpenSearch Dashboards.

Process of creating Vega visualizations in OpenSearch Dashboards

Step 1: Set up and connect data sources

Open OpenSearch Dashboards and follow these steps:

  1. Select Dashboards Management from the menu on the left.
  2. Select Data sources and then select the Create data source button.
  3. On the Create data source page, enter the connection details and endpoint URL, as shown in the following GIF.
  4. On the Home page, select Add sample data. Under Data source, select your newly created data source, and then select the Add data button for the Sample web logs dataset.

The following GIF shows the steps required for setting up and connecting a data source.

Setting up and connecting data sources with OpenSearch Dashboards

Step 2: Create the visualization

  1. From the menu on the left, select Visualize.
  2. On the Visualizations page, select Create Visualization and then select Vega in the pop-up window.

Step 3: Add the Vega specification

By default, queries use data from the local cluster. You can assign individual data_source_name values to each OpenSearch query in your Vega specification. This allows you to query multiple indexes across different data sources in a single visualization.

  1. Verify that the data source you created is specified under data_source_name. Alternatively, in your Vega specification, add the data_source_name field under the url property to target a specific data source by name.
  2. Copy the following Vega specification and then select the Update button in the lower-right corner. The visualization should appear.
  1. {
  2.   $schema: https://vega.github.io/schema/vega-lite/v5.json
  3.   data: {
  4.     url: {
  5.       %context%: true
  6.       %timefield%: @timestamp
  7.       index: opensearch_dashboards_sample_data_logs
  8.       data_source_name: YOUR_DATA_SOURCE_TITLE
  9.       body: {
  10.         aggs: {
  11.           1: {
  12.             date_histogram: {
  13.               field: @timestamp
  14.               fixed_interval: 3h
  15.               time_zone: America/Los_Angeles
  16.               min_doc_count: 1
  17.             }
  18.             aggs: {
  19.               2: {
  20.                 avg: {
  21.                   field: bytes
  22.                 }
  23.               }
  24.             }
  25.           }
  26.         }
  27.         size: 0
  28.       }
  29.     }
  30.     format: {
  31.       property: aggregations.1.buckets
  32.     }
  33.   }
  34.   transform: [
  35.     {
  36.       calculate: datum.key
  37.       as: timestamp
  38.     }
  39.     {
  40.       calculate: datum[2].value
  41.       as: bytes
  42.     }
  43.   ]
  44.   layer: [
  45.     {
  46.       mark: {
  47.         type: line
  48.       }
  49.     }
  50.     {
  51.       mark: {
  52.         type: circle
  53.         tooltip: true
  54.       }
  55.     }
  56.   ]
  57.   encoding: {
  58.     x: {
  59.       field: timestamp
  60.       type: temporal
  61.       axis: {
  62.         title: @timestamp
  63.       }
  64.     }
  65.     y: {
  66.       field: bytes
  67.       type: quantitative
  68.       axis: {
  69.         title: Average bytes
  70.       }
  71.     }
  72.     color: {
  73.       datum: Average bytes
  74.       type: nominal
  75.     }
  76.   }
  77. }

copy

Additional resources

The following resources provide additional information about Vega visualizations in OpenSearch Dashboards: