Creating Queries for Dropdowns
Check out this video to see how to create queries for dropdowns in your charts.
Good examples of this function would be query options for payment type, country, and city. It’s also important when changing dropdown query options that you update the filters for the main query that’s driving the visualization.
So, now we're looking here at the code for this visualization. And the first thing that I did was I started creating different queries for my different dropdowns.
Using Dropdowns for Queries
So, I have three different dropdowns. So, my first query is gonna be grouping by payment type. This will make sure that we just get the payment type options shown in our dropdowns.
The second query is gonna be our country dropdown, which we'll do the same thing, but this time, we're gonna be grouping by country. And finally, I have a query for city. And then I've also made sure that I've added some event listeners for my dropdowns. So, whenever I make changes, I submit the appropriate filters to the other queries. So, let me show you an example of that.
So, here's where we're making our selections for payment type, and every time we make a payment type change, we're gonna be updating the filters for the main query. The main query is what's driving this chart. And we're also updating the filters for the country query.
The Country Query
So, the country query is going to be what will be displaying the valid list of countries whenever we make a payment type selection. Similarly, if we scroll a bit down, we can see, for example, when I make a selection on city, we want to make sure that we reset all of the main query filters so that our chart updates. And if I show you the same example for country, you can also see here where I'm making the filters reset for the main query, I'm passing over the payment type and country options, and I do the same for the city.