Ok, if I understand correctly you want to show for each day, all the tasks durations.
Something like that:
In order to build that you need to transform your data, in particular you need to pivot it.
Your data has this shape at the moment:
{
_source: {
Date: "06-01-2021",
Start1: "00:00",
End1: "00:02",
Start2: "02:46",
End2: "03:47",
Start3: "03:53",
End3: "04:17"
}
}
...
But in order to build the chart above you need to change it to this form:
{Date: "06-01-2021", start: "00:00", end: "00:02" },
{Date: "06-01-2021", start: "02:46", end: "03:47" },
{Date: "06-01-2021", start: "03:53", end: "04:17" },
...
This can be done in Vega directly for some/small data. If you plan to load a lot of data, probably it is better to shape it on the Elastic side directly in the final shape.
So, the first half of Vega structure looks the same to query the data, but then from the "transform" bit it changes:
...
transform: [
// Tell Vega to pivot your row into multiple rows with this shape:
// { key: "_source.Start1", value: "00:00", ...rest of original JSON }
// ...
{
fold: [
_source.Start1
_source.Start2
_source.Start3
]
}
// Now add and "endValue" field based on the specific "key"
// Start1 => End1 value and so on...
{
calculate: "datum.key === '_source.Start1' ? datum._source.End1 : datum.key === '_source.Start2'? datum._source.End2: datum.key === '_source.Start3'? datum._source.End3 : '00:00'"
as: endValue
},
// At this point we have this data:
// { key: "_source.Start1", value: "00:00", endValue: "00:02", Date: "06-01-2021", rest of data... },
// { key: "_source.Start1", value: "02:46", endValue: "03:47", Date: "06-01-2021", rest of data... },
// ...
]
mark: bar
encoding: {
y: {
field: _source.Date
type: nominal
axis: {
title: Date
}
}
x: {
field: value // where it starts each rectangle
type: ordinal
axis: {
title: Basis
}
}
x2: {
field: endValue // where it ends each rectangle
type: ordinal
}
}
// you may want to color based on the type of task
// color: {
// field: key
// }
}