# Put kibanaFilter while redirecting to other dashboard using Vega

**URL:** <https://discuss.elastic.co/t/put-kibanafilter-while-redirecting-to-other-dashboard-using-vega/349663>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [December 19, 2023, 2:47pm UTC](https://discuss.elastic.co/t/put-kibanafilter-while-redirecting-to-other-dashboard-using-vega/349663 "2023-12-19T14:47:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fiza](https://avatars.discourse-cdn.com/v4/letter/f/c4cdca/32.png) [@Fiza](https://discuss.elastic.co/u/Fiza)\
**Post date:** [December 19, 2023, 2:47pm UTC](https://discuss.elastic.co/t/put-kibanafilter-while-redirecting-to-other-dashboard-using-vega/349663/1 "2023-12-19T14:47:23Z")

</div>

Hi,  
I have created a pie chart using Vega. When you click on a part of pie chart, it should redirect you to another dashboard in Kibana based on the part that was clicked.

So, I believe I'll have to add filters to the other dashboard link based on the part that was clicked so that the redirected dashboard will have the filters applied.

How can this be achieved using Vega ( add filter to dashboard link) ?

Can anyone help in this ?

The Vega spec looks like this -

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "Event counts from all indexes",
  "data": [
    {
      "name": "availabledata",
      "url": {
        "index": "available-book*",
        "body": {
          "aggs": {"avail_name": {"terms": {"field": "name.keyword"}}},
          "size": 0
        }
      },
      "format": {"property": "aggregations.avail_name.buckets"},
      "transform": [{"type": "project", "fields": ["key"], "as": ["avail_book"]}]
    },
    {
      "name": "totaldata",
      "url": {
        "index": "total-book*",
        "body": {
          "aggs": {"total_name": {"terms": {"field": "name.keyword"}}},
          "size": 0
        }
      },
      "format": {"property": "aggregations.total_name.buckets"},
      "transform": [
        {"type": "project", "fields": ["key"], "as": ["total_books"]},
        {
          "type": "lookup",
          "from": "availabledata",
          "key": "avail_book",
          "fields": ["total_books"],
          "values": ["avail_book"],
          "as": ["available_books"]
        },
        {
          "type": "aggregate",
          "fields": ["total_books", "available_books"],
          "ops": ["valid", "valid"],
          "as": ["total_book", "available_book"]
        },
        {
          "type": "formula",
          "expr": "(datum.total_books)-(datum.available_book)",
          "as": "unavailable_book"
        },
        {
          "type": "fold",
          "fields": ["available_book", "unavailable_book"],
          "as": ["status", "value"]
        },
        {"type": "pie", "field": "value", "sort": {"value": true}}
      ]
    },
    {
      "name": "selected",
      "on": [
        {"trigger": "clear", "remove": true},
        {"trigger": "!shift", "remove": true},
        {"trigger": "!shift && clicked", "insert": "clicked"},
        {"trigger": "shift && clicked", "toggle": "clicked"}
      ]
    }
  ],
  "signals": [
    {
      "name": "clear",
      "value": true,
      "on": [
        {"events": "mouseup[!event.item]", "update": "true", "force": true}
      ]
    },
    {
      "name": "shift",
      "value": false,
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "event.shiftKey",
          "force": true
        }
      ]
    },
    {
      "name": "clicked",
      "value": null,
      "on": [
        {
          "events": "@legendSymbol:click, @legendLabel:click",
          "update": "{value: datum.value}",
          "force": true
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "totaldata", "field": "status"},
      "range": ["#1f77b4", "#ff7f0e"]
    }
  ],
  "legends": [
    {
      "stroke": "color",
      "title": "MsgId",
      "encode": {
        "symbols": {
          "name": "legendSymbol",
          "interactive": true,
          "update": {
            "fill": {"value": "transparent"},
            "strokeWidth": {"value": 2},
            "opacity": [
              {
                "test": "!length(data('selected')) || indata('selected', 'value', datum.value)",
                "value": 1
              },
              {"value": 0.15}
            ],
            "size": {"value": 64}
          }
        },
        "labels": {
          "name": "legendLabel",
          "interactive": true,
          "update": {
            "opacity": [
              {
                "test": "!length(data('selected')) || indata('selected', 'value', datum.value)",
                "value": 1
              },
              {"value": 0.25}
            ]
          }
        }
      }
    }
  ],
  "marks": [
    {
      "name": "mark_donut",
      "type": "arc",
      "from": {"data": "totaldata"},
      "encode": {
        "update": {
          "fill": {"scale": "color", "field": "status"},
          "x": {"signal": "width/2"},
          "y": {"signal": "height/2"},
          "startAngle": {"field": "startAngle"},
          "endAngle": {"field": "endAngle"},
          "padAngle": {"value": 0.02},
          "innerRadius": {"value": 60},
          "outerRadius": {"value": 100},
          "tooltip": {
            "signal": "{'Status': datum.status, 'Value': datum.value}",
            "nearest": true
          },
          "opacity": [
            {
              "test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
              "value": 0.7
            },
            {"value": 0.15}
          ],
          "stroke": [
            {
              "test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
              "scale": "color",
              "field": "status"
            },
            {"value": "#ccc"}
          ]
          href:{
            value: "#/dashboard/3e708620-885a-11ee-8faf-6719c714f0a0"
          }
        }
      }
    },
    {
      "name": "mark_value",
      "type": "text",
      "from": {"data": "totaldata"},
      "encode": {
        "enter": {
          "text": {
            "signal": "if(datum['endAngle'] - datum['startAngle'] < 0.3, '', datum['value'])"
          },
          "x": {"signal": "width/2"},
          "y": {"signal": "height/2"},
          "radius": {"value": 75},
          "theta": {"signal": "(datum['startAngle'] + datum['endAngle'])/2"},
          "fill": {"value": "black"},
          "fontSize": {"value": 12},
          "align": {"value": "center"},
          "baseline": {"value": "middle"}
          "opacity": [
            {
              "test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
              "value": 1
            },
            {"value": 0.11}
          ]
          "fillOpacity": [
            {
              "test": "(!length(data('selected')) || indata('selected', 'value', datum.status))",
              "value": 1
            },
            {"value": 0.11}
          ]
        }
      }
    },
    {
      "name": "marks_text",
      "type": "text",
      "style": ["text"],
      "from": {"data": "totaldata"},
      "encode": {
        "enter": {
          "fill": {"value": "#6092C0"},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fontWeight": {"value": "bold"}
        },
        "update": {
          "opacity": {"value": 1},
          "x": {"signal": "width / 2"},
          "y": {"signal": "height / 2"},
          "text": {"field": "total_pdu"},
          "fontSize": {"value": 30}
        },
        "hover": {"opacity": {"value": 0.5}}
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![Fiza](https://avatars.discourse-cdn.com/v4/letter/f/c4cdca/32.png) [@Fiza](https://discuss.elastic.co/u/Fiza)\
**Post date:** [December 25, 2023, 8:24am UTC](https://discuss.elastic.co/t/put-kibanafilter-while-redirecting-to-other-dashboard-using-vega/349663/2 "2023-12-25T08:24:09Z")

</div>

Can anyone help in this ??

---

<div class="post-metadata">

**Author:** ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)\
**Post date:** [December 27, 2023, 8:59pm UTC](https://discuss.elastic.co/t/put-kibanafilter-while-redirecting-to-other-dashboard-using-vega/349663/3 "2023-12-27T20:59:24Z")

</div>

Hello,

I think you can create a drilldown panel on the vega visualization in dashboard. [Make dashboards interactive | Kibana Guide [8.11] | Elastic](https://www.elastic.co/guide/en/kibana/current/drilldowns.html)

Thanks,  
Bhavya

---

<div class="post-metadata">

**Author:** ![Fiza](https://avatars.discourse-cdn.com/v4/letter/f/c4cdca/32.png) [@Fiza](https://discuss.elastic.co/u/Fiza)\
**Post date:** [December 28, 2023, 8:37am UTC](https://discuss.elastic.co/t/put-kibanafilter-while-redirecting-to-other-dashboard-using-vega/349663/4 "2023-12-28T08:37:50Z")

</div>

I tried this earlier but it wasn't working for me.  
Then I rechecked after your reply and found I have to add **kibanaAddFilter** in my code. After adding, the drilldown worked for me. Thanks @bhavyarm for the help.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 25, 2024, 8:38am UTC](https://discuss.elastic.co/t/put-kibanafilter-while-redirecting-to-other-dashboard-using-vega/349663/5 "2024-01-25T08:38:27Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.