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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Best practice for huge chart data over Web API to SPA using JSON?

Thread ID:

Created:

Updated:

Platform:

Replies:

129925 Apr 10,2017 03:47 PM UTC Apr 12,2017 09:47 AM UTC ASP.NET Core 1
loading
Tags: Chart
cBashTn
Asked On April 10, 2017 03:47 PM UTC

Hi

I try to use a ASP.NET Core Web API that exposes chart data to a Single Page Application. I'd like to use the Syncfusion Chart controls to visualize the data. Now, with 100 points this is fast and easy. But there is the use case that someone might want to see like 5 Mio. data points. Of course, there aren't that much pixels on a screen to display but with the Chart control (and RangeNavigator) one can easily zoom in and try to see them.

I'm now wondering if there is a best practice in this scenario? Do Syncfusion Chart control support some kind of "paging" to load the needed data "on-the-fly" when zooming in?

If there is no in build function or pattern I might just load everything in a compressed way or load the new zoomed-in data on demand with an annoying loading-spinner.

Any advise is welcomed!

Anandaraj T [Syncfusion]
Replied On April 12, 2017 09:47 AM UTC

Hi Sebastian, 

Thanks for using Syncfusion products. 

We can use lazy loading feature available in chart to view huge number of data. We have prepared a simple sample to view data within specified range from 5 million data. The sample can be downloaded from the following link 
Note: 
 
  1. When 5 million data gets loaded in browser, then memory usage of browser is very high. So we recommend you to load 100000 data points in view. Loading more number of data will affect performance and memory usage of the browser.
 
  1. We can also use numerical x-axis for lazy loading. Our online demo for lazy loading in ASP.Net MVC platform uses both date time and numerical axis

  1. Since the example uses data from Web API, it takes time to get large number of data. We have used waiting popup (loading-spinner) to indicate that the data is not received by the browser.

In the above sample, an empty chart was rendered initially. After receiving data from the Web API, first 500 data out of 5 million was rendered in chart. We can use the scrollEnd event of range scrollbar in x-axis to dynamically load the data required by view. 

For example, if we move the button in range scroll bar to a new position, then scrollEnd event gets triggered. This event gives the newly selected range of chart through the parameter argument.data.newRange. After getting the new range of chart, we can request the corresponding data from Web API. 

Please refer the following code snippet to achieve this 

[CSHTML] 
 
<ej-chart id="container" enable-canvas-rendering="true" loaded="loadDataSource" scroll-end="scrollEnded">     
     
    <e-primary-x-axis value-type="AxisValueType.Datetime" label-format="dd/MM/yyyy"> 
        <e-scrollbar-settings visible="true">             
            <e-scroll-range min="new DateTime(2010, 1, 1)" max="new DateTime(2010, 1, 1).AddHours(5000000)"></e-scroll-range> 
        </e-scrollbar-settings> 
    </e-primary-x-axis> 
 
    . . . . 
    . . . . 
 
             
</ej-chart> 
 
<script type="text/javascript"> 
 
    //. . . . 
    //. . . . 
 
    //Event handler to handle scroll end event of range scroll bar 
    function scrollEnded(sender) { 
 
        var start = new Date(2010, 1, 1), 
            interval = 10, 
            end; 
 
        //Show waiting popup till chart renders the data from Web API 
        $("#container").ejWaitingPopup(); 
        $("#container").ejWaitingPopup("show"); 
 
        //newRange.start indicates the start range for the view after scrolling 
        //Date conversion is not necessary for numerical x-axis 
        start = (new Date(sender.data.newRange.start).getTime() - start.getTime()) / 1000 / 60 / 60; 
 
        //newRange.end indicates the end range for the view after scrolling 
        //Date conversion is not necessary for numerical x-axis 
        end = start + ((new Date(sender.data.newRange.end).getTime() - new Date(sender.data.newRange.start).getTime()) / 1000 / 60 / 60);        
              
        //Method to get the specified data from Web API and update the chart 
        getData(start, end); 
         
    } 
</script> 
 

Please let us know if you have any concern. 

Regards, 
Anand 


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.

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

;