# 2D Heatmap for startTime

**URL:** <https://discuss.elastic.co/t/2d-heatmap-for-starttime/376700>\
**Category:** Kibana\
**Created:** [April 2, 2025, 2:56pm UTC](https://discuss.elastic.co/t/2d-heatmap-for-starttime/376700 "2025-04-02T14:56:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![guyasp](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/guyasp/32/142173_2.png) [@guyasp](https://discuss.elastic.co/u/guyasp)\
**Post date:** [April 2, 2025, 2:56pm UTC](https://discuss.elastic.co/t/2d-heatmap-for-starttime/376700/1 "2025-04-02T14:56:22Z")

</div>

Hello,  
I have a logging of records with creation timestamps, named `startTime`. I would like to create a 2D heatmap showing peak hours - that is, my horizontal axis should be set to "Date histogram" of this values, with minimal interval of 1 day. That's done of course.  
However, I fail to create the vertical axis, which should be the hour of the day (could be rounded to the hour, no problem). That is, I need to extract the hour part from the timestamps, and then create the counting bins as an "outer product" of the dates in the range and the 24 hours.

Is this something achievable?

---

<div class="post-metadata">

**Author:** ![stephenb](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/stephenb/32/40856_2.png) [@stephenb](https://discuss.elastic.co/u/stephenb)\
**Post date:** [April 2, 2025, 3:25pm UTC](https://discuss.elastic.co/t/2d-heatmap-for-starttime/376700/2 "2025-04-02T15:25:58Z")

</div>

Hi @guyasp Welcome to the community!

> [@guyasp](#):
>
> Is this something achievable?

Yes absolutely but you are going to need to do a little work...

What version are you on?

There are 2 approaches ...

1. On Ingest parse out the hour\_of\_day through and ingest pipeline, then that data would be available for many uses and this the visualization would be fairly trivial you could use an ingest pipeline

2. Create a Runtime Field ... not as good for scale and speed but could test that out then decide

```auto
ZonedDateTime zdt = ZonedDateTime.parse(doc['@timestamp'].value.toString());
emit(zdt.getHour());

```

I created a runtime fields on the data view

 ![Screenshot 2025-04-02 at 8.23.10 AM](https://us1.discourse-cdn.com/elastic/original/3X/1/0/10a00aff28930eeb14428298c590bbc078090501.png)

The Heat Map (filter down to logs you are interested in)

Horizontal Date Histogram on `@timestamp`  
Cell Value `count`  
Vertical access `hour_of_day`

 ![Screenshot 2025-04-02 at 8.24.34 AM](https://us1.discourse-cdn.com/elastic/original/3X/d/b/db05aa6c64c1d6b95962c9b7dd45ab32cb5c74f4.png)

And I got this...

 ![Screenshot 2025-04-02 at 8.25.05 AM](https://us1.discourse-cdn.com/elastic/original/3X/1/b/1b22c4715005c641553242542d9ef7c1f332be67.jpeg)

Runtime fields are OK to use but they do not scale really well if you were going to do this for large data sets I would parse out the hour in an ingest pipeline so it is an indexed field

---

<div class="post-metadata">

**Author:** ![guyasp](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/guyasp/32/142173_2.png) [@guyasp](https://discuss.elastic.co/u/guyasp)\
**Post date:** [April 3, 2025, 7:42am UTC](https://discuss.elastic.co/t/2d-heatmap-for-starttime/376700/3 "2025-04-03T07:42:37Z")

</div>

Thanks!