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?
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?
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.
I believe vega does not provide any tools to do it. If so please give me any. Thank you
Maybe I don't understand this part. Could you give me an example?
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.
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?
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
agg: apple
query: a
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.
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.
PUT /test_vega/
{
"properties":{
"mappings":{
...
}
}
POST /test_vega/_bulk
{"index":{}}
{...how to create vega-lite in kibana?
Hi,
A good news!
I finaly got that you can combine two data/url caluses to one data using Vega.
{
"$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
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.
Hi, thank you for the example, however this is not two urls, there is no reference name for two urls.
See my script and replace values with url.
Have tried, grammer not correct
Something like this.
{
"$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.
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:
You can use Transforms in each data sources. Project Transform could create a new data stream with renamed field name.
The above piechart was made by Kibana 7.16.3 & Vega v5 (not Vega-lite). It was available at least in my environment.
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.
This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.