How to execute a client site query on Chart?

[Feifan]

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]

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/QueryDataManagerSample1643282035.zip  

 

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]

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]

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.  

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/QueryDataManagerSample1643282035.zip   

  

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]

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]

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 21^st January, 2020 

 

Please let us know if you have any concerns. 

Regards, 

Kesavan 

[Srihari Muthukaruppan]

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]

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. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chart623050984   

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