KendoUI chart - how do I show animation while loading data?

Question

I have a KendoUI chart generated with JavaScript. Is there a way to clear the plotArea with a command? For the purpose of showing a "Loading..." image while waiting for a DataSource to read remote data.

Thanks

Apophthegm

There is a complete example for this on the Telerik docs site: docs.telerik.com/kendo-ui/dataviz/chart/how-to/… – Jackofalltrades

I think they've included it as a part of their library now. Wasn't the case 2 years ago... Thanks for the link! – Apophthegm

Answer 1

Displaying and hiding the loading animation is:

// Display progress
kendo.ui.progress($("#loading"), true);

// Hide progress
kendo.ui.progress($("#loading"), false);

Then you should use requestStart and requestEnd events in the DataSource for knowing when to show or hide the progress animation.

The DataSource of the Chart would be:

dataSource    : {
    transport   : {
        read: {
            url:...
        }
    },
    sort        : {
        field: "year",
        dir  : "asc"
    },
    requestStart: function () {
        kendo.ui.progress($("#loading"), true);
    },
    requestEnd  : function () {
        kendo.ui.progress($("#loading"), false);

    }
},

Example here: http://jsfiddle.net/OnaBai/kcptr/

Petunia

That's a neat solution! The only problem is that the loading image hangs in the middle of the page - I have several charts on the page, and so the loading image must be contained within the chart area itself: jsfiddle.net/ningencat/kcptr/2 How would you go about fixing that issue? Thanks – Apophthegm

The problem is that the container of the loading needs to have a positioning set to relative. Try this: jsfiddle.net/OnaBai/kcptr/3 – Petunia

3 years later and this still works perfectly. Thanks! – Thurgau