# Vega timeline visualisation

**URL:** <https://discuss.elastic.co/t/vega-timeline-visualisation/148087>\
**Category:** Kibana\
**Created:** [September 11, 2018, 8:37am UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087 "2018-09-11T08:37:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![kumpelblase](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kumpelblase/32/35709_2.png) [@kumpelblase](https://discuss.elastic.co/u/kumpelblase)\
**Post date:** [September 11, 2018, 8:37am UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087/1 "2018-09-11T08:37:50Z")

</div>

Hey there  
I'm trying to create a time-visualsation with Vega-Lite. I have an index called 460 with the field "CreationDate" as timestamp and a field "AssignedWorker" as a number. Now I want a simple chart with the "CreationDate" as my timeline in days as the x-axis and the corresponding "AssignedWorker" in the y-axis.  
What I have for now looks like this:

> {  
> $schema: [https://vega.github.io/schema/vega-lite/v2.json](https://vega.github.io/schema/vega-lite/v2.json)  
> data: {  
> # URL object is a context-aware query to Elasticsearch  
> url: {  
> /\* %context%: true  
> %timefield%: CreationDate\*/  
> index: 460  
> body: {  
> size: 1000  
> \_source: ["CreationDate", "AssignedWorker"]  
> }  
> },  
> # We only need the content of hits.hits array  
> format: {property: "hits.hits"}  
> }
> 
> #Parse timestamp into a javascript date value  
> transform: [  
> {calculate: "toDate(datum.\_source['CreationDate'])", as: "time"}  
> ]  
> mark: circle  
> encoding: {  
> x: {timeUnit: "day", field: "CreationDate", type: "temporal"}  
> y: {field: "\_source.AssignedWorker", type: "nominal"}  
> }  
> }

---

<div class="post-metadata">

**Author:** ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)\
**Post date:** [September 11, 2018, 5:37pm UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087/2 "2018-09-11T17:37:05Z")

</div>

Hi,

Not sure if I understand the question here? What problems are you facing in doing this?

cc @nyuriks

Thanks,  
Bhavya

---

<div class="post-metadata">

**Author:** ![kumpelblase](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kumpelblase/32/35709_2.png) [@kumpelblase](https://discuss.elastic.co/u/kumpelblase)\
**Post date:** [September 12, 2018, 5:55am UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087/3 "2018-09-12T05:55:40Z")

</div>

The problem is that I don't get any graphs with the code above. Somehow Vega won't take the data in the "CreationDate" field.

---

<div class="post-metadata">

**Author:** ![monfera](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/monfera/32/26467_2.png) [@monfera](https://discuss.elastic.co/u/monfera)\
**Post date:** [September 14, 2018, 12:08pm UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087/4 "2018-09-14T12:08:09Z")

</div>

Hi Kumpelblase,

a problem that surely makes the plot not work is that the `x` encoding field for time is referred to as `CreationDate` while you actually want to use its `transform`ed version, which you aliased as `time`. So please try it with the `time` alias of the transform results.

There's a [temporal scatter example](https://www.timroes.de/2018/02/05/kibana-vega-scatterplot/) by @timroes - it should work as is, when using it on eg. the `Logs` [sample dataset](https://www.elastic.co/guide/en/kibana/current/tutorial-load-dataset.html) which also has timestamps, although named differently to yours.

---

<div class="post-metadata">

**Author:** ![kumpelblase](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kumpelblase/32/35709_2.png) [@kumpelblase](https://discuss.elastic.co/u/kumpelblase)\
**Post date:** [September 14, 2018, 12:41pm UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087/5 "2018-09-14T12:41:39Z")

</div>

I tried that, but it didn't work. I also tried other timeUnits in combination with CreationDate as well as time in the x encoding field.

---

<div class="post-metadata">

**Author:** ![monfera](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/monfera/32/26467_2.png) [@monfera](https://discuss.elastic.co/u/monfera)\
**Post date:** [September 14, 2018, 12:44pm UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087/6 "2018-09-14T12:44:52Z")

</div>

It's hard to see what else might be off, without actually running your thing. A possible route would be to start with Tim's example, which worked for me and should work for you, assuming you load data of an appropriate structure (see the other link in my reply), and incrementally change it until it does what you want.

---

<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:** [October 12, 2018, 12:45pm UTC](https://discuss.elastic.co/t/vega-timeline-visualisation/148087/7 "2018-10-12T12:45:04Z")

</div>

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