# Gantt Visualization Using Vega

**URL:** <https://discuss.elastic.co/t/gantt-visualization-using-vega/136532>\
**Category:** Kibana\
**Created:** [June 19, 2018, 3:48pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532 "2018-06-19T15:48:43Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Larry\_Gregory](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/larry_gregory/32/34969_2.png) [@Larry\_Gregory](https://discuss.elastic.co/u/Larry_Gregory)\
**Post date:** [June 19, 2018, 4:40pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/2 "2018-06-19T16:40:30Z")

</div>

Hi @maseca,

Given index `maseca`, with the following documents:  
 ![image](https://us1.discourse-cdn.com/elastic/original/3X/7/a/7a6144725d8abdf698d000173ced98ff5a053622.png)

I was able to render a Gantt Visualization using the following:

```
{

  $schema: https://vega.github.io/schema/vega-lite/v2.json
  title: Gantt Visualization Using Vega

  data: {
    url: {
      // Apply dashboard context filters when set
      %context%: true
      // Filter the time picker (upper right corner) with this field
      %timefield%: start_time

/*
See .search() documentation for : https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/api-reference.html#api-search
*/

      // Which index to search
      index: maseca

      body: {

      }
    }

    format: {property: "hits.hits"}
  }

"mark": "bar",
  "encoding": {
    "y": {"field": "_source.id", "type": "nominal"},
    "x": {"field": "_source.start_time", "type": "nominal"},
    "x2": {"field": "_source.end_time", "type": "nominal"}
  }
}

```

This will likely need some refinement to suit your needs, but hopefully this serves as a starting point for you.

---

_[View the full topic](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532)._