Hi,
I am trying to create a custom ,multi-layered visualization in Kibana using Vega-lite. I was able to create the spec for my first two layers sharing the same data source( My 1st Elasticsearch Index).
While I was trying to create a third layer with my 2nd Elasticsearch Index as data source, it is throwing an error "Cannot set properties of undefined (setting 'format')".
I tried debugging, removed the other two layers and ran the spec for third layer independently to ensure that my formatting for third layer is correct. The third layer is working independently. Also I made sure that my data is correct such that I queried it via Dev tools .
I also tried removing the 2nd layer and using only my 1st and 3rd layer using two different Elasticsearch index as data source and got the same error.
Whenever I am using a different Elasticsearch index inside my Vega-lite layers, it is throwing the error " Cannot set properties of undefined (setting 'format')"
Please find the specs I tried and below and help me out. Thanks in advance!.
//Spec with three layers, layer 1 and 2 sharing same ES index and layer 3 using another ES index
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
description: A multi-layered chart with a line and colored dots using separate data blocks.
data: {
url: {
%context%: true
%timefield%: timestamp
name: Layer1
index: Index_1*
body: {
size: 10000
_source: [
timestamp
field1
field2
.
.
.
.
]
}
}
format: {
property: hits.hits
}
}
layer: [
//Layer 1
{
params: [
{
name: grid
select: interval
bind: scales
}
]
mark: {
type: line
color: "#0039a6" // Change the color of the line here
}
encoding: {
x: {
timeUnit: utcyearmonthdatehoursminutes
field: _source.timestamp
type: temporal
}
y: {
field: _source.field1
type: quantitative
sort: {
field: _source.field1
op: rank
order: descending
}
}
tooltip: [
{
field: _source.timestamp
type: temporal
}
{
field: _source.field1
type: quantitative
}
]
}
}
//Layer 2
{
mark: {
type: point
color: "orange" // Change the color of the line here
}
encoding: {
x: {
timeUnit: utcyearmonthdatehoursminutes
field: _source.timestamp
type: temporal
}
y: {
field: _source.field2
type: quantitative
sort: {
field: _source.field2
op: rank
order: descending
}
}
tooltip: [
{
field: _source.timestamp
type: temporal
}
{
field: _source.field2
type: quantitative
}
]
}
}
//Layer 3
{
data: {
url: {
%context%: true
%timefield%: timestamp
name: Layer3
index: Index_2*
body: {
size: 10000
_source: [
timestamp
field3
.
.
.
]
}
}
format: {
property: hits.hits
}
}
mark: {
type: point
color: "red" // Change the color of the line here
}
encoding: {
x: {
timeUnit: utcyearmonthdatehoursminutes
field: _source.timestamp
type: temporal
}
y: {
field: _source.field3
type: quantitative
sort: {
field: _source.field3
op: rank
order: descending
}
}
tooltip: [
{
field: _source.timestamp
type: temporal
}
{
field: _source.field3
type: quantitative
}
]
}
}
]
}
//Spec with removing layer 2 and using separate ES index for layer 1 and layer 3
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
description: A multi-layered chart with a line and colored dots using separate data blocks.
layer: [
//Layer 1
{
data: {
url: {
%context%: true
%timefield%: timestamp
name: Layer1
index: Index_1*
body: {
size: 10000
_source: [
timestamp
field1
field2
.
.
.
.
]
}
}
format: {
property: hits.hits
}
}
params: [
{
name: grid
select: interval
bind: scales
}
]
mark: {
type: line
color: "#0039a6" // Change the color of the line here
}
encoding: {
x: {
timeUnit: utcyearmonthdatehoursminutes
field: _source.timestamp
type: temporal
}
y: {
field: _source.field1
type: quantitative
sort: {
field: _source.field1
op: rank
order: descending
}
}
tooltip: [
{
field: _source.timestamp
type: temporal
}
{
field: _source.field1
type: quantitative
}
]
}
}
//Layer 3
{
data: {
url: {
%context%: true
%timefield%: timestamp
name: Layer3
index: Index_2*
body: {
size: 10000
_source: [
timestamp
field3
.
.
.
]
}
}
format: {
property: hits.hits
}
}
mark: {
type: point
color: "red" // Change the color of the line here
}
encoding: {
x: {
timeUnit: utcyearmonthdatehoursminutes
field: _source.timestamp
type: temporal
}
y: {
field: _source.field3
type: quantitative
sort: {
field: _source.field3
op: rank
order: descending
}
}
tooltip: [
{
field: _source.timestamp
type: temporal
}
{
field: _source.field3
type: quantitative
}
]
}
}
]
}
//Spec with only 2 layers, layer 1 and 2 sharing same ES index. Working fine!
{
$schema: https://vega.github.io/schema/vega-lite/v5.json
description: A multi-layered chart with a line and colored dots using separate data blocks.
data: {
url: {
%context%: true
%timefield%: timestamp
name: Layer1
index: Index_1*
body: {
size: 10000
_source: [
timestamp
field1
field2
.
.
.
.
]
}
}
format: {
property: hits.hits
}
}
layer: [
//Layer 1
{
params: [
{
name: grid
select: interval
bind: scales
}
]
mark: {
type: line
color: "#0039a6" // Change the color of the line here
}
encoding: {
x: {
timeUnit: utcyearmonthdatehoursminutes
field: _source.timestamp
type: temporal
}
y: {
field: _source.field1
type: quantitative
sort: {
field: _source.field1
op: rank
order: descending
}
}
tooltip: [
{
field: _source.timestamp
type: temporal
}
{
field: _source.field1
type: quantitative
}
]
}
}
//Layer 2
{
mark: {
type: point
color: "orange" // Change the color of the line here
}
encoding: {
x: {
timeUnit: utcyearmonthdatehoursminutes
field: _source.timestamp
type: temporal
}
y: {
field: _source.field2
type: quantitative
sort: {
field: _source.field2
op: rank
order: descending
}
}
tooltip: [
{
field: _source.timestamp
type: temporal
}
{
field: _source.field2
type: quantitative
}
]
}
}
]
}