Vega Image + Link display in Kibana

[AditiKhalatkar (Aditi)]

Hi,

I am trying to get a visualization in Vega. I am able to get the result in Vega-editor, however not able to achieve the same in Kibana. Kindly guide.

The only difference between the two is that when I try to click on the image, it directs me to google in editor but the link is not working in Kibana

This is the Vega specification

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "description": "Navigation Bar Buttons.",
  "autosize": "pad",
  "padding": 5,
  "height": 100,
  "layout": {"padding": 20, "bounds": "full", "align": "each"},
  "marks": [
    {
      "type": "group",
      "encode": {"update": {"width": {"value": 270}, "height": {"value": 100}}},
      "marks": [
        {
          "type": "image",
          "encode": {
            "enter": {
              "url": {
                "value": "https://github.com/AditiKhalatkar/Images/blob/master/Home_Tab.png?raw=true"
              }
            },
            "update": {"href": {"value": "https://www.google.com"}}
          }
        }
      ]
    },
    {
      "type": "group",
      "encode": {"update": {"width": {"value": 270}, "height": {"value": 100}}},
      "marks": [
        {
          "type": "image",
          "encode": {
            "enter": {
              "url": {
                "value": "https://github.com/AditiKhalatkar/Images/blob/master/Home_Tab.png?raw=true"
              }
            }
          }
        }
      ]
    }
  ]
}

I have tried other vega-lite specifications in Kibana, the links work for those.

P.S : Is there any difference between vega and vega-lite settings for external url? I have added

vega.enableExternalUrls: true

in kibana.yml

[nickpeihl]

I tried your script in the Vega Online Editor but the link does not work there either.

Are you sure this is the correct Vega code?

[AditiKhalatkar (Aditi)]

Thanks for trying the code!
Just to confirm one more time, I am pasting the output of my Vega Online Editor response.

When I click on Yelllow Dot (This is edited picture), it gets directed to google.com in my editor.

Kindly let me know if I am going wrong somewhere or if some other output is needed.

Vega Editor Link

Can you share your Vega Editor Response? When I clicked on the link you provided, I got the above response.

Thanks.

[nickpeihl]

Ah, I see now. The link was not working for me because I had the renderer set to canvas in the Editor. The renderer is configurable in Kibana. See the script below.

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  config: {
    kibana: {
      renderer: svg
      }
  },
  "description": "Navigation Bar Buttons.",
  "autosize": "pad", 
  "padding": 5,
  "height": 100,
  "layout": {"padding": 20, "bounds": "full", "align": "each"},
  "marks": [
    {
      "type": "group",
      "encode": {"update": {"width": {"value": 270}, "height": {"value": 100}}},
      "marks": [
        {
          "type": "image",
          "encode": {
            "enter": {
              "url": {
                "value": "https://github.com/AditiKhalatkar/Images/blob/master/Home_Tab.png?raw=true"
              }
            },
            "update": {"href": {"value": "https://www.google.com"}}
          }
        }
      ]
    },
    {
      "type": "group",
      "encode": {"update": {"width": {"value": 270}, "height": {"value": 100}}},
      "marks": [
        {
          "type": "image",
          "encode": {
            "enter": {
              "url": {
                "value": "https://github.com/AditiKhalatkar/Images/blob/master/Home_Tab.png?raw=true"
              }
            }
          }
        }
      ]
    }
  ]
}

[AditiKhalatkar (Aditi)]

Great! Its working now. Thanks a lot.