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

[cBashTn]

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]

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 

LazyLoading 

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.

 

2. 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

http://mvc.syncfusion.com/demos/web/chart/virtualrange 

3. 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