Empty Gantt chart

[clamorforchange]

Hi everyone, I'm trying to create a Gantt chart from log files that I'm pushing to Elasticsearch via curl. Very similar to this Gantt Visualization Using Vega

I'm trying this out on an example entry with a start, an end and a name, however my chart simply stays empty and I don't know what to do.

This is the data block:

{
  "_index": "test-index_new_2",
  "_type": "doc",
  "_id": "5Z23QWsBYZIERLZf-_Wv",
  "_version": 1,
  "_score": 1,
  "_source": {
    "name": "second_event",
    "duration_start": "2018-05-20T12:00:00",
    "duration_end": "2018-05-22T12:00:00"
  }

And this is my Vega json:

{
  $schema: https://vega.github.io/schema/vega-lite/v2.json
  data: {
    url: {        
      %context%: true
      %timefield%: duration_start
      index: test-index_new_2
      body: {
      }
    }
    format: {property: "hits.hits"}
  }
"transform": [
    {"calculate": "datum._source.duration_start", "as": "start"},
    {"calculate": "datum._source.duration_end", "as": "end"}
  ],
"mark": "bar",
"encoding": {
  "y": {"field": "_source.name", "type": "nominal"},
  "x": {"field": "start", "type": "temporal"},
  "x2": {"field": "end", "type": "temporal"}
 }

}

This is the result:

If anyone has an idea of what I'm doing wrong, please let me know! Thank you!

[markov00 (Marco Vettorello)]

Hey @clamorforchange I think you are missing the toDate function, to convert the date string to a date.

 "transform": [
    {
      "calculate": "toDate(datum._source.duration_start)",
      "as": "start"
    },
    {
      "calculate": "toDate(datum._source.duration_end)",
      "as": "end"
    }
  ],

I've just tested with it with two static values and it works:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v3.json",
  "description": "A simple bar chart with ranged data (aka Gantt Chart).",
  "data": {
    "values": [
      {
        "_index": "test-index_new_2",
        "_type": "doc",
        "_id": "5Z23QWsBYZIERLZf-_Wv",
        "_version": 1,
        "_score": 1,
        "_source": {
          "name": "second_event",
          "duration_start": "2018-05-20T12:00:00",
          "duration_end": "2018-05-22T12:00:00"
        }
      },
      {
        "_index": "test-index_new_2",
        "_type": "doc",
        "_id": "5Z23QWsBYZIERLZf-_Wv",
        "_version": 1,
        "_score": 1,
        "_source": {
          "name": "first_event",
          "duration_start": "2018-05-12T12:00:00",
          "duration_end": "2018-05-15T12:00:00"
        }
      }
    ]
  },
  "transform": [
    {
      "calculate": "toDate(datum._source.duration_start)",
      "as": "start"
    },
    {
      "calculate": "toDate(datum._source.duration_end)",
      "as": "end"
    }
  ],
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "_source.name",
      "type": "ordinal"
    },
    "x": {
      "field": "start",
      "type": "temporal"
    },
    "x2": {
      "field": "end"
    }
  }
}

You can also omit the type option for the x2 as it's the same type of the x