# Gantt Chart timeline issue with Vega visualization

**URL:** <https://discuss.elastic.co/t/gantt-chart-timeline-issue-with-vega-visualization/153686>\
**Category:** Kibana\
**Created:** [October 23, 2018, 9:31pm UTC](https://discuss.elastic.co/t/gantt-chart-timeline-issue-with-vega-visualization/153686 "2018-10-23T21:31:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mailg](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@mailg](https://discuss.elastic.co/u/mailg)\
**Post date:** [October 23, 2018, 9:31pm UTC](https://discuss.elastic.co/t/gantt-chart-timeline-issue-with-vega-visualization/153686/1 "2018-10-23T21:31:14Z")

</div>

Hello all,

I'm trying to create a gantt chart using vega but I'm facing issue to get what I want...

Here is my code :

```
    {

  $schema: https://vega.github.io/schema/vega-lite/v2.json
  title: Gantt test

  data: {
    url: {
      %context%: true
      %timefield%: startime
      index: test*
      body: {
      size: 30
      _source: [
                "startime",
                "endtime",
                "job_name"
            ]
      }
    }
    format: {property: "hits.hits"}
  }
"mark": "bar",
transform: [
        { calculate: "toDate(datum._source['startime'])", as: "startime"}
        {calculate : "toDate(datum._source['endtime'])", as: "endtime"}

    ]

"encoding": {
    "y": {
    "sort": {"op": "mean", "field": "startime"},
      "field": "_source.job_name",
      "type": "nominal", 
      "axis": {"title": "job name"}
      },
      
    "x": {
     "timeUnit": "hoursminutes",
     "field": "startime",
     "type": "temporal",
     "axis": {"title": "horaire"}
     }    
    "x2": {
   "timeUnit": "hoursminutes",
      "field": "endtime",
      "type": "temporal"}
  }
}

```

and here is what I obtain :

 ![2018-10-23%2017_22_14-test_Gantt%20-%20Kibana](https://us1.discourse-cdn.com/elastic/original/3X/1/3/138f0ce5b5f389751ca58f7d6591c4511034a444.png)

It's not so bad but my main issue is that my job starting previous day and ending current day are displayed in the wrong way (see screenshot). I'd like the chart displaying from 19:00 to 05:00 the next day but can't figure out how to do this...  
for exemple the job pxmur\_q\_eod\_acc is starting around 22:00 and ending around 00:30 but the visualization is reversing the data...

Any idea would be very welcome,

Thanks in advance,

---

<div class="post-metadata">

**Author:** ![mailg](https://avatars.discourse-cdn.com/v4/letter/m/ec9cab/32.png) [@mailg](https://discuss.elastic.co/u/mailg)\
**Post date:** [October 24, 2018, 3:11pm UTC](https://discuss.elastic.co/t/gantt-chart-timeline-issue-with-vega-visualization/153686/2 "2018-10-24T15:11:04Z")

</div>

Hi there,

I fixed my issue replacing my time unit as follow :

```
"x": {
 "timeUnit": "yearmonthdatehoursminutes",
# "aggregate": "mean",
 "field": "startime",
 "type": "temporal",
 "axis": {format: '%H:00',"title": "horaire"}
 }
 
"x2": {
   "timeUnit": "yearmonthdatehoursminutes",
  "field": "endtime",
  "type": "temporal"},
 "color": {
  "value": "#33ccff"
  }

```

Now another concern would be to filter the timeline from d-1 to d.

Any idea ?  
something like :

```
{ filter: { field: 'startime', timeUnit: 'yearmonthdatehoursminutes', 
                    range: [{day: 'previous day'},
                           {day: 'current day'}]
                  }
        }

```

Thanks for your help

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [November 21, 2018, 3:11pm UTC](https://discuss.elastic.co/t/gantt-chart-timeline-issue-with-vega-visualization/153686/3 "2018-11-21T15:11:05Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.