How to update a chart with grid filtered data in Blazor Charts?

This article explains how to update a chart with grid filtered data in Blazor Charts.

Update Chart with Filtered Grid Data

Blazor Charts provides an option to update a chart with grid filtered data. To update the chart with filtered grid data, you need to utilize the GetFilteredRecordsAsync method to retrieve the filtered data from the grid, and then bind this filtered data to the chart.

In this code snippet, a grid displays a list of orders and allows for filtering. When the “GetFilteredRecord” button is clicked, it retrieves the filtered records from the grid and updates a chart with these records.

The grid is set up with a data source of sample orders and filtering enabled. A button triggers the retrieval of the filtered records using the GetFilteredRecordsAsync method. The retrieved data is then deserialized and assigned to the chart’s data source, which updates the chart to display the filtered data.

The OnInitialized method initializes the sample orders, and the Click method handles the button click event to update the chart.

Index.razor

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using Newtonsoft.Json

<SfGrid @ref="Grid" DataSource="@Orders" AllowFiltering="true"></SfGrid>
<SfButton OnClick="Click">GetFilteredRecord</SfButton>

@if (chartLoad)
{
   <SfChart>
       <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
       <ChartSeriesCollection>
           <ChartSeries DataSource="@Orders" Type="ChartSeriesType.Column" XName="CustomerID" YName="Freight"></ChartSeries>
       </ChartSeriesCollection>
   </SfChart>
}

@code {

   SfGrid<Order> Grid;
   public List<Order> Orders { get; set; }
   public Boolean chartLoad = false;
   
   protected override void OnInitialized()
   {
       Orders = Enumerable.Range(1, 10).Select(x => new Order()
           {
               OrderID = 1000 + x,
               CustomerID = "Customer" + x,
               Freight = 2.1 * x,
               OrderDate = DateTime.Now.AddDays(-x),
           }).ToList();
   }

   public class Order
   {
       public int? OrderID { get; set; }
       public string CustomerID { get; set; }
       public DateTime? OrderDate { get; set; }
       public double? Freight { get; set; }
   }

   public async Task Click()
   {
       var filteredData = await Grid.GetFilteredRecordsAsync();
       List<Order> filteredList = JsonConvert.DeserializeObject<List<Order>>(JsonConvert.SerializeObject(filteredData));
       this.Orders = filteredList;
       this.chartLoad = true;
   }
} 

The following screenshot illustrates the output of the code snippet.

Live Sample for Updating a Chart with Grid Filtered Data

Conclusion

I hope you enjoyed learning how to update chart with grid filtered data in Blazor Charts.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!