# How to create a timeline in vega-lite with hourly division as well as date and day mentioned in X-axis

**URL:** https://discuss.elastic.co/t/how-to-create-a-timeline-in-vega-lite-with-hourly-division-as-well-as-date-and-day-mentioned-in-x-axis/160373
**Category:** Kibana
**Tags:** vega
**Created:** [December 11, 2018, 12:07pm UTC](https://discuss.elastic.co/t/how-to-create-a-timeline-in-vega-lite-with-hourly-division-as-well-as-date-and-day-mentioned-in-x-axis/160373 "2018-12-11T12:07:38Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![SunilT](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@SunilT](https://discuss.elastic.co/u/SunilT)
#### Post date: [December 11, 2018, 12:07pm UTC](https://discuss.elastic.co/t/how-to-create-a-timeline-in-vega-lite-with-hourly-division-as-well-as-date-and-day-mentioned-in-x-axis/160373/1 "2018-12-11T12:07:38Z")

</div>

I am putting some data in vega-lite, which has time values in the format " YYYY-MM-DD HH:MM:SS".  
And I want the timeline in x-axis with hourly division of 24hrs as well as the date mentioned.

I have put the following json to get some output, but it is not giving me of each hour.

"encoding": {  
"x": {  
"timeUnit": "yearmonthdatehoursminutes",  
"field":"time",  
"type": "temporal",  
"axis": {  
"format": " %d %b %a %H:%M",  
"title": "timeline"  
},

```
},  

"y": {
  "field": "username",
  "type": "nominal",
      "axis": {
    "title": "users",
    
  }
}

```

},

Can some help me out, thanks in advance.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/f/3/f3c07c7f38269bb197a7ed0469090746da88f260.png)

I want all the 24hour division

---

<div class="post-metadata">

### Author: ![SunilT](https://avatars.discourse-cdn.com/v4/letter/s/c68b51/32.png) [@SunilT](https://discuss.elastic.co/u/SunilT)
#### Post date: [December 12, 2018, 7:49am UTC](https://discuss.elastic.co/t/how-to-create-a-timeline-in-vega-lite-with-hourly-division-as-well-as-date-and-day-mentioned-in-x-axis/160373/2 "2018-12-12T07:49:41Z")

</div>

I want something like , in this picture.

 ![sample%20login%20and%20logout%20time](https://us1.discourse-cdn.com/elastic/original/3X/7/3/7301830f87abdbccc82cd71bc6743b96c3820161.png)

---

<div class="post-metadata">

### Author: ![rashmi](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/rashmi/32/16391_2.png) [@rashmi](https://discuss.elastic.co/u/rashmi)
#### Post date: [December 12, 2018, 8:58pm UTC](https://discuss.elastic.co/t/how-to-create-a-timeline-in-vega-lite-with-hourly-division-as-well-as-date-and-day-mentioned-in-x-axis/160373/3 "2018-12-12T20:58:52Z")

</div>

@nyuriks - can you please help here? Thanks  
Rashmi

---

<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: [January 9, 2019, 8:58pm UTC](https://discuss.elastic.co/t/how-to-create-a-timeline-in-vega-lite-with-hourly-division-as-well-as-date-and-day-mentioned-in-x-axis/160373/4 "2019-01-09T20:58:52Z")

</div>

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