Gantt chart on Kibana using version 7.11

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.

1 Like

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.