Dynamically filter data shown in a Chart widget

[JAYAKUMARKUMAR]

Hi,

How can I use a custom SQL query with a Feature Service data source in Experience Builder to dynamically filter data shown in a Chart widget based on user input?

[SumitMishra_016 · Accepted solution]

To filter data in your Experience Builder chart:

1. Find the data source: Figure out where your chart gets its information (it's likely a "Feature Service").
2. Let users choose filters: Use widgets like text boxes or dropdowns to let users select how they want to filter the data.
3. Write a smart SQL query: Create an SQL query that changes based on what the user selects.
4. Tell the chart to use the new query: Apply the query to your chart's data source.
5. Refresh the chart: Make the chart display the filtered data.

const textBox = app.getWidgetById('textbox1');
const chartWidget = app.getWidgetById('chart1');
const featureServiceDataSource = chartWidget.dataSource;
textBox.on('change', (event) => {
  const userInput = event.target.value; 

  
  const sqlQuery = `YourFieldName = '${userInput}'`;

  
  featureServiceDataSource.setQuery({
    where: sqlQuery,
    outFields: ['*'],
  });

  
  chartWidget.refresh();

  console.log(`Applied SQL query: ${sqlQuery}`);
});