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}`);
});

[JanetSilb_Spike]

@SumitMishra_016 can you please explain more about this?  Are you suggesting to add text or drop down widgets in addition to the chart widget, or to configure the query within the chart widget?  thanks!