1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Speed up rendering a large amount of data with Syncfusion Chart

Speed up rendering a large amount of data with Syncfusion Chart

Hello everyone,

I am working on an ASP.NET web form project which need to render a chart from very large amount of data (100.000 data points approximately),
The data in JSON format which have size in about 40-50MB so it takes quite long each time to finish download the data from a remote server then render the chart. It makes the website frozen during this process.
So, is there any method to synchronously download the data/render the chart or showing a loading icon while the chart waiting for the data loaded etc to make the website more responsive,
I've tried to search on the forum and Syncfusion document for awhile but still not find the answer.

Thank you very much!

P/S: I'm using Syncfusion ASP.NET Web Forms (EJ1) version 18.1.0.52 on .Net Framework 4.6 with C#,

6 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team July 27, 2020 11:00 AM UTC

Hi Trinh, 

Greetings from Syncfusion. 

We have analysed your query. We suggest you to use ejWaitingPopup in your webpage to show and hide waiting popup before and after chart is rendering. We have an online demo as per your requirement. Please check with below link. 

WaitingPopup Getting Started 

Demo 

Kindly revert us, if you have any concerns. 

Regards, 
Durga G 


TT Trinh Thang Long July 27, 2020 03:48 PM UTC

Dear Durga Gopalakrishnan,

Thank you very much for the prompt reply. 
Below is my code to show the graph, the data source will be bind to graph using code behind (not Javascript), so how to show and hide the ejWaitingPopup in this case: 

Sorry I can not paste the code here so I uploaded it to PasteBin,

Thank you very much,


DG Durga Gopalakrishnan Syncfusion Team July 28, 2020 01:41 PM UTC

Hi Trinh, 

As of now, we are unable to show waiting popup control before loading the chart, so we have forwarded this issue to concern team. We will let you know the status within two business days(30th July, 2020). We appreciate your patience until then.  

Regards, 
Durga G 


DG Durga Gopalakrishnan Syncfusion Team July 30, 2020 04:13 PM UTC

Hi Trinh, 

We have prepared sample as per your requirement. We suggest you to show and hide the waiting popup using chart OnClientLoad and OnChartLoaded events. Please check with the below code snippet and sample. 

Code Snippet 

<link rel='nofollow' href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" /> 
<asp:UpdatePanel ID="udp2" runat="server" UpdateMode="Conditional" > 
               <ContentTemplate> 
                              <ej:WaitingPopup ID="target" Target ="#Chart1" ClientIDMode="Static" runat="server" ShowOnInit="false"></ej:WaitingPopup> 
                              <ej:Chart ID="Chart1" OnClientLoad="chartLoad" OnChartLoaded="chartLoaded" ClientIDMode="Static" runat="server"> 
                                             //… 
                              </ej:Chart> 
               </ContentTemplate> 
</asp:UpdatePanel> 
    <script> 
        function chartLoad() { 
            var popup = $("#<%=target.ClientID%>").data("ejWaitingPopup"); 
            popup.show(); 
        } 
        function chartLoaded() { 
             var popup = $("#<%=target.ClientID%>").data("ejWaitingPopup"); 
            setTimeout(function () { popup.hide() }, 300); 
        } 
    </script> 
 
Sample 
 
Note: Since, chart is not taking more time to load, we have added setTimeout function in OnChartLoaded event to show waiting popup for few seconds.  
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Durga G 


Marked as answer
TT Trinh Thang Long July 31, 2020 09:11 AM UTC

Excellent! This is exactly what I need, thank you very much!

DG Durga Gopalakrishnan Syncfusion Team August 3, 2020 12:01 PM UTC

Hi Trinh,  

Most welcome. Please get back to us if you need further assistance.    

Regards,  
Durga G 


Loader.
Up arrow icon