# Vega lite interactive visual

**URL:** <https://discuss.elastic.co/t/vega-lite-interactive-visual/339669>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [July 31, 2023, 9:24am UTC](https://discuss.elastic.co/t/vega-lite-interactive-visual/339669 "2023-07-31T09:24:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Akarsh\_Shaw](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/akarsh_shaw/32/124027_2.png) [@Akarsh\_Shaw](https://discuss.elastic.co/u/Akarsh_Shaw)\
**Post date:** [July 31, 2023, 9:24am UTC](https://discuss.elastic.co/t/vega-lite-interactive-visual/339669/1 "2023-07-31T09:24:53Z")

</div>

I created a heatmap which is showing the failed transaction in hour bucket, and pie chart showing the error-code contributions. When I select any hour bucket in heatmap then it showing the correct error contribution in pie but when I don't select any hour bucket in heatmap then it is showing the summation of all the hour bucket for each error contribution . As my heatmap is divided into hourly bucket and I filter the global time as "last 10 hour" then my heatmap shows 10 bucket for each hour but my pie shows the summation of these 10 hour bucket for each error rather I want aggregated value of each error for 10 hour bucket. I want to use "hourly\_percentage" in pie chart when I select any hour bucket in heatmap, but when I don't select any hour bucket in heatmap I want to use "percentage" in pie chart.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/6/8650acab4599f3d22a93caf6471b21dbf283847e.png)

```auto
{
	"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
	# "autosize": "none",

	"data": {
		"url": {
		  "%context%": true,
		  "%timefield%": "datetime",
		  "%timefilter%": "min",
		  "%timefilter%": "max",
		  "index": "index1",
		  "body": {
			"size": 0,
			"aggs": {
			  "two": {
				"date_histogram": {
				  "field": "datetime",
				  "fixed_interval": "30m",
				  "time_zone": "UTC",
				  "min_doc_count": 1
				},
				"aggs": {
				  "three": {
					"terms": {
					  "field": "error",
					  "order": {
						"_key": "desc"
					  },
					  "size": 5
					},
					"aggs": {
					  "one": {
						"sum_bucket": {
						  "buckets_path": "one-bucket>_count"
						}
					  },
					  "one-bucket": {
						"filters": {
						  "filters": {
							"status : \"Fail\" ": {
							  "bool": {
								"must": [],
								"filter": [
								  {
									"bool": {
									  "should": [
										{
										  "match_phrase": {
											"status": "Fail"
										  }
										}
									  ],
									  "minimum_should_match": 1
									}
								  }
								],
								"should": [],
								"must_not": []
							  }
							}
						  }
						}
					  }
					}
				  }
				}
			  }
			}
		  }
		},
		"format": { "property": "aggregations.two.buckets", "type": "json" }
	  },
	  "transform": [
		{
		  "flatten": ["three.buckets"],
		  "as": ["new_buckets"]
		},
		{ "calculate": "utchours(datum.key_as_string)", "as": "hour" },
		{ "calculate": "datum.new_buckets.key", "as": "error" },
		{ "calculate": "datum.new_buckets.one.value", "as": "fail_txn" },
		 { "filter": "datum.fail_txn > 0" },
		{"filter": "datum.error>0"}
		{
		  "aggregate": [
			{"op": "sum","field": "fail_txn", "as": "total_val"}
		  ],
		  "groupby": ["hour","error"]
		},
		{
		  "joinaggregate": [
			{"op": "sum", "field": "total_val", "as": "total"}
		  ]
		},
		{
		  "joinaggregate": [
			{"op": "sum", "field": "total_val", "as": "hourly_total"}
		  ],
		   "groupby": ["hour"]
		},
		{
		  "calculate": "(datum.total_val / datum.total)*100",
		  "as": "percentage"
		},
		{
		  "calculate": "(datum.total_val / datum.hourly_total)*100",
		  "as": "hourly_percentage"
		}
	  ],
	  
	"columns": 2,
	  "concat": [{
		  "selection": {
			"click": {"type": "multi","encodings": ["x"], "nearest": false, "on": "click"}
		  },
		  "mark": "rect",
		  "width": "530",
		  "height": 75,
		  "encoding": {
			"x": {"field": "hour", "type": "ordinal", "title": "Hour of the Day"},
			"color": {
			  "field": "total_val",
			  "aggregate": "sum",
			  "type": "quantitative",
			  "title": "Error Count",
			  "scale": {"scheme": "reds", "reverse": false},
				 "legend": {
		  "symbolOpacity": 1,
		  "orient": "right",
		  "direction": "vertical",
		 "columns": 5
		}
			},
			"tooltip": [
			  {"field": "hour", "title": "Hour"},
			  {"field": "total_val", "aggregate": "sum", "type": "quantitative", "title": "Count"}
			],
		 
			"opacity": {
			  "condition": {"selection": "click", "value": 1},
			  "value": 0.7
			}
		  }
		},
		{
		  "mark": {"type": "arc", "radius":105},
		   "width": 211,
		  "height": 75,
		  "encoding": {
			"theta": {"field": "hourly_percentage","aggregate":"sum", "type": "quantitative","stack": "normalize"},
		"color": {"field": "error", "type": "nominal", "format": ".2f"}
			"tooltip": [
			  {"field": "error", "type": "nominal", "title": "Error"},
			  {"field": "hourly_percentage", "type": "quantitative","aggregate":"sum", "title": "Percentage(%)", "format": ".2f"},
			   
			]
		  },
		  "transform": [
			{
			  "joinaggregate": [{"op": "sum","field": "fail_txn"}],
			  "groupby": ["error_code"]
			},
			{"filter": {"selection": "click"}}
		  ]
		}
	  ],
	   "resolve": {"axis": {"x": "independent"}},
	   "config": {
	   "view": {"stroke": "transparent"},
	   "axis": {"grid": true, "tickBand": "extent"}
	   }
	}

```

---

<div class="post-metadata">

**Author:** ![Akarsh\_Shaw](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/akarsh_shaw/32/124027_2.png) [@Akarsh\_Shaw](https://discuss.elastic.co/u/Akarsh_Shaw)\
**Post date:** [July 31, 2023, 1:33pm UTC](https://discuss.elastic.co/t/vega-lite-interactive-visual/339669/2 "2023-07-31T13:33:15Z")

</div>

My environment support vegalite v4 versions.

---

<div class="post-metadata">

**Author:** ![Akarsh\_Shaw](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/akarsh_shaw/32/124027_2.png) [@Akarsh\_Shaw](https://discuss.elastic.co/u/Akarsh_Shaw)\
**Post date:** [August 8, 2023, 7:18am UTC](https://discuss.elastic.co/t/vega-lite-interactive-visual/339669/3 "2023-08-08T07:18:37Z")

</div>

Hi,

Is it possible in vega lite v4?

---

<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:** [September 5, 2023, 7:18am UTC](https://discuss.elastic.co/t/vega-lite-interactive-visual/339669/4 "2023-09-05T07:18:42Z")

</div>

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