Vega Visualization not Working

OpenSearch Dashboards
1

Versions OpenSearch Dashboard 3.6.0

Describe the issue:

I am using a Vega visualization in my dashboard, but the global dashboard filters are not being applied to the visualization.

i applied filter attributes.resource.attributes.host@name

Configuration

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "%context%": true,
  "%timefield%": "time",
  "autosize": { "type": "fit", "contains": "padding" },

  "signals": [
    {
      "name": "cardWidth",
      "value": 220
    },
    {
      "name": "cardHeight",
      "value": 120
    },
    {
      "name": "cols",
      "update": "max(1, floor(width / cardWidth))"
    }
  ],

  "data": [
    {
      "name": "raw",
      "url": {
        "index": "ss4o_metrics-otel-*",
        "body": {
          "size": 200,
          "sort": [{ "time": "desc" }],
          "query": {
            "bool": {
              "filter": [
                {
                  "term": {
                    "name": "freeswitch_sofia_gateway_status"
                  }
                },
                {
                  "range": {
                    "time": {
                      "gte": "now-30m",
                      "lte": "now"
                    }
                  }
                }
              ]
            }
          }
        }
      },
      "format": { "property": "hits.hits" }
    },

    {
      "name": "table",
      "source": "raw",
      "transform": [
        {
          "type": "formula",
          "as": "server",
          "expr": "datum._source.attributes['resource.attributes.host@name']"
        },
        {
          "type": "formula",
          "as": "proxy",
          "expr": "datum._source.attributes['metric.attributes.proxy']"
        },
        {
          "type": "formula",
          "as": "value",
          "expr": "datum._source.value"
        },
        {
          "type": "filter",
          "expr": "datum.server != null && datum.proxy != null"
        },

        {
          "type": "aggregate",
          "groupby": ["server", "proxy"],
          "ops": ["max"],
          "fields": ["value"],
          "as": ["value"]
        },

        {
          "type": "formula",
          "as": "status",
          "expr": "datum.value == 1 ? 'Active' : 'Down'"
        },

        {
          "type": "window",
          "ops": ["row_number"],
          "as": ["row"]
        },
        {
          "type": "formula",
          "as": "col",
          "expr": "(datum.row - 1) % cols"
        },
        {
          "type": "formula",
          "as": "rowIndex",
          "expr": "floor((datum.row - 1) / cols)"
        },

        {
          "type": "formula",
          "as": "x",
          "expr": "datum.col * cardWidth"
        },
        {
          "type": "formula",
          "as": "y",
          "expr": "datum.rowIndex * cardHeight"
        }
      ]
    }
  ],

  "marks": [
    {
  "type": "rect",
  "from": { "data": "table" },
  "encode": {
    "enter": {
      "width": { "signal": "cardWidth - 20" },
      "height": { "signal": "cardHeight - 20" },
      "cornerRadius": { "value": 10 }
    },
    "update": {
      "x": { "field": "x" },
      "y": { "field": "y" },
      "fill": [
        { "test": "datum.status === 'Active'", "value": "#2B7B68" },
        { "test": "datum.status === 'Down'", "value": "#ff1744" }
      ],

      "tooltip": {
        "signal": "{'Server': datum.server, 'Proxy': datum.proxy, 'Status': datum.status}"
      }
    }
  }
},

    {
      "type": "text",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "fontSize": { "value": 12 },
          "fontWeight": { "value": "bold" },
          "fill": { "value": "white" }
        },
        "update": {
          "x": { "signal": "datum.x + 10" },
          "y": { "signal": "datum.y + 25" },
          "text": { "field": "server" }
        }
      }
    },

    {
      "type": "text",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "fontSize": { "value": 11 },
          "fill": { "value": "white" }
        },
        "update": {
          "x": { "signal": "datum.x + 10" },
          "y": { "signal": "datum.y + 50" },
          "text": { "field": "proxy" }
        }
      }
    },

    {
      "type": "text",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "fontSize": { "value": 14 },
          "fontWeight": { "value": "bold" },
          "fill": { "value": "white" }
        },
        "update": {
          "x": { "signal": "datum.x + 10" },
          "y": { "signal": "datum.y + 75" },
          "text": { "field": "status" }
        }
      }
    }
  ]
}

Relevant Logs or Screenshots

My Index Sample Data is

 {
        "_index": "ss4o_metrics-otel-2026.04.30",
        "_id": "82Lo3J0BJ6hvOT3gVc9P",
        "_score": null,
        "_source": {
          "unit": "",
          "exemplars": [],
          "kind": "GAUGE",
          "name": "freeswitch_sofia_gateway_status",
          "flags": 0,
          "description": "freeswitch gateways status",
          "startTime": "1970-01-01T00:00:00Z",
          "attributes": {
            "resource.attributes.url@scheme": "http",
            "resource.attributes.host@name": "Voicebot-MS2-127.0.0.1",
            "resource.attributes.service@instance@id": "127.0.0.1:9282",
            "resource.attributes.service@name": "freeswitch_exporter",
            "metric.attributes.proxy": "sip:127.0.0.1",
            "metric.attributes.profile": "internal",
            "instrumentationScope.version": "0.149.0",
            "instrumentationScope.name": "github.com/open-telemetry/opentelemetry-collector-contrib/receiver/prometheusreceiver",
            "resource.attributes.server@port": "9282",
            "resource.attributes.os@type": "linux",
            "metric.attributes.scheme": "Digest",
            "metric.attributes.name": "33991f16-bb9e-11f0-b912-92de005ffd39",
            "metric.attributes.context": "public"
          },
          "time": "2026-04-30T05:41:42.302Z",
          "serviceName": "freeswitch_exporter",
          "value": 1,
          "schemaUrl": "https://opentelemetry.io/schemas/1.39.0"
        },
        "sort": [
          1777527702302
        ]
      }
2

@parthpatel Welcome to the forum!

I attempted to reproduce the issue you are having and got an error:

url.%context% and url.%timefield% must not be used when url.body.query is set

Can you try to remove the body.query and %timefield% changed to @timestamp, see example below:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "title": "Gateway Status (Vega v5)",
  "width": 600,
  "height": 300,
  "data": [
    {
      "name": "gateways",
      "url": {
        "%context%": true,
        "%timefield%": "@timestamp",
        "index": "ss4o_metrics-otel-default",
        "body": {
          "size": 0,
          "aggs": {
            "by_host": {
              "terms": {"field": "resource.attributes.host@name", "size": 20},
              "aggs": {
                "by_status": {
                  "terms": {"field": "attributes.status", "size": 10}
                }
              }
            }
          }
        }
      },
      "format": {"property": "aggregations.by_host.buckets"},
      "transform": [
        {"type": "flatten", "fields": ["by_status.buckets"], "as": ["status_bucket"]},
        {"type": "formula", "as": "host", "expr": "datum.key"},
        {"type": "formula", "as": "status", "expr": "datum.status_bucket.key"},
        {"type": "formula", "as": "count", "expr": "datum.status_bucket.doc_count"}
      ]
    }
  ],
  "scales": [
    {"name": "x", "type": "band", "domain": {"data": "gateways", "field": "host"}, "range": "width", "padding": 0.1},
    {"name": "y", "type": "linear", "domain": {"data": "gateways", "field": "count"}, "range": "height", "nice": true},
    {"name": "color", "type": "ordinal", "domain": ["Active", "Down"], "range": ["#2ecc71", "#e74c3c"]}
  ],
  "axes": [
    {"orient": "bottom", "scale": "x", "labelAngle": -30},
    {"orient": "left", "scale": "y", "title": "Count"}
  ],
  "legends": [{"fill": "color", "title": "Status"}],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "gateways"},
      "encode": {
        "enter": {
          "x": {"scale": "x", "field": "host"},
          "width": {"scale": "x", "band": 1},
          "y": {"scale": "y", "field": "count"},
          "y2": {"scale": "y", "value": 0},
          "fill": {"scale": "color", "field": "status"}
        }
      }
    }
  ]
}
3

Thanks ,

i have changed the query like this, and it’s working.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",

  "autosize": { "type": "fit", "contains": "padding" },

  "signals": [
    { "name": "cardWidth", "value": 220 },
    { "name": "cardHeight", "value": 120 },
    { "name": "cols", "update": "max(1, floor(width / cardWidth))" }
  ],

  "data": [
    {
      "name": "raw",
      "url": {
        "%context%": true,
        "%timefield%": "time",
        "index": "ss4o_metrics-otel-*",
        "body": {
          "size": 0,
          "aggs": {
            "filtered": {
              "filter": {
                "term": {
                  "name": "freeswitch_sofia_gateway_status"
                }
              },
              "aggs": {
                "by_host": {
                  "terms": {
                    "field": "attributes.resource.attributes.host@name.keyword",
                    "size": 50
                  },
                  "aggs": {
                    "by_proxy": {
                      "terms": {
                        "field": "attributes.metric.attributes.proxy.keyword",
                        "size": 50
                      },
                      "aggs": {
                        "latest": {
                          "top_hits": {
                            "size": 1,
                            "sort": [{ "time": "desc" }],
                            "_source": ["value"]
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      },
      "format": {
        "property": "aggregations.filtered.by_host.buckets"
      }
    },

    {
      "name": "table",
      "source": "raw",
      "transform": [
        {
          "type": "formula",
          "as": "server",
          "expr": "datum.key"
        },
        {
          "type": "flatten",
          "fields": ["by_proxy.buckets"],
          "as": ["proxyBucket"]
        },
        {
          "type": "formula",
          "as": "proxy",
          "expr": "datum.proxyBucket.key"
        },
        {
          "type": "formula",
          "as": "value",
          "expr": "datum.proxyBucket.latest.hits.hits[0]._source.value"
        },
        {
          "type": "formula",
          "as": "status",
          "expr": "datum.value == 1 ? 'Active' : 'Down'"
        },

        { "type": "window", "ops": ["row_number"], "as": ["row"] },
        { "type": "formula", "as": "col", "expr": "(datum.row - 1) % cols" },
        { "type": "formula", "as": "rowIndex", "expr": "floor((datum.row - 1) / cols)" },
        { "type": "formula", "as": "x", "expr": "datum.col * cardWidth" },
        { "type": "formula", "as": "y", "expr": "datum.rowIndex * cardHeight" }
      ]
    }
  ],

  "marks": [
    {
      "type": "rect",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "width": { "signal": "cardWidth - 20" },
          "height": { "signal": "cardHeight - 20" },
          "cornerRadius": { "value": 10 }
        },
        "update": {
          "x": { "field": "x" },
          "y": { "field": "y" },
          "fill": [
            { "test": "datum.status === 'Active'", "value": "#2B7B68" },
            { "test": "datum.status === 'Down'", "value": "#ff1744" }
          ],
          "tooltip": {
            "signal": "{'Server': datum.server, 'Proxy': datum.proxy, 'Status': datum.status}"
          }
        }
      }
    },

    {
      "type": "text",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "fontSize": { "value": 12 },
          "fontWeight": { "value": "bold" },
          "fill": { "value": "white" }
        },
        "update": {
          "x": { "signal": "datum.x + 10" },
          "y": { "signal": "datum.y + 25" },
          "text": { "field": "server" }
        }
      }
    },

    {
      "type": "text",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "fontSize": { "value": 11 },
          "fill": { "value": "white" }
        },
        "update": {
          "x": { "signal": "datum.x + 10" },
          "y": { "signal": "datum.y + 50" },
          "text": { "field": "proxy" }
        }
      }
    },

    {
      "type": "text",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "fontSize": { "value": 14 },
          "fontWeight": { "value": "bold" },
          "fill": { "value": "white" }
        },
        "update": {
          "x": { "signal": "datum.x + 10" },
          "y": { "signal": "datum.y + 75" },
          "text": { "field": "status" }
        }
      }
    }
  ]
}