# How to create a pie chart of same value with two different filters **URL:** \ **Category:** Kibana\ **Tags:** vega\ **Created:** [February 2, 2022, 9:00pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127 "2022-02-02T21:00:37Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 2, 2022, 9:00pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/1 "2022-02-02T21:00:37Z")
I would like to create a pie chart based on two different filters and put the two values in a pie chart to have two sections value to be percentage of the sum of the two values. Is this doable? ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 3, 2022, 4:20am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/2 "2022-02-03T04:20:00Z")
I suppose you need to elaborate what you want. what do you mean by "filter"? Do you want to slice pie chart by some levels like this? ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/d/8df7de643a5bd7373765f72170ca297ca36e0001.jpeg) ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 3, 2022, 4:39am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/3 "2022-02-03T04:39:00Z")
Hi, yes thanks for your reply, I think the internal kibana chart does not working since I have nested fields for now (may flatten later, but not now). Hence I have to use vega. I don't think an elastic query can give two different numbers of one field based on two filters (i.e. two queries). So it has to be done in transform section of vega script, but I didn't find a way to do that either. ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 3, 2022, 6:29pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/4 "2022-02-03T18:29:34Z")
I believe vega does not provide any tools to do it. If so please give me any. Thank you ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 3, 2022, 8:40pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/5 "2022-02-03T20:40:57Z")
> [@Tingda\_Du](#): > > give two different numbers of one field based on two filters (i.e. two queries). Maybe I don't understand this part. Could you give me an example? ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 3, 2022, 11:42pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/6 "2022-02-03T23:42:55Z")
For example I want the number apple that is red and apple that is green and create a pie chart that describe the proportional of the two. ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 4, 2022, 12:03am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/7 "2022-02-04T00:03:19Z")
Is there any other fruits to show? And also the solution could be quite specific for the structure, could you share the sample documents and current code in Vega? ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 4, 2022, 1:37am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/8 "2022-02-04T01:37:00Z")
so the currently I have a two different queries in two separate vega plots that return the number in the data/url clauses of vega script. Like ```auto agg: apple query: a ``` ```auto agg: apple query: b ``` how to make a pie chart of the returned values of first code and second code and combine them into a pie chart, maybe through transform? But I don't see a way to do this. ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 4, 2022, 10:09am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/9 "2022-02-04T10:09:20Z")
Hmm, I have no idea about using two data clause in one mark. Depends on the mappings, however, I suppose adjust query to fit vega-lite has a little bit more possiblity. If you share the document mapping, sample documents and your current query to get the two values, I will give it a try. Copy pastable sharing is much appreciated as follows. ```auto PUT /test_vega/ { "properties":{ "mappings":{ ... } } POST /test_vega/_bulk {"index":{}} {... ``` ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 4, 2022, 11:13pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/10 "2022-02-04T23:13:01Z")
how to create vega-lite in kibana? ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 5, 2022, 5:43pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/11 "2022-02-05T17:43:00Z")
Hi, A good news! I finaly got that you can combine two data/url caluses to one data using Vega. ```auto { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A basic pie chart example.", "width": 200, "height": 200, "autosize": "none", "signals": [ {"name": "startAngle", "value": 0}, {"name": "endAngle", "value": 6.29}, {"name": "padAngle", "value": 0}, {"name": "innerRadius", "value": 0}, {"name": "cornerRadius", "value": 0}, {"name": "sort", "value": false} ], "data": [ { "name": "sourceA", "values": [ {"id": 1, "field": 4}, {"id": 2, "field": 6} ] }, { "name": "sourceB", "values": [ {"id": 3, "field": 10}, {"id": 4, "field": 3} ] }, { "name": "table", "source":["sourceA","sourceB"], "transform": [ { "type": "pie", "field": "field", "startAngle": {"signal": "startAngle"}, "endAngle": {"signal": "endAngle"}, "sort": {"signal": "sort"} } ] } ], "scales": [ { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "id"}, "range": {"scheme": "category20"} } ], "marks": [ { "type": "arc", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "id"}, "x": {"signal": "width / 2"}, "y": {"signal": "height / 2"} }, "update": { "startAngle": {"field": "startAngle"}, "endAngle": {"field": "endAngle"}, "padAngle": {"signal": "padAngle"}, "innerRadius": {"signal": "innerRadius"}, "outerRadius": {"signal": "width / 2"}, "cornerRadius": {"signal": "cornerRadius"} } } } ] } ``` The pie-chart script is just copied from [Pie Chart Example | Vega](https://vega.github.io/vega/examples/pie-chart/) With replacing data.values with data.url in both sourceA and sourceB, it will work. You can use vega from `Custom visualization` in Dashboard. Keep in mind that you have to change "`$schema`" from `vega-lite` to `vega`. ![image](https://us1.discourse-cdn.com/elastic/original/3X/8/f/8f57ede35f3632866e7d34fd3ab053422b8c405a.png) ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 8, 2022, 10:39pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/12 "2022-02-08T22:39:33Z")
> [@Tomo\_M](#): > > Pie Chart Example | Vega Hi, thank you for the example, however this is not two urls, there is no reference name for two urls. ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 9, 2022, 1:24am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/13 "2022-02-09T01:24:19Z")
See my script and replace `values` with `url`. ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 9, 2022, 1:35am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/14 "2022-02-09T01:35:20Z")
Have tried, grammer not correct ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 9, 2022, 8:01am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/15 "2022-02-09T08:01:43Z")
Something like this. ```auto { "$schema": "https://vega.github.io/schema/vega/v5.json", "description": "A basic pie chart example.", "width": 200, "height": 200, "autosize": "none", "signals": [ {"name": "startAngle", "value": 0}, {"name": "endAngle", "value": 6.29}, {"name": "padAngle", "value": 0}, {"name": "innerRadius", "value": 0}, {"name": "cornerRadius", "value": 0}, {"name": "sort", "value": false} ], "data": [ { name: "sourceA", url: { // Apply dashboard context filters when set %context%: true // Filter the time picker (upper right corner) with this field %timefield%: @timestamp // Which index to search index: _all // Aggregate data by the time field into time buckets, counting the number of documents in each bucket. body: { aggs: { time_buckets: { date_histogram: { // Use date histogram aggregation on @timestamp field field: @timestamp // The interval value will depend on the daterange picker (true), or use an integer to set an approximate bucket count interval: {%autointerval%: true} // Make sure we get an entire range, even if it has no data extended_bounds: { // Use the current time range's start and end min: {%timefilter%: "min"} max: {%timefilter%: "max"} } // Use this for linear (e.g. line, area) graphs. Without it, empty buckets will not show up min_doc_count: 0 } } } // Speed up the response by only including aggregation results size: 0 } }, format: {property: "aggregations.time_buckets.buckets"} }, { name: "sourceB", url: { // Apply dashboard context filters when set %context%: true // Filter the time picker (upper right corner) with this field %timefield%: @timestamp // Which index to search index: _all // Aggregate data by the time field into time buckets, counting the number of documents in each bucket. body: { aggs: { time_buckets: { date_histogram: { // Use date histogram aggregation on @timestamp field field: @timestamp // The interval value will depend on the daterange picker (true), or use an integer to set an approximate bucket count interval: {%autointerval%: true} // Make sure we get an entire range, even if it has no data extended_bounds: { // Use the current time range's start and end min: {%timefilter%: "min"} max: {%timefilter%: "max"} } // Use this for linear (e.g. line, area) graphs. Without it, empty buckets will not show up min_doc_count: 0 } } } // Speed up the response by only including aggregation results size: 0 } }, format: {property: "aggregations.time_buckets.buckets"} }, { "name": "table", "source":["sourceA","sourceB"], "transform": [ { "type": "pie", "field": "doc_count", "startAngle": {"signal": "startAngle"}, "endAngle": {"signal": "endAngle"}, "sort": {"signal": "sort"} } ] } ], "scales": [ { "name": "color", "type": "ordinal", "domain": {"data": "table", "field": "key_as_string"}, "range": {"scheme": "category20"} } ], "marks": [ { "type": "arc", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "key_as_string"}, "x": {"signal": "width / 2"}, "y": {"signal": "height / 2"} }, "update": { "startAngle": {"field": "startAngle"}, "endAngle": {"field": "endAngle"}, "padAngle": {"signal": "padAngle"}, "innerRadius": {"signal": "innerRadius"}, "outerRadius": {"signal": "width / 2"}, "cornerRadius": {"signal": "cornerRadius"} } } } ] } ``` Concatenating the results of two (exactly the same here) aggregations. ![image](https://us1.discourse-cdn.com/elastic/original/3X/c/7/c707c2ec4813251813c0dfb0b2af9758c047ef1c.png) ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 9, 2022, 7:44pm UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/16 "2022-02-09T19:44:00Z")
But how do you specify the names of the aggregated values, I need to do two different values instead of doc\_count. The value will have two different names. Also, the startAngle and endAngle is not available in vega: i.e. giving error of `Unrecognized signal name:` ---
**Author:** ![Tomo\_M](https://avatars.discourse-cdn.com/v4/letter/t/848f3c/32.png) [@Tomo\_M](https://discuss.elastic.co/u/Tomo_M)\ **Post date:** [February 10, 2022, 1:15am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/17 "2022-02-10T01:15:33Z")
You can use [Transforms](https://vega.github.io/vega/docs/transforms/) in each data sources. [Project Transform](https://vega.github.io/vega/docs/transforms/project/) could create a new data stream with renamed field name. > [@Tingda\_Du](#): > > The value will have two different names. Also, the startAngle and endAngle is not available in vega: i.e. giving error of `Unrecognized signal name:` The above piechart was made by Kibana 7.16.3 & Vega v5 (not Vega-lite). It was available at least in my environment. ---
**Author:** ![Tingda\_Du](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tingda_du/32/96433_2.png) [@Tingda\_Du](https://discuss.elastic.co/u/Tingda_Du)\ **Post date:** [February 11, 2022, 1:20am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/18 "2022-02-11T01:20:38Z")
Can I just rename to the same name for different source or I have to transform anyway. Also could you provide any solution that do not have any new feature (i.e. prior to version 7.10). I'm not familiar with how to combine two source as two section in the pie chart. It's still not very clear to me. ---
**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\ **Post date:** [March 11, 2022, 1:21am UTC](https://discuss.elastic.co/t/how-to-create-a-pie-chart-of-same-value-with-two-different-filters/296127/19 "2022-03-11T01:21:19Z")
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.