Kendo Charts: data via AJAX or during page load?

Question

I am using Kendo DataViz (using Complete for MVC) and am wondering what is the best approach for showing several charts (in my case 18 charts) on a single page (a dashboard page). I'm using EF 5, MVC 4, and .NET 4.

Should I fetch the data during page load so there is only one response with all the necessary data or do I set the charts up to each fetch their data via AJAX, in which case there would be the page load response followed by 18 AJAX requests? FYI, each of the 18 charts has their own SP to request their specific data, so there is no getting around having fewer than 18 DB calls.

I don't have access to the cool new async stuff (C# 4.5 Task Class), but I guess I could use the AsyncController stuff that's not quite as nice but still functional - this should make the 18 AJAX calls go pretty much in parallel, even when the requests are all fired at the same time. On the other hand, I could use the Parallel library to call the 18 SPs in parallel in the Page Load controller method.

My gut feeling is that going with AJAX may give the user a better perceived performance, but going with the Page Load may provide a better actual performance.

Based on your experience is my gut telling me the right thing? Any additional info would be appreciated as well.

Answer 1

I would set all of the charts to load through AJAX. Not only will the initial page load be instant, but the loading of the charts will essentially be asynchronous because multiple AJAX calls will be occurring simultaneously (it's not like having the charts load one at a time).

If the data for all 18 charts could be retrieved in a single query I would have suggested that, but since that is not the case there is no reason to block the whole page waiting for 18 stored procedures to run. Having the page load incrementally will improve its perceived performance.

Furthermore, if you expose the chart data through 18 different action methods, there would be additional benefits. For example, you can apply output caching at the action method level, caching certain charts for 15 minutes, other charts for an hour, etc.