We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to execute a client site query on Chart?

Thread ID:

Created:

Updated:

Platform:

Replies:

149930 Dec 15,2019 07:38 AM UTC Feb 4,2020 11:30 AM UTC Blazor 7
loading
Tags: Charts
Feifan
Asked On December 15, 2019 07:38 AM UTC

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?







Srihari Muthukaruppan [Syncfusion]
Replied On 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 
 


Feifan
Replied On 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

Srihari Muthukaruppan [Syncfusion]
Replied On 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  


Feifan
Replied On 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.


Kesavan Muthusamy [Syncfusion]
Replied On 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 


Srihari Muthukaruppan [Syncfusion]
Replied On 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 


Srihari Muthukaruppan [Syncfusion]
Replied On 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 { getset; } = 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 { getset; }  
. . . . .   
    }      
}  

Screenshot: 
 

Kindly let us know if you have any concern.  

Regards  
Srihari M 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon