Loading Indicator

[John]

Is there any way to have a loading indicator on the MVC Chart?  I've seen plenty of examples on how to do that in the JS Chart but none on the MVC Chart.  I have some charts with a lot of data that are taking 15-20 seconds to display so the user is sitting there wondering if the chart is even working.

[Viktor Tachev]

Hi John,

In order to implement the behavior you can use an approach that is very similar to the one described in the following example.

• http://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/show-overlay-while-loading

You need to add a div element that would be used to attach the progress indicator. Moreover, you need to handle the render event for the Chart component. In the event handler you should hide the loading image.

<div class="chart-loading"></div>

.Events(e=>e.Render("onRender"))

function onRender(e) {
    // Clear up the loading indicator for this chart
    var loading = $(".chart-loading", e.sender.element.parent());
    kendo.ui.progress(loading, false);
}

$(document).ready(function () {
    // Spin all loading indicators on the page
    kendo.ui.progress($(".chart-loading"), true);
});

Regards,
Viktor Tachev
Telerik by Progress

[John]

The onRender is not clearing the progress indicator I think because it is getting a reference to the chart div instead of the loading div.  I changed the onRender function to

kendo.ui.progress($(".chart-loading"), false);

 

and now it is working perfectly.  Thank you for the help.