Hi Team,
I am trying to implement selection options using radio button to show the top 5 values and other radio button shows the all the values available in that field using Vega-lite. It can be easily explained by this image.
Since, I have to filtered out the top 5 value from the same field and on the selection of other radio button all the available options should display in the visualization.
I am facing issue in implementing this.
please help me with some demo code to fulfil my requirement.
My code is....
"transform": [
{
"window": [{
"op": "rank",
"as": "rank"
}],
"sort": [{ "field": "_source.BeneficiaryType.shortCode","order": "descending" }]
}, {
"filter": "datum.rank >=5"
}
],
encoding: {
x: {
field: _source.BeneficiaryType.shortCode
type: nominal
title: Applicant type
}
y: {
field: _source.Applicant.AppliedLoanAmount
type: quantitative
title: Applied Loan Amount (₹ Cr.)
aggregate: sum
},
"color": {"value": "#6495ED "},
"tooltip": [
{
aggregate: sum
"field": "_source.Applicant.AppliedLoanAmount",
"type": "quantitative"
title: Applied Loan Amount (₹ Cr.)
}
]
},
"layer": [
{
"mark": "bar"
}, {
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"dx": -5
"dy": -5
angle: 0
fontWeight: bold
},
"encoding": {
"text": {"field": "_source.Applicant.AppliedLoanAmount", "type": "quantitative", "aggregate": "sum"}
"color": {"value": "black "}
},
"selection": {
"selector006": {
"type": "single",
"fields": ["Select"],
"bind": {
"input": "radio",
"options": ["_source.Applicant.ApprovedLoanAmount","Approved_Loan"],
"labels":[" Top 5", "All"]
"name": " "
},
"init": {"Select": "_source.Applicant.ApprovedLoanAmount"}
}
},
"transform": [
{
"fold": ["_source.Applicant.ApprovedLoanAmount", "Approved_Loan"],
"as": ["Select", "value"]
},
{"filter": {"selection": "selector006"}}
]
}
]