# Gantt Visualization Using Vega **URL:** \ **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:** 8\ **Page:** 1
**Author:** ![maseca](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@maseca](https://discuss.elastic.co/u/maseca)\ **Post date:** [June 19, 2018, 3:48pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/1 "2018-06-19T15:48:43Z")
> **[Gantt Chart (Ranged Bar Marks)](https://vega.github.io/vega-lite/examples/bar_gantt.html)** > > Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple... 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. ---
**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")
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. ---
**Author:** ![maseca](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@maseca](https://discuss.elastic.co/u/maseca)\ **Post date:** [June 19, 2018, 8:14pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/3 "2018-06-19T20:14:52Z")
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. ---
**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, 8:25pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/4 "2018-06-19T20:25:46Z")
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. ---
**Author:** ![maseca](https://avatars.discourse-cdn.com/v4/letter/m/a4c791/32.png) [@maseca](https://discuss.elastic.co/u/maseca)\ **Post date:** [June 20, 2018, 4:20pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/5 "2018-06-20T16:20:59Z")
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? ---
**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 20, 2018, 5:00pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/6 "2018-06-20T17:00:32Z")
@nyuriks do you know if what Maxwell is asking for is possible? I tried with my sample above and didn't have much luck ---
**Author:** ![nyuriks](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nyuriks/32/26171_2.png) [@nyuriks](https://discuss.elastic.co/u/nyuriks)\ **Post date:** [June 20, 2018, 8:00pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/7 "2018-06-20T20:00:23Z")
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 🙂 ```auto { "$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 ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [July 18, 2018, 8:00pm UTC](https://discuss.elastic.co/t/gantt-visualization-using-vega/136532/8 "2018-07-18T20:00:24Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.