# Bar chart visualization with timestamp delta/difference as the y-axis

**URL:** https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736
**Category:** Kibana
**Created:** [July 4, 2021, 1:22pm UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736 "2021-07-04T13:22:38Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![girvandip](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@girvandip](https://discuss.elastic.co/u/girvandip)
#### Post date: [July 4, 2021, 1:22pm UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736/1 "2021-07-04T13:22:38Z")

</div>

Hi!

I am trying to create a bar chart using the visualize section. Below is the example of the data in tabular format:

```auto
| timestamp | Id | category |
---------------------------------
| 08:49:10 | 1 | A |
| 08:50:20 | 1 | B |
| 09:00:10 | 1 | C |
| 09:00:50 | 2 | A |
| 09:01:20 | 2 | C |
| 09:20:00 | 3 | A |
| 09:20:10 | 3 | C |
| 09:20:30 | 3 | B |

```

What I want to achieve is a bar chart where the y-axis is the delta/difference in timestamp (in seconds) between category 'A' and 'C' with the same Id. Below is an example of the bar chart that I want to achieve using Kibana:

 ![Kibana](https://us1.discourse-cdn.com/elastic/original/3X/1/5/15ab87090171b5c6e8a8deaee53e95dff577270c.png)

Is this at all achievable? I have tried creating a bar chart in Visualize but I can't seem to find the right aggregation to use.

Many thanks!

---

<div class="post-metadata">

### Author: ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [July 6, 2021, 2:04pm UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736/2 "2021-07-06T14:04:06Z")

</div>

You are asking for a complex calculation, which means that you have limited options for how to achieve this:

1. Use Vega to build a fully custom visualization with custom data
2. Create a new index in Elasticsearch which stores the pre-calculated data that you want, for example it would only contain `id` and `delta` fields.

---

<div class="post-metadata">

### Author: ![girvandip](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@girvandip](https://discuss.elastic.co/u/girvandip)
#### Post date: [July 7, 2021, 8:28am UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736/3 "2021-07-07T08:28:08Z")

</div>

Thank you for your reply @wylie.

I have successfully made the visualization in Vega.

However, I have another use case which I have to use Canvas for the same specification.

Is this at all achievable with Canvas? Again, I have tried it but still unable to do so because it seems that Canvas does not support complex calculations for my use case.

Below is the expression that I used:

```auto
filters
| essql 
  query="SELECT DATE_DIFF('seconds', \"@timestamp\", NOW()) AS old, Id FROM \"" {var "IndexName"} "\" where category = 'C'"
| staticColumn name="new" 
  value={filters | essql query={string "SELECT DATE_DIFF('seconds', \"@timestamp\", NOW()) AS new FROM \"" {var "IndexName"} "\" where category = 'A'"}}
| pointseries x="Id" y="old-new"
| plot defaultStyle={seriesStyle bars=3}
| render

```

I am aware that this is not how to use static column. However, is there any function that allows us to store a table of value that can later be used for calculation purposes?

Many thanks!

---

<div class="post-metadata">

### Author: ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [July 7, 2021, 1:42pm UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736/4 "2021-07-07T13:42:16Z")

</div>

You can use `var_set` to create a variable, which could be set based on the result of a query. You can use the `string` function to construct strings from parts, which can be used to generate SQL queries. Also, you can use the `ply` function to perform math similar to what you'd do in a pivot table.

---

<div class="post-metadata">

### Author: ![girvandip](https://avatars.discourse-cdn.com/v4/letter/g/a87d85/32.png) [@girvandip](https://discuss.elastic.co/u/girvandip)
#### Post date: [July 7, 2021, 2:19pm UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736/5 "2021-07-07T14:19:30Z")

</div>

Just a quick question on that, can we store the result of a query that produces multiple rows of values (time difference for each Id) in a variable or anything?

---

<div class="post-metadata">

### Author: ![wylie](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/wylie/32/81794_2.png) [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [July 7, 2021, 3:11pm UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736/6 "2021-07-07T15:11:47Z")

</div>

Variables can store any type.

---

<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: [August 4, 2021, 3:12pm UTC](https://discuss.elastic.co/t/bar-chart-visualization-with-timestamp-delta-difference-as-the-y-axis/277736/7 "2021-08-04T15:12:39Z")

</div>

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