# Not able to visualize percentage on pie using vega
**URL:** https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234
**Category:** Kibana
**Tags:** vega
**Created:** [April 15, 2021, 12:44pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234 "2021-04-15T12:44:34Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@saumya1](https://discuss.elastic.co/u/saumya1)
#### Post date: [April 15, 2021, 12:44pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/1 "2021-04-15T12:44:34Z")
while doing aggregation on count of string I am getting error as nan%.
```auto
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"height": 500,
"width": 500,
"data": {
"values": [
{"date": "4/15/2020", "brand": "open", "mentions": "inc1"},
{"date": "4/7/2020", "brand": "close", "mentions": "inc2"},
{"date": "6/29/2020", "brand": "open", "mentions": "inc3"},
{"date": "11/7/2020", "brand": "close", "mentions": "inc4"},
{"date": "10/10/2020", "brand": "resolved", "mentions": "inc5"},
{"date": "10/25/2020", "brand": "pending", "mentions": "inc6"},
{"date": "11/7/2020", "brand": "pending", "mentions": "inc7"}
]
},
"encoding": {
"theta": {
"field": "mentions",
"stack": true,
"aggregate": "count",
"as":"tmen"
}
},
"transform": [{
"window": [{
"op": "count",
"field": "mentions",
"as": "TotalTime"
}],
"frame": [null, null]
},
{
"calculate": "datum.tmen/datum.TotalTime * 100",
"as": "PercentOfTotal"
}],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "brand",
"type": "nominal",
"legend": "true",
"scale": {"range": "category"}
}
}
},
{
"mark": {"type": "text", "radius": 250, "fontSize": 16},
"encoding": {"text": {"field": "brand", "type": "nominal"}}
},
{
"mark": {"type": "text", "radius": 90},
"encoding": {
"text": {"field": "PercentOfTotal", "type": "quantitative","aggregate":"mean","format":".2%"}
}
}
],
"view": {"stroke": null}
}
```
Thanks in advance 🙂
---
### Author:  [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)
#### Post date: [April 15, 2021, 3:49pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/2 "2021-04-15T15:49:17Z")
Your `datum.tmen` doesn't exist so you are getting not a number error. I don't know the solution because I'm not sure what you are trying to do but this the reason.
Just change `datum.tmen` to a number and you can see it work correctly.
---
### Author:  [@saumya1](https://discuss.elastic.co/u/saumya1)
#### Post date: [April 15, 2021, 4:07pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/3 "2021-04-15T16:07:24Z")
I want to visualise the brand percentage on pie
e.g, open 10% close 20% like that .
But "mentions " is the string value if m removing the transform and datum.tmen line then am getting brand count e.g,open 2,close 3.But requirement is to show percentage of brand.
---
### Author:  [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [April 15, 2021, 4:26pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/4 "2021-04-15T16:26:46Z")
You can use the Elasticsearch [normalize pipeline agg](https://www.elastic.co/guide/en/elasticsearch/reference/master//search-aggregations-pipeline-normalize-aggregation.html) to do this, or you can [calculate it in vega](https://discuss.elastic.co/t/cant-display-tooltip-at-all-in-vega-pie-chart/264056/4)
---
### Author:  [@saumya1](https://discuss.elastic.co/u/saumya1)
#### Post date: [April 22, 2021, 5:24am UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/5 "2021-04-22T05:24:02Z")
Can u guide how can i utilize it into my section of code .
Thnks in advance 🙂
---
### Author:  [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [April 22, 2021, 3:00pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/6 "2021-04-22T15:00:10Z")
I copied+pasted your config into the online Vega editor and then saw some errors. One of your most fundamental issues is that you can't mix `encoding` and `transforms`: they aren't the same thing.
Since all you want is the percentage of total, you can use one of the Vega-Lite tutorials for joinaggregate:
> **[Join Aggregate](https://vega.github.io/vega-lite/docs/joinaggregate.html#percent-of-total)**
>
> Vega-Lite - a high-level grammar for statistical graphics. Vega-Lite provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications. Vega-Lite specifications consist of simple...
Here's what I did:
```auto
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"height": 500,
"width": 500,
"data": {
"values": [
{"date": "4/15/2020", "brand": "open", "mentions": "inc1"},
{"date": "4/7/2020", "brand": "close", "mentions": "inc2"},
{"date": "6/29/2020", "brand": "open", "mentions": "inc3"},
{"date": "11/7/2020", "brand": "close", "mentions": "inc4"},
{"date": "10/10/2020", "brand": "resolved", "mentions": "inc5"},
{"date": "10/25/2020", "brand": "pending", "mentions": "inc6"},
{"date": "11/7/2020", "brand": "pending", "mentions": "inc7"}
]
},
"encoding": {
"theta": {
"field": "mentions",
"stack": true,
"aggregate": "count"
}
},
"transform": [{
"window": [{
"op": "count",
"field": "mentions",
"as": "TotalTime"
}],
"frame": [null, null]
},
{
"joinaggregate": [{
"op": "count",
"as": "groupcount"
}],
"groupby": ["brand"]
},
{
"calculate": "datum.groupcount/datum.TotalTime",
"as": "PercentOfTotal"
}],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "brand",
"type": "nominal",
"legend": "true",
"scale": {"range": "category"}
}
}
},
{
"mark": {"type": "text", "radius": 250, "fontSize": 16},
"encoding": {"text": {"field": "brand", "type": "nominal"}}
},
{
"mark": {"type": "text"},
"encoding": {
"text": {"field": "PercentOfTotal", "type": "quantitative","aggregate":"mean","format":".2%"}
}
}
],
"view": {"stroke": null}
}
```
---
### Author:  [@saumya1](https://discuss.elastic.co/u/saumya1)
#### Post date: [April 23, 2021, 11:50am UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/7 "2021-04-23T11:50:25Z")
this solution i have tried but not able to display individual percent of total if you can check in data 0 we are getting individual percent of total ,but while displaying it is showing either sum,count,mean but not all.
**"aggregate":"count",**
---
### Author:  [@wylie](https://discuss.elastic.co/u/wylie)
#### Post date: [April 23, 2021, 2:52pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/8 "2021-04-23T14:52:40Z")
I'm not sure what you're asking. You already got one piece of text displaying outside each slice, you could create the display text using an expression instead of using the field.
---
### Author:  [@aaron-nimocks](https://discuss.elastic.co/u/aaron-nimocks)
#### Post date: [April 23, 2021, 3:42pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/9 "2021-04-23T15:42:19Z")
Not sure why only 2 of them are showing up. Really don't have much experience with Vega-Lite. But I think this is closer to what you are going for.
```auto
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple pie chart with labels.",
"height": 500,
"width": 500,
"data": {
"values": [
{"date": "4/15/2020", "brand": "open", "mentions": "inc1"},
{"date": "4/7/2020", "brand": "close", "mentions": "inc2"},
{"date": "6/29/2020", "brand": "open", "mentions": "inc3"},
{"date": "11/7/2020", "brand": "close", "mentions": "inc4"},
{"date": "10/10/2020", "brand": "resolved", "mentions": "inc5"},
{"date": "10/25/2020", "brand": "pending", "mentions": "inc6"},
{"date": "11/7/2020", "brand": "pending", "mentions": "inc7"}
]
},
"encoding": {
"theta": {"field": "mentions", "stack": true, "aggregate": "count"}
},
"transform": [
{
"window": [{"op": "count", "field": "mentions", "as": "TotalTime"}],
"frame": [null, null]
},
{
"joinaggregate": [{"op": "count", "as": "groupcount"}],
"groupby": ["brand"]
},
{"calculate": "datum.groupcount/datum.TotalTime", "as": "PercentOfTotal"}
],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "brand",
"type": "nominal",
"legend": "true",
"scale": {"range": "category"}
}
}
},
{
"mark": {"type": "text", "radius": 250, "fontSize": 16},
"encoding": {"text": {"field": "brand", "type": "nominal"}}
},
{
"mark": {"type": "text", "radius": 100, "fontSize": 16},
"encoding": {
"text": {
"field": "PercentOfTotal",
"type": "nominal",
"format":".2%"
}
}
}
],
"view": {"stroke": null}
}
```
---
### Author:  [@saumya1](https://discuss.elastic.co/u/saumya1)
#### Post date: [May 4, 2021, 1:48pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/10 "2021-05-04T13:48:34Z")
I want to achieve the same pie chart as above with percentage ,the data set we are getting from tool using logstash, but getting error
"Cannot read property 'number' of undefined"
```auto
{
$schema: https://vega.github.io/schema/vega-lite/v2.json
title: { text: "pie chart graph" , color: "Red" }
// Define the data source
data: {
url: {
// Apply dashboard context filters when set
%context%: true
index: test123
body: {
// Set the size to load 10000 documents
size: 10000,
// Just ask for the fields we actually need for visualization
_source: ["result.incident_state.display_value.keyword","result.number.display_value.keyword"]
}
}
format: { property: "hits.hits" }
}
"encoding": {
"theta": {"field": "datum._source.", "stack": true, "aggregate": "count"}
},
"transform": [
{calculate: "datum._source.result.number.display_value.keyword", as: "result.number.display_value.keyword"},
{calculate: "datum._source.result.incident_state.display_value.keyword", as: "result.incident_state.display_value.keyword" },
{
"window": [{"op": "count", "field": "result.number.display_value.keyword", "as": "TotalTime"}],
"frame": [null, null]
},
{
"joinaggregate": [{"op": "count", "as": "groupcount"}],
"groupby": ["result.incident_state.display_value.keyword"]
},
{"calculate": "datum.groupcount/datum.TotalTime", "as": "PercentOfTotal"}
],
"layer": [
{
"mark": {"type": "arc", "outerRadius": 200},
"encoding": {
"color": {
"field": "result.incident_state.display_value.keyword",
"type": "nominal",
"legend": "true",
"scale": {"range": "category"}
}
}
},
{
"mark": {"type": "text", "radius": 250, "fontSize": 16},
"encoding": {"text": {"field": "datum._source.result.incident_state.display_value.keyword", "type": "nominal"}}
},
{
"mark": {"type": "text", "radius": 100, "fontSize": 16},
"encoding": {
"text": {
"field": "PercentOfTotal",
"type": "nominal",
"format":".2%"
}
}
}
],
"view": {"stroke": null}
}
```
thanks in advance 🙂
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [June 1, 2021, 1:49pm UTC](https://discuss.elastic.co/t/not-able-to-visualize-percentage-on-pie-using-vega/270234/11 "2021-06-01T13:49:00Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.