11

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

gariepy
  • 3,576
  • 6
  • 21
  • 34
Katya S
  • 1,321
  • 3
  • 17
  • 31
  • There is a complete example for this on the Telerik docs site: http://docs.telerik.com/kendo-ui/dataviz/chart/how-to/show-overlay-while-loading – Krisztián Balla Aug 18 '15 at 10:41
  • I think they've included it as a part of their library now. Wasn't the case 2 years ago... Thanks for the link! – Katya S Aug 18 '15 at 14:38

1 Answers1

21

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/

OnaBai
  • 40,767
  • 6
  • 96
  • 125
  • 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: http://jsfiddle.net/ningencat/kcptr/2/ How would you go about fixing that issue? Thanks – Katya S Jul 23 '13 at 08:43
  • 2
    The problem is that the container of the loading needs to have a positioning set to relative. Try this: http://jsfiddle.net/OnaBai/kcptr/3/ – OnaBai Jul 23 '13 at 09:33
  • 1
    3 years later and this still works perfectly. Thanks! – Quiver Sep 01 '16 at 14:42