1. Home
  2. Forum
  3. Blazor
  4. How to execute a client site query on Chart?

How to execute a client site query on Chart?

I want to generate an interactive chart, which will dynamical change base on a mutilselector of category

@code{

     public class Sales{

          public string StoreID;

          public double FoodSales;

          public double DrinkSales;

          public double OtherSales;

          public DateTime Month;

     }

}

The mutliselector will provide a list of StoreID, and the page will render a stacked area chart based on the store list.

The thing is, if I use a local datasource, the query works fine,

<ChartSeries DataSource=@salesList Query=@QueryData Name="Food" XName="Month" YName="Food" Type="ChartSeriesType.StackingArea">

@code{

    public string QueryData = "new ej.data.Query().where('StoreID','equal','0001')";

}

but if I use a client side datamanager, it won't work.

<EjsDataManager Url="http://localhost:3000/saleList" Adaptor="Adaptors.WebApiAdaptor" Offline="true" ></EjsDataManager>

<ChartSeries Query=@QueryData Name="Food" XName="Month" YName="Food" Type="ChartSeriesType.StackingArea">

My understanding is that the chart can only take the response with format of { "result":[{}{}...{}],"count":6} and bind it, which might prevent it from execute a client side query, while the grid can take response of [{}{}{}...{}] format and do some local fitlering.

My question is, is there a way to work around or would it be a new feature you guys might consider?







9 Replies
SM Srihari Muthukaruppan Syncfusion Team December 18, 2019 05:32 PM UTC

Hi Feifan, 
 
We have analyzed your query. From that, we would like to let you know that the chart is working fine on the client-side while rendering a chart using a query and data manager. Unfortunately, we are unable to reproduce the issue. We have also attached the sample used by testing. Please find the below sample, code snippet and screenshot. 
 
 
Code Snippet: 
<EjsChart id="container1"> 
    <EjsDataManager Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/" CrossDomain="true"></EjsDataManager> 
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> 
    <ChartSeriesCollection> 
        <ChartSeries Type="ChartSeriesType.Column" xName="Assignee" yName="Estimate" Query=@QueryData> 
        </ChartSeries> 
    </ChartSeriesCollection> 
</EjsChart> 
 
@code{ 
    public string QueryData = "new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false)"; 
} 
 
 
Screenshot: 
 

If you still face this issue. Please share the following information which will be more helpful for further analysis and provide you the solution sooner. 

  • Try to reproduce the reported scenario in the above sample
 
  • Share the details if you have done any other customization in your sample.

  •  Please share the nugget package version used in your sample.
 
  • Share your dataSource file

Let us know if you have any concerns. 

Thanks,  
Srihari 
 


FE Feifan December 18, 2019 11:39 PM UTC

First of all, thank you for your reply Srihari.

I truly sorry that I might mislead you at beginning. Let's do this again.

Actually my blazor project is a server-side app.  And what I want to achieve is to send the request to back-end initially and render the chart with the query condition without sending another request to back-end by setting the offline="true". 

It's like the Grid component, just instead of doing local data filtering, I would like to do some local query to aggregate specific store with the current local data. 

Is there any approach to do this?

Thanks, Feifan

SM Srihari Muthukaruppan Syncfusion Team December 19, 2019 12:41 PM UTC

Hi Feifan,  

We have analyzed your query. From that, we would like to let you know that we have prepared a sample as per your requirement in server side. Unfortunately, we are unable to reproduce the issue. We have also attached the sample used by testing. Please find the below sample, code snippet and screenshot.  
  
  
Code Snippet:  
<EjsChart id="container1"> 
    <EjsDataManager Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/" Offline="true"></EjsDataManager> 
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> 
    <ChartSeriesCollection> 
        <ChartSeries Type="ChartSeriesType.Column" xName="Assignee" yName="Estimate" Query=@QueryData> 
        </ChartSeries> 
    </ChartSeriesCollection> 
</EjsChart> 
 
@code{ 
    public string QueryData = "new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false)"; 
} 
   
Screenshot:  
   

If still this is not your exact requirement. Please share the following information which will be more helpful for further analysis and provide you the solution sooner. 

  • Try to reproduce the reported scenario in the above sample
 
  • Share the details if you have done any other customization in your sample.

Let us know if you have any concerns.  

Thanks,   
Srihari  


FE Feifan December 20, 2019 02:26 AM UTC

Hi Srihari,

What I would like to do is after the data fetching, change the query by other component and do some local filtering. The code will be something like this

<EjsChart id="container1">
    <EjsDataManager Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/" Offline="true"></EjsDataManager>
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries Type="ChartSeriesType.Column" xName="Assignee" yName="Estimate" Query=@QueryData>
        </ChartSeries>
    </ChartSeriesCollection>
</EjsChart>
<EjsButton OnClick="@ChangeQuery">Change Query</EjsButton>

@code{

    public ChartSeries DefaultChartSeries = new ChartSeries();

    public string QueryData = "new ej.data.Query().take(5).where('Estimate', 'lessThan', 3, false)";

    public void ChangeQuery()
    {
        Console.WriteLine("button clicked");
        this.DefaultChartSeries.Query = "new ej.data.Query().where('Estimate', 'greaterThan',1.5, false)";
        this.DefaultChartSeries.DataBind();
        this.DefaultChartSeries.Refresh();
    }

}

Nothing happend after I clicked the button, and I can make it work by rebinding the Chart and refreshing it, but it will sent new request to back-end.


KM Kesavan Muthusamy Syncfusion Team December 31, 2019 12:16 PM UTC

Hi Feifan, 

Sorry for the inconvenience.  

We have analyzed your query and checked the reported issue at our end. We are able to replicate the reported issue at our end. So, we will resolve this issue in our upcoming patch release, which is expected to be roll out at on 21st January, 2020 
 
Please let us know if you have any concerns. 


Regards, 
Kesavan 


SM Srihari Muthukaruppan Syncfusion Team January 22, 2020 03:31 AM UTC

Hi Feifan, 

Sorry for the inconvenience. 

Due to some technical issues, we are unable to include this fix in this patch release. So we will consider this issue in our weekly patch release which is expected to be rolled out at January 28th 2019. We appreciate your patience until then.  
   
Thanks,   
Srihari M 


SM Srihari Muthukaruppan Syncfusion Team February 4, 2020 11:30 AM UTC

Hi Feifan, 
  
In our 2019 Volume 4 release we have some breaking changes along with breaking issues (which is resolved in successive release) in our DataManager components. So the DataManager requires a Generic TValue to process or serialize the data in our latest source, hence the reported issue is occurred while using Query property with Offline property. To overcome this issue we have provided the solution in sample level. In which we have define the DataManager externally and processed the data based on the TValue in OnAfterRenderAsync() method. Please find the below sample, screenshot and code snippet. 


Code snippet: 
<EjsDataManager @ref="DataManager" Url="https://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/"></EjsDataManager>  
  
<EjsChart DataSource="DataSource" id="container1">  
    <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>  
    <ChartSeriesCollection>  
        <ChartSeries Type="ChartSeriesType.Column" XName="Assignee" YName="Estimate" Query="@QueryData">  
        </ChartSeries>  
    </ChartSeriesCollection>  
</EjsChart>  
<EjsButton OnClick="@ChangeQuery">Change Query</EjsButton>  
  
@code{  
    EjsDataManager DataManager;  
    public IEnumerable<Order> DataSource { get; set; } = new List<Order>();  
    public ChartSeries DefaultChartSeries = new ChartSeries();  
    public string QueryData = "new ej.data.Query().take(5).where('Estimate', 'lessThan', 1.5, false)";  
  
    protected override async Task OnAfterRenderAsync(bool firstRender)  
    {  
        if (firstRender)  
        { //provide generic type TValue  
            object data = await DataManager.ExecuteQuery<Order>(new Query());  
            DataSource = (data as IEnumerable).Cast<Order>().ToList();  
            StateHasChanged();  
        }  
    }  
    public class Order  
    {  
        public int? Id { get; set; }  
. . . . .   
    }      
}  

Screenshot: 
 

Kindly let us know if you have any concern.  

Regards  
Srihari M 


JW Joy White November 10, 2025 01:15 PM UTC

How can I run a client-side query directly on a chart without using a backend API?
Is there a way to dynamically filter or update chart data in real time on the client side?
What’s the best method to bind client-side queries to meal cost at chick fil-a interactive chart components?


DG Durga Gopalakrishnan Syncfusion Team November 11, 2025 02:23 PM UTC

Joy,


You can dynamically filter or update chart data on the client side by modifying the bound data collection and calling StateHasChanged() or chart RefreshAsync() to reflect changes. You can use LINQ queries on the local data source to filter or transform data and bind the chart data as List or ObservableCollection. This approach avoids backend API calls and keeps everything client-side.


We have prepared a sample that demonstrates client-side filtering using a dropdown. It dynamically updates the chart without any backend API calls by modifying the data source and calling StateHasChanged().


private void OnFilterChange(ChangeEventArgs args)

{

     var selected = args.Value.ToString();

 

     if (selected == "High")

     {

         FilteredData = AllData.Where(d => d.Value > 50).ToList();

     }

     else if (selected == "Low")

     {

         FilteredData = AllData.Where(d => d.Value <= 50).ToList();

     }

     else

     {

         FilteredData = AllData;

     }

 

     StateHasChanged();

}


Sample : https://blazorplayground.syncfusion.com/BtLIiMCMICoZgUUP


If the provided suggestion doesn’t meet your requirement, please share your requirement in detail so that it will be helpful for us to analyze further and assist you better. Please let us know if you have any concerns.


Loader.
Up arrow icon