1. Home
  2. Forum
  3. Blazor
  4. Charts with WebAPI adapter will fire request multiple times.

Charts with WebAPI adapter will fire request multiple times.

Hi team,

I'm a little bit concerned about the url request with datamanager in a chart. 

For example, I'm rendering a Chart with 3 series

                    <ChartSeriesCollection>
                        <ChartSeries Name="Consumption" XName="CalendarYear" YAxisName="Consumption" YName="TotalConsumption" Type="ChartSeriesType.Area">
                            <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                        </ChartSeries>
                        <ChartSeries Name="Cost" XName="CalendarYear" YName="TotalDollar" Type="ChartSeriesType.Column">
                            <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                        </ChartSeries>
                        <ChartSeries Name="Delivered Rate" XName="CalendarYear" YAxisName="Rate" YName="CostCent" Width=2 Opacity="0.6" Type="ChartSeriesType.Line">
                            <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                            <ChartMarker Visible="true" Height="10" Width="10"></ChartMarker>
                        </ChartSeries>
                    </ChartSeriesCollection>


And from my json-server, it shows the request have been fire 3 times

GET /portfolioSummaryChart1?$inlinecount=allpages 200 3.524 ms - 1162
GET /portfolioSummaryChart1?$inlinecount=allpages 200 2.556 ms - 1162
GET /portfolioSummaryChart1?$inlinecount=allpages 200 2.239 ms - 1162

And if I commented one series, the request will only be fired twice.

GET /portfolioSummaryChart1?$inlinecount=allpages 200 3.596 ms - 1162
GET /portfolioSummaryChart1?$inlinecount=allpages 200 3.028 ms - 1162

As the data are identical, I don't understand this behavior,  surely it will put some extra burden on the backend.

Regards,

Feifan


9 Replies
DG Durga Gopalakrishnan Syncfusion Team February 24, 2020 12:47 PM UTC

Hi Feifan, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. We have prepared sample based on your requirement using WebApi adapter. Please check with the below screenshot and sample. 
 
Code Snippet 
 
<EjsChart> 
   <EjsDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Orders" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager> 
</EjsChart> 
 
 
Screenshot 
 
 
Sample 

Since we are unaware of your exact scenario which the issue is reproduced, so 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.
  • Please share your sample (or) code snippet with full configurations.
  • Share the details if you have done any other customization in your sample.
  • Share your datasource file.
  • Share your preview template version.
 
Kindly revert us, if you have any concerns. 

Regards, 
Durga G

FE Feifan February 24, 2020 11:36 PM UTC

Hi Durga,
          
Thank you for your reply. I'm mocking data with json-server, so I have modify the code sample a little bit,  and you can see what I was talking about on the json-server monitor. The mockdata is placed at the Mockdata folder.

Regards,

Feifan

Attachment: Datamanager1296782768_21d88abb.zip

DG Durga Gopalakrishnan Syncfusion Team February 25, 2020 02:24 PM UTC

Hi Feifan, 
 
We are facing some difficulties to make your sample runnable. We will check and update you the status within two business days (27th February, 2020). We appreciate your patience until then. 
 
Regards, 
Durga G 


FE Feifan March 2, 2020 01:09 AM UTC

Sorry Durga,

I checked the code and there was a typo in readme.md, you should run json-server --watch db.json --routes routes.json, then the json-server will serve with correct data

DG Durga Gopalakrishnan Syncfusion Team March 3, 2020 05:45 PM UTC

Hi Feifan, 
  
Sorry for inconvenience. 
  
We have validated reported scenario. We suggest you to use offline mode as true to restrict the request firing at multiple times. Enabling this property will fire the provided URL only once even when more number of series is provided. Please check with the below code snippet. 
  
Code Snippet 
  
<EjsChart> 
    <EjsDataManager Url="@url" Adaptor="Adaptors.WebApiAdaptor" Offline="true"> 
    </EjsDataManager> 
</EjsChart> 
@code { 
} 
  
Sample 
  
If the above specified suggestion doesn’t meet your requirement, please revert us. 
  
Regards, 
Durga G

FE Feifan March 4, 2020 12:39 AM UTC

Sorry Durga,
     
     I've tried setting the offline mode to true, the back end will still monitor three request. Besides, the chart will not render properly, as only one column will be rendered.

Regards


DG Durga Gopalakrishnan Syncfusion Team March 4, 2020 04:12 PM UTC

Hi Feifan, 
  
We are validating the reported scenario. We will update the status within one business day(5th March, 2020). We appreciate your patience until then. 
  
Regards, 
Durga G

DG Durga Gopalakrishnan Syncfusion Team March 6, 2020 12:46 PM UTC

Hi Feifan, 
 
Sorry for inconvenience. 
 
We are facing complexity while running the sample, since assigned json data, doesn’t rendering chart property. We are checking on this. We will update the status within one business day(10th March, 2020). We appreciate your patience until then. 
 
Regards, 
Durga G 


DG Durga Gopalakrishnan Syncfusion Team March 10, 2020 04:05 PM UTC

Hi Feifan, 
  
We were able to reproduce the reported scenario. We have reported this issue to concern team. Meanwhile, we are suggesting an option to render chart using an URL loaded using json server. If the below suggestion doesn’t meet your requirement, we will consider your scenario. Please check with below code snippet and sample. 
  
Code Snippet 
  
<EjsChart DataSource="@ChartData">  
</EjsChart> 
@code { 
private portfolioSummaryChart1Energy[] ChartData; 
protected override async Task OnInitializedAsync() 
{ 
   HttpClient client = new HttpClient(); 
   string response = await client.GetStringAsync(url); 
    ChartData = JsonConvert.DeserializeObject<portfolioSummaryChart1Energy[]>(response); 
    } 
} 
  
Screenshot 
 
  
Sample 
  
Kindly revert us, if you have any concerns. 
  
Regards, 
Durga G

Loader.
Up arrow icon