How to render multi charts when I used ajax to request my controller action method

[Timo]

In my controller action method, it will generate a List<ChartProperties> object, then how can I use ajax to request this action and render this List<ChartProperties> on cshtml page?

I want to use this List<ChartProperties> to render multi charts on cshtml.

Thanks,

Xavier

[Dharanidharan Dharmasivam]

Hi Xavier, 

Thanks for using our products. 

We have analyzed your query. We have prepared a sample with respect to your requirement. In this sample, in a button click event we have achieved your requirement using ajax request. Find the code snippet below to achieve this requirement. 

ASP.NET Core: 

<input type="button" value="Render Chart" onclick="renderChart()" /> 

 

function renderChart() { 

       $.ajax({ 

            type: "GET", 

            url: '@Url.Action("RenderChart", "Chart")', 

            async: false, 

            success: function (data) { 

                var chartProperties = JSON.parse(data); 

                for (var i = 0; i < chartProperties.length; i++) { 

                    var element = document.createElement("div"); 

                    element.style.cssFloat = "left"; 

                    element.style.width = "50%"; 

                    element.id = "chart" + i; 

                    document.getElementsByTagName('body')[0].appendChild(element); 

                    $("#chart" + i).ejChart(chartProperties[i]); 

                } 

            }, 

        }); 

   } 

 

[Controller]: 

 

public JsonResult RenderChart() 

        { 

            List<ChartProperties> chartList = new List<ChartProperties>(); 

            ChartProperties chartModel = new ChartProperties(); 

            ChartProperties chartModel2 = new ChartProperties(); 

            Chart chart = new Chart();            

            InitializeChart(chartModel, chartModel2); 

            chartList.Add(chartModel); 

            chartList.Add(chartModel2); 

           //Return the serialized list to view page 

          return Json(chart.Serialize(chartList)); 

        } 

private void InitializeChart(ChartProperties chartModel, ChartProperties chartModel2) 

        { 

                 //Initialize the chart with required properties 

        } 

Screenshot: 

 

Sample for reference can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/135230/ze/Ajax_MultipleChart472302203  

 

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani. 

[Timo]

Thanks. It worked successfully. But it has a poor performace, if I have multi charts(20+) to render at one time, it will block my browser. How to solve it?

[Dharanidharan Dharmasivam]

Hi Xavier, 

Thanks for your update. 

We have tried to replicate performance related scenario at our end, but the performance of chart is good at our end. Sample used for testing can be find from below link. 

http://www.syncfusion.com/downloads/support/forum/135230/ze/chartSample(42)-592255190  

 

In the above sample we have rendered 42 charts in an ajax request and the time taken to render 42 charts were approximately 2434ms. We have calculated the time difference between the load event of first chart and the loaded event of last chart. 

Screenshot: 

 

Since we are unaware of your exact scenario on which the chart lags in performance, kindly revert us with the following details which will be helpful in further analysis and provide you the solution sooner. 

• Try to reproduce the reported issue with the attached sample and revert us the modified sample.
• Or provide your sample with replication steps.
• Also we would like to know the length of data source binding to each charts.
• Current version of Essential Studio you are using.

Thanks, 

Dharani. 

[Timo]

Hi Dharanidharan Dharmasivam,

I  just used your code sample to test. It rendered 42 charts in an ajax request and the time taken to render 42 charts were approximately 2434ms.

Between the 2434ms, the whole page will be blocked, I cannot do any operations, even if I want to click the navigation menu. How to solve this issue?

Best Regards,

Xavier

[Dharanidharan Dharmasivam]

Hi Xavier, 

Thanks for your update. 

We would like to let you know that, by default if DOM elements were manipulated continuously, then the browser will got hang. In your case, you are appending continuously more number of charts in DOM, so there will more operations performed like size allocation for each chart, etc. So, you were not able to do other operations when DOM is manipulated continuously. This is default issue in browser. 

However the chart performance can be increased by rendering chart in HTML5 Canvas mode. If chart is rendered in this mode, then the whole chart is rendered like an image and here DOM elements will be  reduced to greater extend. Find the code snippet to render the chart in HTML5 Canvas mode. 

ASP.NET Core: 

ChartProperties chartModel = new ChartProperties(); 

chartModel.EnableCanvasRendering = true; 

Screenshot for chart (DOM Element): 

 

For more information on chart rendering modes, kindly find the help document from below. 

https://help.syncfusion.com/aspnet-core/chart/rendering-modes#canvas  

Thanks, 

Dharani. 

[Timo]

Hi Dharanidharan Dharmasivam,

I solved this issue by using setTimeout method in my for loop code block.

The setTimeout() function is non-blocking and will return immediately. Therefore my loop will iterate very quickly.

for (var i = 0; i < chartProperties.length; i++) { 

                    (function(i){

setTimeout(function(i){

var element = document.createElement("div"); 

                    element.style.cssFloat = "left"; 

                    element.style.width = "50%"; 

                    element.id = "chart" + i; 

                    document.getElementsByTagName('body')[0].appendChild(element); 

                    $("#chart" + i).ejChart(chartProperties[i]); 

});

})(i);

         }

[Dharanidharan Dharmasivam]

Hi Xavier, 

Thanks for your update. 

Kindly revert us, if you need any further assistance. 

Thanks, 

Dharani.