This is a migrated thread and some comments may be shown as answers.

Loading Indicator

2 Answers 1650 Views
Chart
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 29 Mar 2017, 03:35 PM
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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Viktor Tachev
Telerik team
answered on 31 Mar 2017, 01:24 PM
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.



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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
John
Top achievements
Rank 1
answered on 31 Mar 2017, 02:25 PM

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.

Tags
Chart
Asked by
John
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
John
Top achievements
Rank 1
Share this question
or