# Pie chart in vega

**URL:** <https://discuss.elastic.co/t/pie-chart-in-vega/260373>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [January 6, 2021, 5:00pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373 "2021-01-06T17:00:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 6, 2021, 5:00pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/1 "2021-01-06T17:00:03Z")

</div>

```auto

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4},
      {"category": "a", "value": 4},
      {"category": "c", "value": 4},
      {"category": "d", "value": 0},
      {"category": "e", "value": 4},
      {"category": "f", "value": 4}
    ]
  },
  "transform": [
      {
    "joinaggregate": [{
      "op": "count",
      "field": "category",
      "as": "a_count"
    }],
       "groupby": ["category"]
  },
   
  {
    "joinaggregate": [{
      "op": "sum",
      "field": "value",
      "as": "a_c"
    }],
       "groupby": ["category"]
  },
   

  {
    "calculate": "datum.a_count*datum.a_c",
    "as": "PercentOfTotal"
  }
  ],
  "encoding": {
    "theta": {"field": "PercentOfTotal", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }],
  "view": {"stroke": null}
}

```

Output :

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

Here I wanted to get composition\*value of each alphabet in category filed, as I a grouping by category I should get only one a, why am I getting 2 a's in Pie chart and how can I resolve it ?

---

<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:** [January 6, 2021, 5:21pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/3 "2021-01-06T17:21:17Z")

</div>

Thanks for providing the full spec! Your problem is that you are using `joinaggregate`, which will perform the aggregation and then copy it onto each row. Instead you should use an `aggregate` with two functions. Here is the working spec:

```auto

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 4},
      {"category": "a", "value": 4},
      {"category": "c", "value": 4},
      {"category": "d", "value": 0},
      {"category": "e", "value": 4},
      {"category": "f", "value": 4}
    ]
  },
  "transform": [
      {
    "aggregate": [{
      "op": "count",
      "field": "category",
      "as": "a_count"
    }, {
      "op": "sum",
      "field": "value",
      "as": "a_c"
    }],
       "groupby": ["category"]
  },   

  {
    "calculate": "datum.a_count*datum.a_c",
    "as": "PercentOfTotal"
  }
  ],
  "encoding": {
    "theta": {"field": "PercentOfTotal", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  }],
  "view": {"stroke": null}
}

```

---

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 7, 2021, 8:57am UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/4 "2021-01-07T08:57:04Z")

</div>

Thank you @wylie

---

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 7, 2021, 10:48am UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/5 "2021-01-07T10:48:28Z")

</div>

```auto
{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  "config": {"view": {"stroke": ""}},
  width: 600,
data: {
    url: {
      %context%: true
      index: index_dash_dash_slices_slides_decks
      body: {
        size: 10000
        _source: ["mediatype","pred_comp_sem","AgeP","PhotoOfPerson"]
        }
      }
      format: {property: "hits.hits"}
    },
   "transform": [
   {"filter": "datum._source.mediatype == 'Valid Graphic'"},
    {"filter": "datum._source.PhotoOfPerson != '0'"}  
   
   {
    "aggregate": [{
      "op": "count",
      "fields": ["_source.AgeP"],
      "as": ["a_count"]
    }],
     "groupby": ["_source.AgeP"]
  },
  {
  "joinaggregate": [{
      "op": "sum",
      "field": "_source.PhotoOfPerson",
      "as": "ap"
    }],
    "groupby": ["_source.AgeP"]
  },
  {
    "calculate": "datum.a_count" ,
    "as": "PercentOfTotal"
  }
  
   ],
"encoding": {
    "theta": {"field": "PercentOfTotal", "type": "quantitative","format": ".0f","stack": true},
    "color": {
  "field": "_source.AgeP", "type": "nominal"
      },
  },
  "layer": [
  {
    "mark": {
    "type": "arc", "innerRadius": 60,"outerRadius": 100,"padAngle":0,"radius2" : 25}
    },
    {
    "mark": {"type": "text", "radius": 120},
    "encoding": {
      "text": {"field": "_source.AgeP", "type": "nominal"}
    }
  }
 ]
}

```

Output :

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

@wylie I have used aggregate and join aggregate functions in the above code, due to which I am getting can't read error.

If I use aggregate for both of them as u have mentioned in above spec, I am getting the sum of PhotoOfPerson as 0, in case of joinaggregate I will get right value for sum, but I am facing above error. May I know how can I resolve this.

---

<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:** [January 7, 2021, 11:02pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/6 "2021-01-07T23:02:20Z")

</div>

@Pranusha119 can you provide an example with data that we can test in the online Vega editor?

---

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 8, 2021, 4:41am UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/7 "2021-01-08T04:41:21Z")

</div>

```auto
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple pie chart with labels.",
  "data": {
    "values": [
      {"category": "a", "value": 1},
      {"category": "a", "value": 1},
      {"category": "d", "value": 1},
      {"category": "d", "value": 1},
      {"category": "e", "value": 1},
      {"category": "f", "value": 1}
    ]
  },
  "transform": [
  {
    "aggregate": [{
      "op": "count",
      "field": "category",
      "as": "a_count"
    },{
      "op": "mean",
      "field": "value",
      "as": "a_sum"
    }],
      "groupby": ["category"]
  },

  {
    "calculate": "datum.a_count*datum.a_sum",
    "as": "PercentOfTotal"
  }
  ],
  "encoding": {
    "theta": {"field": "PercentOfTotal", "type": "quantitative", "stack": true},
    "color": {"field": "category", "type": "nominal", "legend": null}
  },
  "layer": [{
    "mark": {"type": "arc", "outerRadius": 80}
  }, {
    "mark": {"type": "text", "radius": 90,"fontSize":20},
    "encoding": {
      "text": {"field": "category", "type": "nominal"}
    }
  },
    {
    "mark": {"type": "text", "radius": 120,"fontSize":20},
    "encoding": {
      "text": {"field": "PercentOfTotal", "type": "nominal"}
    }
  }],
  "view": {"stroke": null}
}

```

Output :

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

On using sample data I am getting correct output.

```auto
{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  "config": {"view": {"stroke": ""}},
width: 600,
data: {
    url: {
      %context%: true
      index: index_dash_dash_slices_slides_decks
      body: {
        size: 10000
        _source: ["mediatype","pred_comp_sem","AgeP","PhotoOfPerson"]
        }
      }
      format: {property: "hits.hits"}
    },
   "transform": [
   {"filter": "datum._source.mediatype == 'Valid Graphic'"},
    {"filter": "datum._source.PhotoOfPerson == 1"},
   {
    "aggregate": [{
      "op": "count",
      "field": "_source.AgeP",
      "as": "a_count"
    },{
      "op": "mean",
      "field": "_source.PhotoOfPerson",
      "as": "ap"
    }],
    "groupby": ["_source.AgeP"]
  },
  {
    "calculate": "datum.a_count*datum.ap" ,
    "as": "PercentOfTotal"
  }
  
   ],
"encoding": {
    "theta": {"field": "PercentOfTotal", "type": "quantitative","format": ".0f","stack": true},
    "color": {
  "field": "_source.AgeP", "type": "nominal"
      },
  },
  "layer": [
  {
    "mark": {
    "type": "arc", "innerRadius": 60,"outerRadius": 100,"padAngle":0,"radius2" : 25}
    },
    {
    "mark": {"type": "text", "radius": 120},
    "encoding": {
      "text": {"field": "_source.AgeP", "type": "nominal"}
    }
  }
 ]
}

```

Output:

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

Same code I have used for my data, It's giving an error.

Data:

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

May I know why it's giving error.

---

<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:** [January 8, 2021, 5:54pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/8 "2021-01-08T17:54:40Z")

</div>

Okay, I have a suggestion. It seems very likely that the problem is here:

```auto
   "transform": [
   {"filter": "datum._source.mediatype == 'Valid Graphic'"},
    {"filter": "datum._source.PhotoOfPerson == 1"},

```

What I think would help you is to look at the Vega inspector (which is available in Kibana 7.10) or by the browser console. Type `VEGA_DEBUG.vegalite_spec` into your browser, and you'll see the actual JSON data that is returned by Elasticsearch.

---

<div class="post-metadata">

**Author:** ![Pranusha119](https://avatars.discourse-cdn.com/v4/letter/p/47e85d/32.png) [@Pranusha119](https://discuss.elastic.co/u/Pranusha119)\
**Post date:** [January 10, 2021, 1:05pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/9 "2021-01-10T13:05:23Z")

</div>

Hi @wylie

I don't think problem is with the filters, with the same filters I have used joinaggregate function instead of aggregate function, I was getting the output it's just that components were repeating in pie chart due to joinaggregate function.

code with joinaggregate function :

```auto
{
  $schema: https://vega.github.io/schema/vega-lite/v4.json
  "config": {"view": {"stroke": ""}},
width: 600,
data: {
    url: {
      %context%: true
      index: index_dash_dash_slices_slides_decks
      body: {
        size: 10000
        _source: ["mediatype","pred_comp_sem","AgeP","PhotoOfPerson"]
        }
      }
      format: {property: "hits.hits"}
    },
   "transform": [
     {"filter": "datum._source.mediatype == 'Valid Graphic'"},
    {"filter": "datum._source.PhotoOfPerson == 1"},
   {
    "joinaggregate": [{
      "op": "count",
      "field": "_source.AgeP",
      "as": "a_count"
    },{
      "op": "mean",
      "field": "_source.PhotoOfPerson",
      "as": "ap"
    }],
    "groupby": ["_source.AgeP"]
  },
  {
    "calculate": "datum.a_count*datum.ap" ,
    "as": "PercentOfTotal"
  }
  
   ],
"encoding": {
    "theta": {"field": "PercentOfTotal", "type": "quantitative","format": ".0f","stack": true},
    "color": {
  "field": "_source.AgeP", "type": "nominal"
      },
  },
  "layer": [
  {
    "mark": {
    "type": "arc", "innerRadius": 60,"outerRadius": 100,"padAngle":0,"radius2" : 25}
    },
    {
    "mark": {"type": "text", "radius": 120},
    "encoding": {
      "text": {"field": "_source.AgeP", "type": "nominal"}
    }
    },
      {
    "mark": {"type": "text", "radius": 150},
    "encoding": {
      "text": {"field": "PercentOfTotal", "type": "nominal"}
    }
  }
 ]
}

```

Output :

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

---

<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:** [January 11, 2021, 4:10pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/10 "2021-01-11T16:10:09Z")

</div>

I can't identify the issue without seeing the data. Since you're unwilling to share the output of `VEGA_DEBUG.vegalite_spec`, you will need to test this out yourself using the online Vega editor. I recommend reading the full docs on [aggregate in Vega-Lite](https://vega.github.io/vega-lite/docs/aggregate.html) to see if there is anything you've missed

---

<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:** [February 8, 2021, 4:10pm UTC](https://discuss.elastic.co/t/pie-chart-in-vega/260373/11 "2021-02-08T16:10:13Z")

</div>

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