Hi,
I'm trying to use vega-lite visualization in Kibana using concatenating views, specifically concat. Basically I have four numbers which I've calculated using various aggregations from elasticsearch which I want to display as plain text but with corresponding labels. This is what I get using Vega editor:
And the code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"data": {
"values": [{"In": "40,005.65", "Out": "37,344.35", "Diff": "2,661.30", "Perc": "93.35 %"}]
},
"background": "red",
"config": {
"style": {
"cell": {
"stroke": "transparent"
}
},
"text": {
"fontSize": 48,
"fontWeight": 500,
"color": "yellow",
"align": "left"
}
},
"columns": 4,
"spacing": 0,
"concat": [
{
"mark": {
"type": "text",
"dx": 0,
"text": "In",
"fontSize": 24,
"fontWeight": "normal"
}
},
{
"mark": {
"type": "text",
"dx": 30,
"text": "Out",
"fontSize": 24,
"fontWeight": "normal"
}
},
{
"mark": {
"type": "text",
"dx": 30,
"text": "Difference",
"fontSize": 24,
"fontWeight": "normal"
}
},
{
"mark": {
"type": "text",
"dx": 30,
"text": "Percentage",
"fontSize": 24,
"fontWeight": "normal"
}
},
{
"mark": {
"type": "text"
},
"encoding": {
"text": {
"field": "In",
"type": "ordinal"
}
}
},
{
"mark": {
"type": "text",
"dx": 30
},
"encoding": {
"text": {
"field": "Out",
"type": "ordinal"
}
}
},
{
"mark": {
"type": "text",
"dx": 30
},
"encoding": {
"text": {
"field": "Diff",
"type": "ordinal"
}
}
},
{
"mark": {
"type": "text",
"dx": 30
},
"encoding": {
"text": {
"field": "Perc",
"type": "ordinal"
}
}
}
]
}
But when I switch to Kibana UI I'm getting an error "Invalid spec". The query part is returning the data OK that's not the problem, if I use hconcat instead of concat everything displays but I want labels to be above the data.
The code from Kibana is:
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.6.0.json",
"title": "",
"data": {...},
"transform": [
{ "calculate": "datum.pay_in_sum_amount.value_as_string", "as": "In" },
{ "calculate": "datum.pay_out_sum_amount.sum_amount.value_as_string", "as": "Out" },
{ "calculate": "datum.ggr.value_as_string", "as": "Diff" },
{ "calculate": "datum.rtp.value_as_string + ' %'", "as": "Perc" }
],
"background": "red",
"autosize": {"type": "fit"},
"config": {
"style": {
"cell": {
"stroke": "transparent"
}
},
"text": {
"fontSize": 48,
"fontStyle": "Bold",
"color": "yellow",
"align": "left"
}
},
"columns": 4,
"spacing": 0,
"concat": [
{
"mark": {
"type": "text",
"dx": 0,
"text": "In",
"fontSize": 24
}
},
{
"mark": {
"type": "text",
"dx": 30,
"text": "Out",
"fontSize": 24
}
},
{
"mark": {
"type": "text",
"dx": 30,
"text": "Difference",
"fontSize": 24
}
},
{
"mark": {
"type": "text",
"dx": 30,
"text": "Percentage",
"fontSize": 24
}
},
{
"mark": {
"type": "text"
},
"encoding": {
"text": {
"field": "In",
"type": "ordinal"
}
}
},
{
"mark": {
"type": "text",
"dx": 30
},
"encoding": {
"text": {
"field": "Out",
"type": "ordinal"
}
}
},
{
"mark": {
"type": "text",
"dx": 30
},
"encoding": {
"text": {
"field": "Diff",
"type": "ordinal"
}
}
},
{
"mark": {
"type": "text",
"dx": 30
},
"encoding": {
"text": {
"field": "Perc",
"type": "ordinal"
}
}
}
]
}