Pie Charts should have filter option to display specific entities

[mahesh_s]

TLDR - request to provide "filter by column" feature in Pie charts (& other charts), similar to the Filter toolbar in Table component.

Here, I have a (country x device_type) table measuring the number of users from each country that use each device for gaming. A Pie chart is a great way to visualize this data.

However, I can only show these numbers for ALL users. I'd like to add a country filter that let's me restrict the pie chart to users from a specific country. This is similar to Filter feature in the Toolbar of a Table component.

This can make the dashboard more interactive for users who wish to filter the pie chart to specific countries.
Can we look into adding this feature?

• Mahesh S.

[WidleStudioLLP]

Hello @mahesh_s ,

As per your request, I’ve created a step-by-step flow to help you solve your issue with filtering data based on a dropdown selection.

Step 1: Create the Dropdown Options

First, create a JavaScript snippet for your dropdown that provides country options, including an option to select all countries:

return [
  { label: "All", value: "All" },
  { label: "USA", value: "USA" },
  { label: "India", value: "India" },
  { label: "Germany", value: "Germany" }
];

This dropdown will allow users to select a specific country or view data for all countries.

---

Step 2: Prepare Sample Data

Here is a sample dataset representing users by country and device type:

return [
  { country: "USA", device_type: "Mobile", total_users: 4500 },
  { country: "USA", device_type: "PC", total_users: 3000 },
  { country: "USA", device_type: "Console", total_users: 2500 },
  { country: "India", device_type: "Mobile", total_users: 8000 },
  { country: "India", device_type: "PC", total_users: 2000 },
  { country: "India", device_type: "Console", total_users: 1000 },
  { country: "Germany", device_type: "Mobile", total_users: 3500 },
  { country: "Germany", device_type: "PC", total_users: 2700 },
  { country: "Germany", device_type: "Console", total_users: 2200 }
];

---

Step 3: Filtering Data Using a Transformer

To filter the data dynamically based on the selected country in the dropdown, use the following transformer code:

const data = {{query1.data}};  // The original data from your query
const selectedCountry = {{select1.value}};  // The currently selected dropdown value

// If no country is selected or "All" is chosen, return all data
if (!selectedCountry || selectedCountry === "All") {
  return data;
}

// Otherwise, filter the data for the selected country only
return data.filter(row => row.country === selectedCountry);

This transformer will automatically update your displayed data based on the country selected by the user.

---

Summary

• The dropdown provides a user-friendly way to select a country filter.
• The dataset contains multiple countries and device types.
• The transformer filters the dataset based on the dropdown value, showing all data if "All" is selected.

I will also share a screen recording and screenshots to demonstrate the entire flow visually for better understanding.

If you want, I can help you add more features like multi-select filtering, sorting, or advanced grouping. Just let me know!

[mahesh_s]

Thanks @WidleStudioLLP

1). I have ~200 unique countries in my dataset. Instead of manually adding a line for each country in the Javascript, can I simply fetch the unique values of the Country column from query1 and feed them to the Javascript? If so, how?

2). How do I implement Step 3? I have created two components: a javascript code and a Transformer.

I also pulled the Pie Chart from query1. But how do I make the filter appear to select the country?

[WidleStudioLLP]

Hi @mahesh_s,

Thanks for your response!

Let me walk you through the full process of how to correctly set the Country Select field using sample dataset like yours. Here's a step-by-step breakdown:

For Point 1: Use a Transformer to Get Unique Countries

To populate your country dropdown, first create a transformer that extracts all unique countries from your dataset (query1.data). Here’s how:

const uniqueCountries = {{ [...new Set(query1.data.map(item => item.country))] }};

return uniqueCountries.map(country => ({
  label: country,
  value: country
}));

• This ensures no duplicate countries.
• The dropdown will show each country as both the label and value.

For Point 2: Correctly Get the Selected Country Value

It’s important to ensure you’re capturing the selected country from your Select component (select1) properly.

Instead of using a hardcoded or incorrect value, get the selected country like this:

const selectedCountry = {{ select1.value }};

Visuals for Reference

Here are some screenshots to help you visualize the setup:

Let me know if you need more help — happy to support!