My vega visualization is working perfectly on vega editor, but its failing on kibana.
On elastic stack version 7.9.2, the exception message is:
“External URLs are not enabled. Add vis_type_vega.enableExternalUrls: true to kibana.yml”
But no error / exception message with version 7.13.4, though visualization is NOT being created successfully.
No clue from debug logs (tried via Inspect)
Tried adding code block to vega but no luck:
config: { kibana: { renderer: svg } }
with reference Vega Image + Link display in Kibana - Elastic Stack / Kibana - Discuss the Elastic Stack
I'm expecting visualization to look like -- from vega editor
The code
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"padding": 5,
"width": 600,
"data": [
{
"name": "table",
"values": [
{"category":"A", "position":2, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"},
{"category":"A", "position":1, "value":0.6, "dvalue":50, "badgeColor": "#044ac1"},
{"category":"A", "position":2, "value":1.3, "dvalue":50, "badgeColor": "#00bd00"},
{"category":"A", "position":3, "value":1.6, "dvalue":50, "badgeColor": "#ff1f1f"},
{"category":"B", "position":0, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"},
{"category":"B", "position":1, "value":0.6, "dvalue":50, "badgeColor": "#044ac1"},
{"category":"B", "position":2, "value":1.3, "dvalue":50, "badgeColor": "#00bd00"},
{"category":"B", "position":3, "value":1.3, "dvalue":50, "badgeColor": "#ff1f1f"},
{"category":"B", "position":0, "value":1.6, "dvalue":50, "badgeColor": "#ff1f1f"},
{"category":"B", "position":1, "value":1.6, "dvalue":50, "badgeColor": "#00bd00"},
{"category":"C", "position":2, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"},
{"category":"C", "position":3, "value":0.6, "dvalue":50, "badgeColor": "#044ac1"},
{"category":"D", "position":2, "value":0.3, "dvalue":50, "badgeColor": "#044ac1"}
]
}
],
"scales": [
{
"name": "x",
"type": "linear",
"round": true,
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "value"},
"range": "width"
},
{
"name": "y",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": [0,600]
},
{
"name": "size",
"type": "linear",
"zero": true,
"domain": {"data": "table", "field": "dvalue"},
"range": [0,5000]
}
],
"axes": [
{
"scale": "x",
"grid": true,
"domain": false,
"orient": "top",
"tickCount": 5,
"title": "Images"
},
{
"scale": "y",
"grid": true,
"domain": false,
"orient": "left",
"titlePadding": 5,
"title": "Items",
"offset": 4
}
],
"signals": [
{ "name": "x", "value": 75},
{ "name": "y", "value": 75},
{ "name": "w", "value": 50},
{ "name": "h", "value": 50},
{ "name": "aspect", "value": true },
{ "name": "smooth", "value": true},
{ "name": "align", "value": "left"},
{ "name": "baseline", "value": "top"}
],
"marks": [
{
"type": "image",
"from": {"data": "table"},
"encode": {
"enter": {
"url": {"value": "https://cdn0.iconfinder.com/data/icons/most-usable-logos/120/App_Store-512.png"}
},
"update": {
"opacity": {"value": 1},
"x": {"scale": "x", "field": "value"},
"y": {"scale": "y", "field": "category", "offset": 20 },
"width": {"signal": "w"},
"height": {"signal": "h"},
"aspect": {"signal": "aspect"},
"smooth": {"signal": "smooth"},
"align": {"signal": "align"},
"baseline": {"signal": "baseline"}
},
"hover": {
"opacity": {"value": 0.5}
}
}
}
]
}