Hi all,
I am having difficulties visualising a Gantt chart on Kibana, could someone help me.
I have the following data set:
Date,
Start and end time
and times (HH:mm) as content of the other field, all those Field, want to visualize it in Gantt chart style. so that is clearly in which Date and what time is some field start running
I need help with the Vega code for Kibana.
thank you in advance
Hi @bab,
to build a Gantt chart in Vega you need to fetch the start and end dates, and the ids to map on the vertical axis.
You can start with something like this:
{
$schema: https://vega.github.io/schema/vega-lite/v4.json
title: Flight durations
data: {
url: {
%context%: true
%timefield%: timestamp
index: your_index_here // <- your index name goes here
body: { }
}
format: {
property: hits.hits
}
}
mark: bar
// At this point the search values are exposed from the _source object
encoding: {
y: {
field: _source.id
type: ordinal
}
x: {
field: _source.start
type: temporal
}
x2: {
field: _source.end
type: temporal
}
}
}
Assumptions: your document contains these 3 fields: "id" (string), "start" (date), "end" (date).
You can use the Inspector to see how the data arrived from Elasticsearch to your Vega renderer.
To use the Inspector to debug the Vega visualization follow: Inspect => Click "view: Request" => "Vega debug" => Click "root" => "source_0" to see the data retrieved.
In case you are looking for something different, write it here with some more context.
Also, for more about Gantt chart in Vega see also this other answer: Gantt Visualization Using Vega - #7 by nyuriks
Hi @Marco_Liberati ,
thank you for the hit, below is an example of my file and what i want to do exactly, i have more that 3 fields.
i did this script like you mention before, but i'm still messing a lot of Data value from other Fields
{
$schema: https://vega.github.io/schema/vega-lite/v4.json
title: Runningtime durations
data: {
url: {
%context%: true
%timefield%: Date
index: index_tev_test
body: {
}
}
format: {
property: hits.hits
}
}
mark: bar
encoding: {
y: {
field: _source.Date
type: nominal
axis: {title: "datum des Events"}
}
x: {
field: _source.Basis
type: ordinal
axis: {title: "Basis"}
}
x2: {
field: _source.Steuer-Brutto
type: ordinal
axis: {title: "Steuer-Brutto"}
}
x3: {
field: _source.Vorbereitung TEV
type: ordinal
}
}
}
i got this results
the plan is to get all values of the Fields, which mention in the first picture via Date Field in y- axis and Time (HH:mm) in x- axis.
when i add x2 and x3... to get all feilds in X axis, i can't see that in the Graph. Any suggestions from you, thank you.
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
// }
}
i implement what you mention before, but i got now an empty graphic
{
$schema: https://vega.github.io/schema/vega-lite/v4.json
title: Runningtime durations
data: {
url: {
%context%: true
%timefield%: Date
index: index_tev_test
body: {
//_source:{}
}
}
format: {
property: hits.hits
}
}
transform: [
{
fold: [
_source.Start1
_source.Start2
_source.Start3
]
}
{
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
}
]
mark: bar
encoding: {
y: {
field: _source.Date
type: nominal
axis: {
title: datum des Events
}
}
x: {
field: Start1
type: ordinal
axis: {
title: Basis
}
}
x2: {
field: endValue
type: ordinal
axis: {
title: Steuer-Brutto
}
}
}
}
what i m doing wrong hier?
Start1, Start2, Start3, ..., End1, End2, End3 should be the name of your columns, based on start and end of each task.
In your previous screenshoot I could not clearly identify their name, so I generalized them with StartX, EndX.
Hi @Marco_Liberati
Thank you again, I resolved the previous problem, only now i want to give each column an individual color and name on the right side of the diagram, can you help her also. Many thanks
{
$schema: https://vega.github.io/schema/vega-lite/v4.json
description: A simple bar chart with ranged data (aka Gantt Chart).
data: {
values: [
{
_source: {
Date: 06-01-2021
Start1: 00:00
End1: 00:02
Start2: 02:46
End2: 03:47
Start3: 03:53
End3: 04:17
Start4: 04:27
End4: 04:42
Start5: 05:06
End5: 05:25
Start6: 05:50
End6: 06:10
Start7: 06:13
End7: 06:44
Start8: 06:52
End8: 07:14
Start9: 07:36
End9: 08:08
Start10: 11:03
End10: 15:29
}
}
{
_source: {
Date: 07-01-2021
Start1: 00:00
End1: 00:12
Start2: 01:47
End2: 03:48
Start3: 03:56
End3: 04:17
Start4: 04:29
End4: 04:57
Start5: 05:04
End5: 05:39
Start6: 05:58
End6: 06:01
Start7: 06:23
End7: 06:32
Start8: 07:03
End8: 07:14
Start9: 07:39
End9: 07:57
Start10: 09:00
End10: 15:38
}
}
{
_source: {
Date: 08-01-2021
Start1: 00:00
End1: 00:32
Start2: 02:18
End2: 03:41
Start3: 03:57
End3: 04:03
Start4: 04:31
End4: 04:48
Start5: 05:16
End5: 05:28
Start6: 05:56
End6: 06:00
Start7: 06:13
End7: 06:32
Start8: 06:49
End8: 07:29
Start9: 07:45
End9: 07:54
Start10: 08:49
End10: 15:49
}
}
]
}
transform: [
{
fold: [
_source.Start1
_source.Start2
_source.Start3
_source.Start4
_source.Start5
_source.Start6
_source.Start7
_source.Start8
_source.Start9
_source.Start10
]
}
{
calculate: datum.key === '_source.Start1' ? datum._source.End1 : datum.key === '_source.Start2'? datum._source.End2: datum.key === '_source.Start3'? datum._source.End3 : datum.key === '_source.Start4'? datum._source.End4 : datum.key === '_source.Start5'? datum._source.End5 : datum.key === '_source.Start6'? datum._source.End6 : datum.key === '_source.Start7'? datum._source.End7 :datum.key === '_source.Start8'? datum._source.End8 :datum.key === '_source.Start9'? datum._source.End9 :datum.key === '_source.Start10'? datum._source.End10 : '00:00'
as: endValue
}
]
mark: bar
encoding: {
y: {
field: _source.Date
type: nominal
axis: {
title: Date
}
}
x: {
field: value
type: o
axis: {
title: Time
}
}
x2: {
field: endValue
type: ordinal
}
}
// color: {
// field: Start1
//type: nominal
//}
}
results:
In the last part of your code you already attempted to color it, which is pretty close.
The "field" should point to the "name" of your column, so "key" (if you see in the example above commented the "fold" transformation made your tasks start fields fall into "key").
That should color all tasks "Start1" with the same color, and so on.
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
© 2020. All Rights Reserved - Elasticsearch
Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant logo are trademarks of the Apache Software Foundation in the United States and/or other countries.
