I am currently working on an interactive data dashboard with a dataset stored in an array of objects. I want to enhance the functionality by displaying data from one object at a time instead of all objects collectively, which is already functioning well. To test this new feature, I have set up a basic array:
var test1 = [
[{
"name": "Piece One",
"amount": 5
}, {
"name": "Piece Two",
"amount": 5
}, {
"name": "Piece Three",
"amount": 5
}],
[{
"name": "Piece One",
"amount": 1
}, {
"name": "Piece Two",
"amount": 1
}, {
"name": "Piece Three",
"amount": 5
}]
];
Alongside this, there's Vega-lite javascript included:
var pieCreate = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"title": "A pie chart",
"description": "A simple pie chart with embedded data.",
"width": "container",
"height": "container",
"data": {"values": test1[0]},
"mark": "arc",
"encoding": {
"theta": {
"field": "amount",
"type": "quantitative"
},
"color": {
"field": "name",
"type": "nominal",
"legend": null
}
}
};
The current setup works fine, but now I aim to allow users to choose a specific object to display. Each object represents data from different schools, and I want users to pick a school through a dropdown menu in the dashboard. Initially, I considered setting up a signal within the
"data": {"values":"field": "amount""field": "name""field": part, then I believe I could progress with a signal and html form solution, although doubts linger about being on the correct track.
I also tried following the guidelines provided in the vega-lite documentation here: . However, the concept presented there appears more complex than what I need, and due to limitations in my javascript knowledge, I struggle to simplify it for practical use. Are there any suggestions or ideas to achieve this goal using the discussed methods or perhaps a more efficient approach?