Gantt Visualization Using Vega

[maseca (Maxwell Plotkin)]

Gantt Chart (Ranged Bar Marks)

I know that this is possible, but I'm having serious difficulties getting what I want to display. My data has a "start_time" and an "end_time" field, and I just want to do a match_all query and plug those fields in as my x and x2 values, with an existing ID field as the y.

[Larry_Gregory]

Hi @maseca,

Given index maseca, with the following documents:

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.

[maseca (Maxwell Plotkin)]

Thanks Larry, this is exactly what I needed. Before I close the thread, could you help me get more than just 10 hits to display in the response? I have nearly 2 million log entries which I'd like to be able to display over 3 years, if that's possible.

[Larry_Gregory]

Great! In my example above, I have an empty request body. You can set a size property within to override the default limit of 10 results, like so:

// Which index to search
index: maseca
body: {
  size: 1000
}

This may not scale to 2 million entries, but feel free to play with that size property to see what works for you.

[maseca (Maxwell Plotkin)]

Is it at all possible to parse those timestamp fields as "temporal" instead of nominal? The issue I'm encountering now is that despite events displaying in order, the time between each one is not at all fixed, and any idle time in the system is completely truncated. Maybe there's a way to display results over time?

[Larry_Gregory]

@nyuriks do you know if what Maxwell is asking for is possible? I tried with my sample above and didn't have much luck

[nyuriks (Yuri Astrakhan)]

Sure, but you need to parse the string dates that you get from ES into the proper dates (you would not need to do it if the dates were in the unix time (long numbres), e.g. how time histogram keys look). Also, please post questions with data next time, retyping from image takes a long time

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "title": "Gantt Visualization Using Vega",
  "data": {
    "values": [
      {
        "_source": {
          "id": "bar",
          "start_time": "2018-05-20T12:00:00",
          "end_time": "2018-05-21T12:00:00"
        }
      },
      {
        "_source": {
          "id": "foo",
          "start_time": "2018-05-19T12:00:00",
          "end_time": "2018-05-20T12:00:00"
        }
      },
      {
        "_source": {
          "id": "baz",
          "start_time": "2018-05-20T12:00:00",
          "end_time": "2018-05-22T12:00:00"
        }
      }
    ]
  },
  "transform": [
    {"calculate": "toDate(datum._source.start_time)", "as": "start"},
    {"calculate": "toDate(datum._source.end_time)", "as": "end"}
  ],
  "mark": "bar",
  "encoding": {
    "y": {"field": "_source.id", "type": "nominal"},
    "x": {"field": "start", "type": "temporal"},
    "x2": {"field": "end", "type": "temporal"}
  }
}

cc: @Larry_Gregory